استایل متن (Text)

تمام ویژگی‌های استایل‌دهی به متن در CSS: رنگ، تراز، فاصله، دکوراسیون و تبدیل

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

CSS ابزارهای قدرتمندی برای کنترل ظاهر متن ارائه می‌دهد — از رنگ و فونت تا فاصله و دکوراسیون.

ویژگی‌های رنگ و تراز

ویژگیتوضیحمثال
colorرنگ متن#333
text-alignترازبندیcenter
directionجهت متنrtl
writing-modeحالت نوشتاریvertical-rl

۱. رنگ متن (color)

p { color: #333; }
    .title { color: rgb(52, 152, 219); }
    .warning { color: red; }

۲. ترازبندی (text-align)

مقدارتوضیح
leftچپ‌چین
rightراست‌چین
centerوسط‌چین
justifyتراز از هر دو طرف
startشروع (rtl = right)
endپایان (rtl = left)

۳. دکوراسیون متن (text-decoration)

a { text-decoration: none; }         /* حذف زیرخط */
    .underline { text-decoration: underline; }
    .overline { text-decoration: overline; }
    .strike { text-decoration: line-through; }

دکوراسیون پیشرفته

fancy {
        text-decoration: underline wavy red;    /* موجی قرمز */
        text-decoration-thickness: 2px;         /* ضخامت */
        text-underline-offset: 4px;             /* فاصله از متن */
    }

۴. تبدیل متن (text-transform)

مقدارتوضیحمثال
uppercaseهمه حروف بزرگHELLO
lowercaseهمه حروف کوچکhello
capitalizeحرف اول بزرگHello World
noneبدون تغییرhello

۵. فاصله بین حروف و کلمات

/* فاصله بین حروف */
    .spaced {
        letter-spacing: 2px;    /* بازتر */
        letter-spacing: -1px;   /* فشرده‌تر */
    }
    
    /* فاصله بین کلمات */
    .loose {
        word-spacing: 5px;
    }

۶. ارتفاع خط (line-height)

یکی از مهم‌ترین ویژگی‌ها برای خوانایی متن:

p {
        line-height: 1.6;   /* ۱.۶ برابر اندازه فونت ⭐ */
        /* یا */
        line-height: 24px;  /* مقدار ثابت */
        /* یا */
        line-height: 150%;  /* درصدی */
    }
مقدارتوضیح
1فشرده — مناسب عنوان‌ها
1.4 - 1.6عادی — متن بدنه ⭐
2باز — مناسب خوانایی بالا

۷. تورفتگی خط اول (text-indent)

p {
        text-indent: 30px;  /* تورفتگی خط اول */
    }

۸. فضای سفید (white-space)

مقدارتوضیح
normalپیش‌فرض — شکست خط خودکار
nowrapبدون شکست خط
preحفظ فاصله‌ها و خطوط
pre-wrapحفظ فاصله + شکست خودکار
pre-lineشکست خط ولی فاصله یکنواخت

۹. سرریز متن (text-overflow)

.truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;  /* ... اضافه می‌کند */
    }
    
    /* یا برش ساده */
    .clip {
        text-overflow: clip;
    }

۱۰. سایه متن (text-shadow)

.title {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    
    /* متن برجسته */
    .embossed {
        color: #ccc;
        text-shadow: 1px 1px 0 white, -1px -1px 0 #888;
    }
    
    /* گلو (glow) */
    .glow {
        color: white;
        text-shadow: 0 0 10px #3498db;
    }

۱۱. شکست کلمات (word-break / overflow-wrap)

/* شکست در هر جای کلمه */
    .break-all {
        word-break: break-all;
    }
    
    /* شکست فقط در مواقع ضروری */
    .wrap {
        overflow-wrap: break-word;
    }
    
    /* حفظ کلمه (پیش‌فرض) */
    .normal {
        word-break: keep-all;
    }

۱۲. جهت متن (direction)

/* فارسی/عربی */
    body {
        direction: rtl;
    }
    
    /* انگلیسی */
    body {
        direction: ltr;
    }

۱۳. سرریز چند خطی (line-clamp)

/* محدود کردن به ۳ خط */
    .clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

بهترین شیوه‌ها

نکات مهم

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

ابزارهای مرتبط