متن در CSS

فرمت دهی متن

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

 

رنگ متن

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


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


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

مثال :

رنگ متن
body {
    color: blue;
}

h1 {
    color: green;
}
مشاهده مثال



نكته !‌ برای ایجاد CSS سازگار با استانداردهای W3C ،‌اگر بخواهید صفت color را تعریف كنید ،‌ باید صفت background-color را نیز تعریف كرده باشید.

 

ترازبندی متن

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

مثال :

تراز متن
h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
مشاهده مثال



زمانی كه ترازبندی متن بر روی justify تنظیم شود ،‌ تمامی سطر ها تا جایی كشیده می شوند تا همه عرض یكسان داشته باشند.

مثال :
text-align: justify
div {
    text-align: justify;
}
مشاهده مثال


 

تزئین متن

از صفت 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 برای تعیین حروف بزرگ یا كوچك در متن استفاده می شود. این صفت می تواند هر كاراكتری را از بزرگ به كوچك یا از كوچك به بزرگ تبدیل كند یا حروف اول كلمات را بزرگ كند.

مثال :

تبدیل متن
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;
}
مشاهده مثال
 


 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز