درس هفتم


رنگ متن color

با استفاده از خصوصیات color می توان رنگ متن ها را تنظیم نمود.


مشخص کردن رنگ در css به یکی از روش های زیر صورت می گیرد:

name: نام رنگ لازم است مشخص شود مانند "red"
Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #
RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"

در مثال زیر برای صفحه در گزینشگر body رنگ پیش فرض تنظیم شده است.

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

تراز بندی متن

خصوصیت text-align برای تراز بندی متن در جهت محور X استفاده می شود.
با استفاده از خصوصیت text-align می توان تراز بندی متن در جهت محور X را انجام داد.
امکان قرار دادن متن در مرکز، چپ یا راست و یا در تمامی فضای اختصاصی وجود دارد.
هنگامی که خصوصیت text-align روی مقدار justify تنظیم شده باشد، خطوط پاراگراف کش آمده و خطوط یک اندازه می شوند. مثل متن مجله ها یا روزنامه ها
به مثال زیر توجه کنید:

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

آذین بندی متن

خصوصیت text-decoration برای
از خصوصیت text-decoration می توان برای تنظیم نمودن و یا حذف کردن Decoration های یک متن استفاده کرد.
به مثال زیر توجه کنید:

a {text-decoration:none;}

همچنین می توان از این خصوصیت برای آذین بندی متن نیز استفاده کرد.
مثال

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

دقت کنید که در متن های معمولی که لینک نیستند، نباید از underline استفاده کرد، زیرا موجب به اشتباه افتادن کاربران می شود.

حروف کوچک و بزرگ

استفاده از خصوصیت text-transform موجب می شود که حروف یک متن را به حروف بزرگ یا کوچک تبدیل شوند. پس این خصوصیت برای حروف فارسی کاربردی نخواهد داشت.
capitalize: تبدیل حروف ابتدایی کلمات یک متن را به حروف بزرگ
uppercase: تبدیل تمام حروف یک متن را به حروف بزرگ
lowercase تبدیل تمام حروف یک متن را به حروف کوچک
به مثال زیر توجه کنید:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

تو رفتگی ابتدای پاراگراف(Indentation)

استفاده از خصوصیت text-indent موجب تنظیم تورفتگی خط ابتدایی یک پاراگراف می شود.
مثال:

p {text-indent:50px;}

در مثال زیر نحوه مشخص کردن فاصله بین حروف نشان داده شده است:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>


در مثال زیر نحوه مشخص کردن فاصله بین خطوط پارگراف نشان داده شده است:

<!DOCTYPE html>
<html>
<head>
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>

در مثال زیر تراز بندی یک عکس در جهت محور Y نشان داده شده است:

<!DOCTYPE html>
<html>
<head>
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>An <img src="/beyamooz_logo.png" alt="beyamooz.com" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="/beyamooz_logo.png" alt="beyamooz.com" width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="/beyamooz_logo.png" alt="beyamooz.com" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>

در مثال زیر نحوه تغییر جهت متن نشان داده شده است:

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {direction:rtl;}
</style>
</head>
<body>
<div>Some text. Default writing direction.</div>
<div class="ex1">Some text. Right-to-left direction.</div>
</body>
</html>

مثال زیر افزایش فاصله خالی بین کلمات متن را نشان می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
p
{
word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is some text. This is some text.
</p>

</body>
</html>


معرفی خصوصیات مربوط به متن

color تنظیم رنگ متن
direction تنظیم جهت متن (راست به چپ یا چپ به راست)
letter-spacing تنظیم فاصله بین حروف متن
line-height تنظیم فاصله بین خطوط یک پاراگراف
text-align تنظیم تراز بندی متن در جهت محور X
text-decoration تنظیم آذین بندی متن
text-indent تنظیم تورفتگی خط ابتدایی یک پاراگراف
text-shadow اضافه کردن افکت سایه به یک متن
word-spacing افزایش یا کاهش دادن فاصله بین کلمات یک متن
text-transform تنظیم کوچکی یا بزرگی حروف یک متن
vertical-align تنظیم تراز بندی یک عنصر در جهت محور Y
white-space مشخص کردن چگونگی برخورد با فضاهای خالی داخل یک عنصر

1000 کاراکتر باقیمانده است