فرمت دهی متن

این متن با برخی از صفات فرمت دهی متن در CSS استایل دهی شده است. در تیتر این متن از صفات text-align و text-transform استفاده شده است. پاراگراف فاصله داده شده ،‌ترازبندی شده و و فاصله بین كاراكترها مشخص شده است. زیر خط از لینك رنگی "آموزش تنظیم رنگ ها در CSS" حذف شده است.

 

رنگ متن

برای تعیین رنگ متن در CSS از صفت color استفاده می كنیم. در CSS معمولا رنگ ها با یكی از مقادیر زیر مشخص می شوند :


- نام رنگ
- مقدار RGB
- مقدار Hex


رنگ پیش فرض برای یك صفحه در سلكتور body مشخص می شود.

مثال :

body {
    color: blue;
}

h1 {
    color: green;
}

ترازبندی متن

برای تنظیم تراز افقی متن از صفت text-align استفاده می شود. متن ها را می توان راست چین ،‌چپ چین ،‌وسط چین یا متقارن قرار داد.
در مثال زیر متن هایی با تراز بندی راست چین ،‌چپ چین و وسط چین وجود دارد. (اگر جهت متن راست به چپ تنظیم شود ،‌پیش فرض ترازبندی ،‌ راست چین است و برعكس)

مثال :

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

div {
    text-align: justify;
}

تزئین متن

از صفت text-decoration  برای تنظیم یا حذف یك سری آرایه ها در متن ،‌ استفاده می شود. معمولا مقدار ;text-decoration: none برای حذف زیرخط از لینك ها استفاده می شود.

مثال :

a {
    text-decoration: none;
}

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

تبدیل متن

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

مثال :

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

برجستگی متن

برای متمایز كردن سطر اول هر متن از  text-indent استفاده می شود.

مثال :

p {
    text-indent: 50px;
}

فاصله بین حروف

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

مثال :

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

ارتفاع سطر ها

با استفاده از صفت line-height می توان فاصله بین سطرهای یك متن را مشخص كرد.

مثال :

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

جهت متن

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

مثال :

div {
    direction: rtl;
}

فاصله بین كلمات

برای تعیین مقدار فاصله بین كلمات از صفت word-spacing استفاده می شود.

مثال :

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

سایه متن

صفت test-shadow ، سایه ای به متن می دهد.

در مثال زیر ، موقعیت افقی (3px) ، موقعیت عمودی (2px) و رنگ سایه (قرمز) ، مشخص شده است : 

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