استایل دهی به متن در CSS | ویژگی‌های استایل Text

در این جلسه از دوره آموزش رایگان HTML و CSS به موضوع استایل دهی به متن های موجود در صفحات وب می‌پردازیم. همانطور که می‌دانید متون بخش عمده‌ای از صفحات وب را تشکیل می‌دهند. زیبایی متون می‌تواند تا حد بسیار زیادی جذابیت یک صفحه وب را بالا ببرد.

برای استایل دهی به متن ها در CSS چندین ویژگی (property) در نظر گرفته شده است که ما در این جلسه کاربردی ترین آنها را آموزش خواهیم داد.

ویژگی color در CSS

با استفاده از ویژگی color می‌توانید رنگ متن را تعیین کنید. به مثال زیر دقت کنید:

خروجی کد بالا:

این یک متن با رنگ قرمز است

این یک متن با رنگ آبی است

نکته: در این مثال برای تعیین رنگ، از نام رنگ‌ (red و blue) استفاده شده است. در زبان CSS با استفاده از کد ۶ رقمی هگزادسیمال و سیستم‌های دیگر مانند rgb و hsl هم می‌توانید مقدار رنگ‌ها را تعیین کنید.
کار با کد هگزادسیمال و دیگر سیستم‌ها در جلسه‌ای بصورت جداگانه آموزش داده می‌شود.

ویژگی font-size در CSS

با استفاده از ویژگی font-size می‌توانید اندازه متن را تعیین کنید. این ویژگی یک مقدار عددی به خود می‌گیرد. به مثال زیر دقت کنید:

خروجی کد‌ بالا:

این یک متن با اندازه 10 پیکسل است

این یک متن با اندازه 24 پیکسل است

نکته: در این مثال از واحد پیکسل (px) برای اعداد استفاده شده. واحد‌های دیگری مانند rem – em – pt و… وجود دارند که می‌توان از آنها هم استفاده کرد.
تمام واحد‌های مختلف در CSS در جلسه‌ای بصورت جداگانه تدریس می‌شوند.

ویژگی font-family در CSS

با استفاده از ویژگی font-family می‌توانید فونت متن را تعیین کنید. تنها کافیست نام فونت موردنظر خود را در مقدار این ویژگی بنویسید. به مثال زیر دقت کنید:

خروجی کد بالا:

این یک متن با فونت Tahoma است

نکته: در مثال بالا از فونت tahoma استفاده شده. شما می‌توانید از نام هر فونت دیگری استفاده کنید. اما باید به این نکته توجه داشته باشید که فونت مورد نظر باید در کامپیوتر شما نصب باشد. در غیر اینصورت متن با فونت مورد نظر نمایش داده نمی‌شود.

نکته: روش دیگری وجود دارد که فونت از سیستم کاربر خوانده نمی‌شود. بلکه از فایل‌های درون پروژه خوانده می‌شود. معمولا از این روش در پروژه های واقعی استفاده می‌شود.
این روش در جلسات بعدی آموزش داده می‌شود.

ویژگی text-shadow در CSS

با استفاده از ویژگی text-shadow می‌توانید سایه‌ای را برای متن در نظر بگیرید. این ویژگی ۴ پارامتر می‌گیرد که در زیر syntax این ویژگی را آورده‌ایم.

به مثال زیر دقت کنید:

خروجی کد بالا:

این یک متن سایه دار است

در پارامتر اول اگر عدد منفی وارد کنید (مانند مثال فعلی) سایه به سمت چپ و اگر عدد مثبت وارد کنید سایه به سمت راست حرکت می‌کند. در پارامتر دوم اگر عدد منفی وارد کنید سایه به سمت بالا و اگر عدد مثبت وارد کنید (مانند مثال فعلی) سایه به سمت پایین حرکت می‌کند.

پارامتر سوم مربوط به حجم fade شدن سایه می‌شود. با تغییر عدد این پارامتر براحتی می‌توانید متوجه تغییرات ایجاد شده شوید. پارامتر چهارم مربوط به رنگ سایه می‌شود که در مثال ما از نام رنگ blue استفاده کردیم.