متن در CSS
جعبه را اندازه دادید و overflow را کنترل کردید. حالا خودِ واژه‌ها را شکل بدهید. ویژگی‌های متن در CSS تراز، زیرخط، بزرگی حروف، فاصلهٔ حروف و ارتفاع خط را مدیریت می‌کنند — هنوز بدون عوض کردن خانوادهٔ فونت (آن درس بعدی است).
ابزارهای روزمرهٔ متن
📊 ویژگی‌های رایج متن
| ویژگی | کار روزمره |
|---|---|
text-align |
متن را در خط تراز می‌کند: چپ، راست، وسط، justify |
text-decoration |
زیرخط، خط بالا یا خط‌خوردگی را اضافه یا حذف می‌کند |
text-transform |
حالت حروف را عوض می‌کند: حروف بزرگ، کوچک، capitalize |
line-height |
ارتفاع هر خط را می‌گذارد — کلید خوانایی پاراگراف |
letter-spacing |
فاصله بین حروف را تنظیم می‌کند |
متن را تراز کنید
text-align متن را روی محور افقی بلوکِ حاوی قرار می‌دهد.
عنوان وسط‌چین
css.hero-title {
text-align: center;
color: #0f172a;
}تزیین — زیرخط و دوستانش
text-decoration روی متن خط می‌کشد. لینک‌ها اغلب زیرخط دارند؛ با none برش دارید، یا وقتی طراحی بخواهد underline / line-through بگذارید.
نمونه‌های تزیین
css.link-quiet {
text-decoration: none;
color: #2563eb;
}
.sale {
text-decoration: line-through;
color: #64748b;
}
.note {
text-decoration: underline;
}حالت حروف را عوض کنید
text-transform ظاهر حروف را عوض می‌کند بدون اینکه متن HTML را بازنویسی کنید.
تبدیل حالت حروف
css.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}
.city {
text-transform: capitalize;
}ارتفاع خط برای پاراگراف خوانا
line-height ریتم عمودی خطوط را کنترل می‌کند. مقدار بدون واحد مثل 1.5 با اندازهٔ فونت مقیاس می‌شود و برای متن بدنه انتخاب آرامی است.
ارتفاع خط راحت
css.article p {
line-height: 1.6;
color: #334155;
}فاصلهٔ حروف — دستِ سبک
کمی letter-spacing می‌تواند عنوان کوتاه را بازتر کند. پاراگراف بدنه را معمولاً طبیعی بگذارید مگر طراحی واقعاً بخواهد.
عنوان با فاصلهٔ حروف ملایم
css.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}خودتان امتحان کنید
- یک
h1را باtext-align: centerوسط بچینید. - زیرخط لینک را با
text-decoration: noneبردارید؛ اگر خواستید روی hover زیرخط برگردانید. - برچسب کوچک را با
text-transform: uppercaseحروف‌بزرگ کنید. line-heightپاراگراف را1.6بگذارید و با1.2مقایسه کنید.- به عنوان کمی
letter-spacingبدهید — بعد ببینید هنوز خوانا هست یا نه.
اشتباهات رایج
- با
text-align: centerامید بستن که کل چیدمان بلوک وسط شود (کار layout است، نه فقط متن) - همهٔ لینک‌ها را زیرخط‌دار گذاشتن وقتی طراحی لینک آرام می‌خواهد — یا برداشتن زیرخط بدون نشانهٔ دیگر
- کار font-family و font-size را اینجا آوردن (مال درس Fonts است)
letter-spacingخیلی بزرگ روی پاراگراف بلند (خواندنش سخت می‌شود)- قاطی کردن ابزارهای سه‌نقطهٔ سرریز متن با این پایه‌ها (تخصصی‌تر، بعداً)
خلاصه
text-alignمتن را چپ، راست، وسط یا justify می‌چیندtext-decorationزیرخط و خطوط مشابه را اضافه یا حذف می‌کندtext-transformحالت حروف را بدون ویرایش HTML عوض می‌کندline-heightخوانایی پاراگراف را شکل می‌دهدletter-spacingملایم می‌تواند عنوان کوتاه را جمع‌وجور کند- فونت‌ها درس بعدی‌اند؛ اینجا بماند چطور متن می‌نشیند و خوانده می‌شود
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود