آموزش متن در CSS

متن در CSS

در CSS می‌توان استایل‌های مختلفی را به متن‌ها اعمال کرد؛ مانند رنگ، تراز بندی، دکوراسیون، تغییر اندازه و نوع حروف. این ویژگی‌ها به شما کمک می‌کنند متن‌های خود را در صفحات وب زیباتر و خواناتر طراحی کنید.

1. رنگ متن (Color Property)

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

• مقدار HEX (شانزده شانزدهی) – مثل "#ff0000"
• مقدار RGB (RED BLUE GREEN) – مانند "rgb(255،0،0)"
• یک اسم رنگ (color name) – مانند "red"

    body {
        color: blue;}
    h1 {
        color: #00ff00;}
    
    h2 {
        color: rgb(255,0,0);}

2. تراز بندی متن (Text Alignment)

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

    h1 {
        text-align: center;}
    p.date {
        text-align: right;}
    p.main {
        text-align: justify;}

3. جلوه‌های بصری متن (Text Decoration)

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

    a {
        text-decoration: none;}

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

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

4. تغییر نوع حروف (Text Transformation)

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

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

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

خاصیت text-indent را می توان به منظور تنظیم و مدیریت میزان تو رفتگی اولین خط متن مورد استفاده قرار داد (ميزان تو رفتگی و نقطه شروع اولين خط از يک پاراگراف نوشته را اداره می کند).

    p {
        text-indent: 50px;    }

جمع بندی

کلیه ی خاصیت های مربوط به متن در CSS در جدول زیر با ذکر عملکرد آن ها فهرست شده :