استایل دهی به متن در css

هفتمین جلسه از دوره جامع css اختصاص داره به آموزش استایل دهی به متن در css. توی این جلسه قراره یاد بگیرید تنظیمات ظاهری متن مثل اندازه فونت، رنگ متن، جهت متن، وزن فونت، حالت متن و… رو تغییر بدید. همونطور که هممون دیدیم، متن‌ها بخش عمده وبسایت‌ها و وب اپلیکیشن‌ها رو تشکیل میدن. به همین دلیل برای کسی که قراره کدهای ui (همون فرانت اند یا frontend) رو پیاده سازی کنه، خیلی مهمه که به این بخش کاملا مسلط باشه. پس خوب حواستون رو جمع کنید که بریم سراغ آموزش.

 

دستورات  استایل دهی به متن در css:

تعیین فونت با font-family:

این دستور برای تعیین کردن فونت متن استفاده میشه. به تکه کد زیر توجه کنید، این کد اول یه تگ p تعریف میکنه و بعد با استفاده از استایل font-face، فونت متن رو تغییر میده. همونطور که میبینید برای استفاده از این دستور لازمه که اسم فونت (در اینجا، “Times New Roman” ) رو بعد از علامت : بنویسیم. به این ترتیب فونت متن درون تگ p، به فونت Times New Roman تغییر میکنه.

<p>This is a paragraph</p>

p {
font-family: “Times New Roman”;
}

تعیین وزن متن با font-weight:

یکی دیگه از دستورات برای استایل دهی به متن در css، استایل font-weight هست. با استفاده از این استایل می‌تونید ضخامت متن رو تغییر بدید. مقدار این استایل یک عدده که هرچی بیشتر باشه، ضخامت متن هم بیشتره. دوستان اگه مقدار این عدد رو برابر با 600 یا بیشتر از اون وارد کنید، متن bold میشه. به کد زیر دقت کنید. این کد متن درون تگ p رو با انتساب font-weight با مقدار 700، به شکل bold در میاره.

<p>This is a paragraph</p>

p {
font-weight: 700;
}

 

تعیین سایز متن با font-size:

برای تغییر اندازه متن می‌تونید از font-size استفاده کنید. مقدار فونت سایز میتونه عددی بر حسب پیکسل (px) و یا واحدهای رایج برای تعیین ابعاد طول و عرض صفحه نمایش باشه. میدونم که احتمالاً این جمله آخر کمی براتون گیج کننده شده اما نگران نباشید. بعداً در یک جلسه مجزا از همین دوره به طور کامل درباره واحدهای اندازه گیری و طراحی واکنشگرا با هم صحبت می‌کنیم. اما برگردیم به بحث اصلی.

علاوه بر استفاده از عددی بر حسب پیکسل به عنوان مقدار دستور فونت سایز میتونیم از عبارت‌های small, mediume, large و… استفاده کنیم که به ترتیب اندازه متن رو بزرگ، متوسط و کوچیک میکنن. علاوه بر اینها میتونیم از مقادیر xx-small, x-small, x-larg, xx-larg هم استفاده کنیم. به کد زیر توجه کنید.

<p class=”p1″>This is a paragraph</p>

<p class=”p2″>This is a paragraph</p>

.p1 {
font-size: larg;
}

.p2 {
font-size: 10px;
}

 

تعیین رنگ متن با color:

برای تغییر رنگ متن کافیه خیلی ساده از دستور color استفاده کنیم. مقدار این دستور میتونه اسم یک رنگ، کد RGB رنگ و یا کد هگز رنگ باشه. در جلسات قبلی دوره درباره کار با رنگ‌ها در css صحبت کردیم که برای مطالعه بیشتر می‌تونید این بخش رو مطالعه کنید. به کد زیر دقت کنید. این کد متن درون تگ p رو به رنگ آبی در میاره.

<p>This is a paragraph</p>

p {
color: blue;
}

 

تعیین حالت متن با font-style:

از این دستور برای تعیین حالت متن استفاده میشه. برای مثال کد زیر تگ p با کلاس b رو از نوع italic استایل دهی میکنه.

<p>This is a paragraph, italic.</p>

p{
font-style: italic;
}

 

تعیین جهت متن text-align:

به کمک این دستور میتونید مشخص کنید که متن چپ چین، راست چین و یا وسط چین باشه. به کد زیر توجه کنید. این کد متن درون تگ p رو راست چین میکنه. مقدار این دستور css فقط میتونه برابر با کلمات right, left و center به معنی چپ، راست و وسط باشه. نکته دیگه‌ای که باید در مورد text-align بدونید اینه که این دستور علاوه بر متن (یعنی تگ p، a، span، lable و تگ‌های h)، برای div و section و td و th و… هم استفاده میشه و کاربرد داره.

<p>This is a paragraph, italic.</p>

p {
text-align: right;
}

 

خصیصه text-decoration مختص لینک‌ها:

این دستور یکی از دستورات پر استفاده برای استایل دهی به متن در css هست که فقط برای لینک‌ها(تگ a) کاربرد داره. اما کارایی این دستور چیه؟؟.

وقتی متنی رو درون تگ a به عنوان لینک تعریف می‌کنیم، به طور پیش فرض یه خط زیر متن کشیده شده. در بعضی موارد دوست نداریم این خط وجود داشته باشه و یا برعکس، ممکنه بخوایم این خط رو برای لینکی فعال کنیم. در اینجور مواقع میتونیم از دستور text-decoration استفاده کنیم. به کد زیر توجه کنید. این کد، خط پیش فرض زیر لینک رو با انتساب مقدار none به text-decoration، از بین میبره.

<a href=”www.nargessaedi.ir”>This is my site!!!</a>

a {
text-decoration: none;
}

 

جمع بندی آموزش استایل دهی به متن در css:

توی این جلسه که جلسه هفتم دوره جامع آموزش css بود سعی کردیم درباره استایل دهی به متن در css با هم صحبت کنیم. امیدوارم این جلسه براتون مفید بوده باشه و یادتون نره که حتما خوب این دستورات رو تمرین کنید. راستش رو بخواید رمز یادگیری برنامه نویسی و حرفه‌ای شدن در اون تمرین و تکرار مداومه. پس حتما دستورات رو خوب تمرین کنید و به هیچ عنوان فقط به خوندن دستورات اکتفا نکنید. امیدوارم موفق باشید و اگه هر سوالی هم داشتید می‌تونید از طریق صفحه تماس با من و یا زیر همین پست ازم بپرسید.