استایل دهی متن در CSS

صفت color

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

با استفاده از زبان CSS، یک رنگ معمولا به صورت های زیر مشخص میشود :

• یک نام رنگ - مانند "red"
• یک مقدار هگزادسیمال - مانند "ff0000#"
• یک مقدار RGB - مانند (255,0,0)rgb

رنگ متن پیشفرض برای یک صفحه در انتخاب کننده ی body قرار میگیرد :  

body {
    color: blue;
}

h1 {
    color: green;
}

در مثال بالا مقدار رنگ متون برای انتخاب کننده ی body مقدار "blue" در نظر گرفته شده است. این مقدار از طریق وراثت به عناصری که در بدنه ی صفحه قرار میگیرند اعمال میشود.

ترازبندی متون

از صفت text-align برای تنظیم نوع  ترازبندی افقی متون استفاده میشود. یک متن میتواند دارای ترازبندی چپ، راست ، وسط و  justify باشد.

مثال زیر ترازبندی های وسط ، چپ و راست را برای متون نشان میدهد(اگر جهت متن از چپ به راست باشد ترازبندی چپ مقدار پیشفرض است و اگر جهت متن از راست به چپ باشد ترازبندی راست مقدار پیشفرض است)

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

وقتی صفت text-align با مقدار justify مقدار دهی میشود، هر خط تا زمانی که طولش با بقیه ی خطوط مساوی شود، بسط داده میشود و margin های سمت راست و چپ با هم یکسان میشوند (مانند مجلات و روزنامه ها)

div {
    text-align: justify;
}

صفت text-decoration

از صفت text-decoration برای تنظیم و یا حذف تزئینات یک متن استفاده میشود.

مقدار ;text-decoration: none معمولا برای حذف زیر خط در لینک ها استفاده میشود :

a {
    text-decoration: none;
}

از مقادیر دیگر text-decoration برای تزئین متون استفاده میشود :

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

صفت text-transform

از صفت text-transform برای مشخص کردن حروف بزرگ و کوچک در متون زبان انگلیسی استفاده میشود.

از این صفت میتوان برای تبدیل حروف کوچک به بزرگ و بالعکس و تبدیل حروف اول هر کلمه به حروف بزرگ استفاده کرد :

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

صفت text-indent

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

p {
    text-indent: 50px;
}

صفت letter-spacing

از صفت letter-spacing برای مشخص کردن فضای بین کاراکتر ها در متون استفاده میشود.

مثال زیر نشان میدهد که چطور میتوان فضای بین کاراکتر را افزایش و یا کاهش داد :

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

صفت line-height

از صفت line-height برای مشخص کردن فضای بین خطوط استفاده میشود :

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

صفت direction

از صفت direction برای تغییر جهت متون در یک عنصر استفاده میشود :

p {
    direction: rtl;
}

صفت word-spacing

از صفت word-spacing برای مشخص کردن فضای بین کلمات یک متن استفاده میشود.

مثال زیر نشان میدهد که چطور میتوان فضای بین کلمات را افزایش و یا کاهش داد :

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

صفت text-shadow

از صفت text-shadow برای افزودن سایه به متون استفاده میشود.

در نمونه مثال زیر مقدار مکان سایه افقی 3 پیکسل بوده و برای مکان سایه عمودی این مقدار برابر با 2 پیکسل است و رنگ سایه نیز قرمز است.

h1 {
    text-shadow: 3px 2px red;
}