تنظیمات متن CSS
دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 7 دقیقه آخرین بروز رسانی: 12 بهمن 1399تنظیمات متن CSS را در این مقاله از سایت دویکس بررسی می‌کنیم. در این مقاله آموزش تنظیم رنگ ، فاصله ، جهت و تراز را یاد میگیرید. ویژگی های یکپارچه سازی متن CSS ، رنگ ها، اندازه‌ها ، قلم‌ها ، سایه‌ها را برای محتوای متن شما تنظیم می‌کند. CSS همچنین ویژگی‌هایی را برای تنظیم تراز متن ، فاصله بین حروف و کلمات و غیره ارائه می‌دهد.
گزینه های محبوب یک ظاهر طراحی متن CSS
متن عنصر اصلی محتوای اکثر صفحات وب است. بنابراین، مهم است که بتوانید ظاهر آن را به گونه‌ای کنترل کنید که خوانا، جذاب و متناسب با برند شما باشد. CSS به شما این امکان را می‌دهد که دقیقاً نحوه نمایش متن خود را در مرورگرهای مختلف تعیین کنید. در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
CSS طیف گسترده‌ای از ویژگی‌ها را برای قالب‌بندی متن ارائه می‌دهد. این ویژگی‌ها به شما امکان می‌دهند فونت، اندازه، رنگ، تراز و بسیاری از جنبه‌های دیگر ظاهر متن را کنترل کنید. برخی از رایج‌ترین ویژگی‌های متن CSS عبارتند از:
font-family: نوع فونت مورد استفاده برای متن را تعیین می‌کند.font-size: اندازه فونت را به پیکسل، واحدهای نسبی یا واحدهای متنی تنظیم می‌کند.font-weight: ضخامت فونت را از نازک تا ضخیم تنظیم می‌کند.font-style: شیوه فونت را به عادی، ایتالیک یا خط تحریری تنظیم می‌کند.color: رنگ متن را به عنوان نام رنگ، کد هگزادشیمی یا مقدار RGB تعیین می‌کند.text-align: تراز متن را در یک بلوک به چپ، راست، وسط یا توجیه تنظیم می‌کند.text-decoration: افکت‌های تزئینی مانند خط زیر، خط وسط و خط بالا را به متن اضافه می‌کند.line-height: ارتفاع خط را تعیین می‌کند که فاصله بین خطوط متن را کنترل می‌کند.letter-spacing: فاصله بین حروف را به پیکسل یا واحدهای درصدی تنظیم می‌کند.word-spacing: فاصله بین کلمات را به پیکسل یا واحدهای درصدی تنظیم می‌کند.text-transform: حروف متن را به حروف کوچک، بزرگ یا حروف بزرگ تبدیل می‌کند.text-indent: مقدار فرورفتگی اولین خط هر پاراگراف را تنظیم می‌کند.white-space: نحوه مدیریت فضای خالی در متن را کنترل می‌کند.
font-family: انتخاب فونت
یکی از مهم‌ترین ویژگی‌های متن CSS، font-family است که نوع فونت مورد استفاده برای متن را تعیین می‌کند. شما می‌توانید فونت‌ها را با نام آنها، مانند “Arial” یا “Times New Roman”، یا با استفاده از شناسه CSS آنها مشخص کنید.
اگر فونت مورد نظر شما در سیستم کاربر نصب نشده باشد، مرورگر از یک فونت جایگزین استفاده می‌کند. برای جلوگیری از این امر، می‌توانید چندین فونت را در لیست font-family با اولویت مشخص کنید. مرورگر به ترتیب اولویت از لیست عبور می‌کند تا اولین فونتی را که در سیستم کاربر نصب شده است پیدا کند.
p {
font-family: Arial, sans-serif;
}در مثال بالا، اگر کاربر فونت Arial را نصب کرده باشد، از آن برای نمایش متن پاراگراف‌ها استفاده خواهد شد. در غیر این صورت، مرورگر از اولین فونت sans-serif موجود در سیستم استفاده می‌کند.
font-size: تعیین اندازه فونت
اندازه فونت با استفاده از ویژگی font-size تعیین می‌شود. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد، از جمله:
- پیکسل (px): واحد اندازه‌گیری مطلق که اندازه فونت را به پیکسل‌های صفحه نمایش تبدیل می‌کند.
- em: واحدی نسبی که اندازه فونت را بر اساس اندازه فونت والد محاسبه می‌کند.
- rem: واحدی نسبی که اندازه فونت را بر اساس اندازه فونت ریشه (معمولاً اندازه فونت
<html>) محاسبه می‌کند. - درصد (%): واحدی نسبی که اندازه فونت را به عنوان درصدی از اندازه ظرف والد محاسبه می‌کند.
به عنوان مثال، کد زیر اندازه فونت تمام پاراگراف ها را به 16 پیکسل تنظیم می‌کند:
p {
font-size: 16px;
}font-weight: ضخامت فونت را تنظیم کنید
ضخامت فونت با استفاده از ویژگی font-weight تعیین می‌شود. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد، از جمله:
- normal: ضخامت فونت معمولی
- bold: ضخامت فونت ضخیم
- lighter: ضخامت فونت نازک تر از حد معمول
- bolder: ضخامت فونت ضخیم تر از حد معمول
- 100 تا 900: اعداد بین 100 تا 900 برای نشان دادن ضخامت دقیق فونت
به عنوان مثال، کد زیر ضخامت فونت تمام عناوین را به “bold” تغییر می‌دهد:
h1, h2, h3 {
font-weight: bold;
}font-style: استایل فونت را تنظیم کنید
استایل فونت با استفاده از ویژگی font-style تعیین می‌شود. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد، از جمله:
- normal: حالت عادی
- italic: حالت ایتالیک
- oblique: حالت کج (شبیه به ایتالیک، اما با زاویه متفاوت)
به عنوان مثال، کد زیر تمام متن‌ها را به صورت ایتالیک نمایش می‌دهد:
p {
font-style: italic;
}color: رنگ متن را تعیین کنید
رنگ متن با استفاده از ویژگی color تعیین می‌شود. شما می‌توانید رنگ‌ها را با نام آنها، مانند “red” یا “blue”، یا با استفاده از مقادیر RGB آنها مشخص کنید. به عنوان مثال، کد زیر رنگ متن تمام پاراگراف ها را به رنگ قرمز تنظیم می‌کند:
p {
color: red;
}text-align: تراز متن را تنظیم کنید
تراز متن در یک بلوک با استفاده از ویژگی text-align تعیین می‌شود. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد، از جمله:
| Description | Value |
| متن شما در سمت چپ صفحه ظاهر می شود (پیش فرض) | left |
| متن شما در سمت راست صفحه ظاهر می شود | right |
| متن شما در مرکز صفحه ظاهر می شود | center |
| متن کشیده خواهد شد ، بنابراین عرض هر خط یکسان است | justify |
به عنوان مثال، کد زیر متن تمام پاراگراف ها را در مرکز تراز می‌کند:
p {
text-align: center;
}text-decoration: افکت‌های تزئینی به متن اضافه کنید
افکت‌های تزئینی مانند خط زیر، خط وسط و خط بالا را می‌توان با استفاده از ویژگی text-decoration به متن اضافه کرد. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد، از جمله:
- none: هیچ افکت تزئینی
- underline: خط زیر
- overline: خط بالا
- line-through: خط وسط
- blink: متن چشمک زن
به عنوان مثال، کد زیر خط زیر را به تمام عناوین اضافه می‌کند:
h1, h2, h3 {
text-decoration: underline;
}line-height: ارتفاع خط را تنظیم کنید
ارتفاع خط با استفاده از ویژگی line-height تعیین می‌شود. این ویژگی فاصله بین خطوط متن را کنترل می‌کند. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد، از جمله:
- پیکسل (px): واحد اندازه‌گیری مطلق که ارتفاع خط را به پیکسل‌های صفحه نمایش تبدیل می‌کند.
- em: واحدی نسبی که ارتفاع خط را بر اساس اندازه فونت والد محاسبه می‌کند.
- rem: واحدی نسبی که ارتفاع خط را بر اساس اندازه فونت ریشه (معمولاً اندازه فونت
<html>) محاسبه می‌کند. - درصد (%): واحدی نسبی که ارتفاع خط را به عنوان درصدی از اندازه ظرف والد محاسبه می‌کند.
به عنوان مثال، کد زیر ارتفاع خط تمام پاراگراف ها را به 1.5 برابر اندازه فونت فعلی تنظیم می‌کند:
p {
line-height: 1.5;
}letter-spacing: فاصله بین حروف را تنظیم کنید
فاصله بین حروف با استفاده از ویژگی letter-spacing تعیین می‌شود. این ویژگی فاصله بین حروف جداگانه در متن را کنترل می‌کند. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد، از جمله:
- پیکسل (px): واحد اندازه‌گیری مطلق که فاصله بین حروف را به پیکسل‌های صفحه نمایش تبدیل می‌کند.
- em: واحدی نسبی که فاصله بین حروف را بر اساس اندازه فونت والد محاسبه می‌کند.
- rem: واحدی نسبی که فاصله بین حروف را بر اساس اندازه فونت ریشه (معمولاً اندازه فونت
<html>) محاسبه می‌کند. - درصد (%): واحدی نسبی که فاصله بین حروف را به عنوان درصدی از عرض حروف محاسبه می‌کند.
به عنوان مثال، کد زیر فاصله بین حروف تمام پاراگراف ها را به 0.2 پیکسل افزایش می‌دهد:
p {
letter-spacing: 0.2px;
}word-spacing: فاصله بین کلمات را تنظیم کنید
فاصله بین کلمات با استفاده از ویژگی word-spacing تعیین می‌شود. این ویژگی فاصله بین کلمات جداگانه در متن را کنترل می‌کند. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد. به عنوان مثال، کد زیر فاصله بین کلمات تمام پاراگراف ها را به 0.5 پیکسل افزایش می‌دهد:
p {
word-spacing: 0.5px;
}text-transform: حروف متن را تبدیل کنید
حروف متن را می‌توان با استفاده از ویژگی text-transform به حروف کوچک، بزرگ یا حروف بزرگ تبدیل کرد. مقادیر مختلفی را می‌توان برای این ویژگی استفاده کرد، از جمله:
- none: تبدیل حروف انجام نمی‌شود
- uppercase: همه حروف به حروف بزرگ تبدیل می‌شوند
- lowercase: همه حروف به حروف کوچک تبدیل می‌شوند
- capitalize: اولین حرف هر کلمه به حرف بزرگ تبدیل می‌شود
به عنوان مثال، کد زیر تمام عناوین را به صورت حروف بزرگ نمایش می‌دهد:
h1, h2, h3 {
text-transform: uppercase;
}سایه متن
استایل های متن CSS با ویژگی text-shadow حتی بهتر می شوند. در این مثال، سایه آبی را به متن اضافه می کنیم:
h1 {
text-shadow: 0px 2px 5px blue;
}این جدول را با مقادیر مورد نیاز و اختیاری text-shadow در نظر بگیرید:
| طول سایه افقی. مقادیر آن را با استفاده از پارامترهای طول (cm ، pt ، px و غیره) توصیف کنید. ضروری. | h-shadow |
| ارتفاع سایه عمودی. مقادیر آن را با استفاده از پارامترهای طول (cm ، pt ، px و غیره) توصیف کنید. ضروری. | v-shadow |
| شعاع تاری را مشخص می کند. مقدار آن را با استفاده از پارامترهای طول (cm ، pt ، px و غیره) توصیف کنید. اگر شامل نشود ، 0 است. | blur-radius |
| رنگ سایه را تعیین می کند. با استفاده از نام های رنگ ، مقادیر RGB یا HEX آن را توصیف کنید. اگر شامل نشود ، سیاه است. | color |
این مقاله چقدر براتون مفید بود؟