ویژگی متن در css

متن ها یکی از عناصر اصلی هرسایت هستند. برای اینکه متن برای کاربر جذاب باشد بایستی با استفاده از css آن را زیبا کنیم.

با استفاده از css می توانیم رنگ متن ، فونت متن ، اندازه متن ، میزان توپری و غیره را مشخص کنیم.

در قسمت زیر به ویژگی های مرتبط با متن می پردازیم.

رنگ متن :

با دستور color می توان رنگ متن را مشخص نمود. می توان تمام متن را با یک رنگ خاص مشخص کرد یا قسمتی از متن را به رنگ خاصی درآورد.

تراز افقی متن :

با دستور text-align می توانیم تراز افقی متن را مشخص کنیم.

اگر با برنامه word کار کرده باشید با این ویژگی آشنا هستید.

با دستور text-align می توانیم مشخص کنیم متن در سمت راست - چپ - وسط - یا بصورت justify باشد.

Justify

متن را از هر دو طرف تراز می کند و برای متن های طولانی مناسب می باشد . متن از هر دو طرف کشیده می شود و در یک راستا قرار می گیرد. این ویژگی در word هم وجود دارد.

مثال زیر را ببینید:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
color: red;
}
h2 {
text-align: left;
color: blue;
}
h3 {
text-align: right;
color: green;
}
p{
text-align: justify;
}
</style>
</head>
<body>
<h1>sh711.com (center)</h1>
<h2>sh711.com (left)</h2>
<h3>sh711.com (right)</h3>
<p>The three headings above are aligned center, left and right.The three headings above are aligned center, left and right.The three headings above are aligned center, left and right.The three headings above are aligned center, left and right. The three headings above are aligned center, left and right.The three headings above are aligned center, left and right.The three headings above are aligned center, left and right.The three headings above are aligned center, left and right. The three headings above are aligned center, left and right.The three headings above are aligned center, left and right.The three headings above are aligned center, left and right.The three headings above are aligned center, left and right. </p>
</body>
</html>

text-decoration

دستور text-decoration حالت های مختلفی دارد که با هم بررسی می کنیم و در مثال پایین آورده شده است.

none: خط را از زیر متن بر می دارد مانند لینک ها که به صورت پیش فرض خط زیر متن می باشد.

overline : خط بالای متن کشیده می شود.

line-through : خط روی متن کشیده می شود.

underline : خط زیر متن کشیده می شود.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<a href="http://sh711.com">sh711.com</a>
</body>
</html>

نویسنده : هدایت عباسی

تگ ها : آموزش css
عضویت طلایی
ثبت نظر