استایل متن (text) در CSS

استایل متن text در CSS ، که در این آموزش ما رنگ متن و انواع ترازبندی‌ها و چگونگی کار آن در CSS را به شما یاد خواهیم داد.

رنگ متن (Text Color)

خاصیت رنگ یا color property همان طور که از اسم آن پیدا است، ویژه ی انتخاب رنگ نوشته یا متن مورد نظر مورد استفاده قرار می گیرد.

در CSS، رنگ غالبا توسط مقادیر فهرست شده در زیر تعیین می شود:

• اسم رنگ (color name) مانند “red”
• مقدار HEX (شانزده شانزدهی) مثل “#ff0000”
• مقدار RGB  مانند “(255.0.0)”

رنگ پیش فرض برای یک صفحه در بدنه‌ی انتخاب گر (body selector) تعریف می گردد. به مثال زیر توجه کنید:

body {
   color: blue;
}

h1 {
   color: #00ff00;
}

h2 {
   color: rgb(255,0,0);
}

تراز بندی متن (text alignment)

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

زمانی که خصوصیت text-align روی “justify” تنظیم می شود، هر خط تا آنجایی کشیده شده یا بسط داده میشود که از نظر پهنا (width) با هم برابر شوند، حاشیه های سمت چپ و راست نیز درست مشابه مجله یا روزنامه هر دو کاملا باید راست و مستقیم باشند.

h1 {
   text-align: center;
}

p.date {
   text-align: right;
}

p.main {
   text-align: justify;
}

اعمال جلوه های بصری به متن (Text Decoratio)

خاصیت text-decoration به منظور اعمال جلوه های تصویری به متن یا حذف آن ها از نوشته‌ی مورد نظر بکارگرفته می شوند. خاصیت text-decoration عمدتا جهت حذف زیرخط (underline) از لینک ها برای مقاصد طراحی مورد استفاده قرار می گیرد.

a {
   text-decoration: none;
}

از آن همچنین برای افزودن جلوه‌های بصری (decoration) به نوشته نیز استفاده می شود، به مثال زیر توجه کنید:

h1 {
   text-decoration: overline;
}

h2 {
   text-decoration: line-through;
}

h3 {
   text-decoration: underline;
}

تبدیل نوع متن از حروف کوچک به بزرگ و بالعکس (Text Transformation)

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

مثال:

p.uppercase {
   text-transform: uppercase;
}

p.lowercase {
   text-transform: lowercase;
}

p.capitalize {
   text-transform: capitalize;
}

تنظیم تو رفتگی متن (Text Indentation)

خاصیت 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;
}

فاصله‌ی بین کلمات (Word Spacing)

برای تعیین فضای بین کلمات در یک متن استفاده می شود. مثال زیر نشان می دهد که چگونه می‌توان  فضای بین کلمات را افزایش یا کاهش داد:

h1 {
   word-spacing: 10px;
}

} h2
   word-spacing: -5px;
}

سایه متن (Text Shadow)

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

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