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

زبان 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;
}
خودتان امتحان کنید

 

منتشر شده در ۲۹ مرداد ۱۳۹۶ حمید رضا ملکی ۱۲۵۷ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید