آموزش سبک بندی متن در CSS به زبان ساده با مثال کاربردی

ویژگی های متن در CSS به شما امکان می دهد چندین سبک مانند رنگ، تراز، فاصله، آرایش، تبدیل نوع حروف و … را به راحتی برای متن تعریف کنید.

قالب بندی متن با CSS

CSS برای تعریف سبک های متن چندین ویژگی دارد. این ویژگی ها به شما امکان کنترل دقیق روی نمایش ظاهری کاراکترها، فاصله ها، کلمات، پاراگراف ها و … را می دهد.

می توانید ویژگی های متن زیر را برای یک عنصر تنظیم کنید:

Text Color

رنگ متن با ویژگی color تعریف می شود.

مثال

h1 {
color: #ff0000;
}
p {
color: green;
}

توجه: اگرچه به نظر می رسد که رنگ متن بخشی از متن در CSS است، اما در واقع یک ویژگی مستقل در CSS است.

Text Alignment

از ویژگی text-align برای تنظیم تراز افقی متن استفاده می شود.

مقادیر ممکن برای این خاصیت عبارتند از:

left, right, center, justify, inherit.

مثال

توجه: وقتی مقدار ویژگی text-align برابر با justify تنظیم شده باشد، هر خط آنقدر کشیده می شود به طوری که عرض خطوط مساوی و حاشیه های چپ و راست سرراست شود.

h1 {
text-align: center;
}
p {
text-align: justify;
}

Decoration

از ویژگی text-decoration برای تنظیم یا حذف آرایش و تزیین از متن استفاده می شود. مقادیر احتمالی این ویژگی عبارتند از:

none, underline, overline, line-through, blink, inherit.

باید از خط کشیدن زیر متنی که لینک نیست (استفاده از مقدار underline)، خودداری کنید زیرا ممکن است بازدید کننده را گیج کند.

مثال

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

اخطار: مقدار blink برای ویژگی text-decoration در CSS در بیشتر مرورگرها پشتیبانی نمی شود. در نتیجه باید از به کار بردن این مقدار خودداری بفرمایید.

حذف خط پیش فرض زیر متن لینک ها

معمولاً از ویژگیtext-decoration  برای حذف خط پیش فرض از زیر متن لینک ها استفاده می شود. حذف کامل این خط می تواند بازدید کننده را گیج کند. مگر اینکه جلوه های ظاهری دیگری را برای برجسته کردن لینک ها ارائه دهید.

به عنوان مثال، می توانید از نقطه چین برای تأکید بر لینک های خود به جای خط یکپارچه استفاده کنید.

مثال

a {
text-decoration: none;
border-bottom: 1px dotted;
}

توجه: هنگام ایجاد یک لینک در HTML، مرورگرهای به طور خودکار یک خط در زیر متن لینک برای سبک دهی آن قرار می دهند، به طوری که خوانندگان می توانند، متن قابل کلیک را تشخیص دهند.

Text Transformation

از ویژگیtext-transform  برای تنظیم حروف متن استفاده می شود.

می توان از آن برای تنظیم محتوای متنی عنصر در حروف بزرگ یا حروف کوچک استفاده کرد و یا حروف اول هر کلمه را بزرگ نمایش داد. مقادیر ممکن برای ویژگیtext-transform  عبارتند از:

none, capitalize, uppercase, lowercase, inherit.

مثال

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

Text Indentation

از ویژگی Text Indentation برای تنظیم میزان تورفتگی خط اول متن یک عنصر استفاده می شود. مقادیر ممکن برای ویژگی Text Indentation عبارتند از: درصد (٪) ، طول (مشخص کردن فضای تورفتگی) یا inherit.

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

مثال

p {
text-indent: 100px;
}

توجه: این که آیا متن از سمت چپ یا راست تورفتگی داشته باشد، بستگی به جهت متن داخل عنصر دارد که توسط ویژگی direction  در CSS تعریف می شود.

Word Spacing

ویژگیword-spacing  برای تعیین فاصله بین کلمات استفاده می شود.

• فاصله کلمات می تواند تحت تأثیر تراز متن باشد (ویژگیtext-align ).
• هنگامی که فاصله خالی حفظ شود، تمام کاراکترهای فاصله تحت تأثیر فاصله کلمه قرار می گیرند (ویژگیwhite-space ).

مقادیر ممکن برای ویژگیword-spacing  عبارتند از: طول (مشخص کردن فضای بین کلمات)،normal  و inherit.

مثال

p.one {
word-spacing: 20px;
}
p.two {
word-spacing: 20px;
text-align: justify;
}
p.three {
word-spacing: 20px;
white-space: pre;
}

Letter Spacing

ویژگی letter-spacing برای تعیین فاصله اضافی بین کاراکترهای متن استفاده می شود.

مقادیر ممکن برای این ویژگی عبارتند از: طول (مشخص کردن فضای اضافی علاوه بر فضای پیش فرض داخل کاراکترها که باید در بین کاراکترها درج شود)،normal  و inherit.

مثال

h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}

Line Height

ویژگی line-height، ارتفاع خط متن (یا فاصله خطوط) را تعریف می کند.

مقادیر ممکن برای این خاصیت عبارتند از: درصد (٪)، طول، عدد، normal و inherit.

مثال

p {
line-height: 1.2;
}

وقتی مقدار یک عدد باشد، ارتفاع خط با ضرب اندازه قلم عنصر در عدد محاسبه می شود. در حالی که، مقادیر درصد به به اندازه قلم عنصر وابسته اند.

توجه: مقادیر منفی برای این ویژگی مجاز نیست. این ویژگی همچنین یک جزء از ویژگی کوتاه شده font است.

اگر مقدار ویژگی line-height از مقدار ویژگی font-size برای یک عنصر بیشتر باشد، این اختلاف (با نام ” فاصله خطوط”) تقسیم بر ۲ می شود (“نصف- فاصله خطوط” نامیده می شود) و به طور مساوی روی بالا و پایین کادر خط توزیع می شود..

p {
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}