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


نویسنده:
سه شنبه 16 اردیبهشت 1399
استایل دهی به متن

در این جلسه از دوره آموزش رایگان 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 استفاده کردیم.

دیدگاهتان را بنویسید

8 پاسخ به “استایل دهی به متن در CSS | ویژگی‌های استایل Text”

  1. امین گفت:

    این دوره عالیه من برای ریکاوری مفهوم position ها از دیدگاه طراحان ایرانی از طریق گوگل وارد سایت شما شدم ، به عنوان یک شخصی که حدودا 14 ساله برنامه نویسم به جرعت میتونم بگم کارتون عالیه جزئیات همه مفاهیم رو کامل گفتید و دانشجوها نمی دونند برای کشف این جزئیات باید پروژه ها انجام بدهند تا متوجه بشوند ولی اینجا در یک باکس ساده تجربه های زیاد در چند خط لحاظ شده ، من اهل کامنت نیستم ولی دلم نیامد این بزرگ و کار ارزشمند و با کیفیت رو ببینم و تشکر نکنم .
    برای تمام مجموعه ادمین سایت ، بهترین ها رو ارزو میکنم.

  2. TAHA گفت:

    سلام وقت بخیر
    من نمیخوام تمام سایه بخوره و یه بخشی از پاراگراف رو میخوام ولی با توجه به اینکه صفت shadow برای کل پاراگراف اعمال میشه میخوام بدونم باید چی کار کنم؟؟
    حالا صرفا این صفت سایه یه مثال بود یعنی درکل برای هر صفتی که بخوام به بخشی از پاراگرافم منسوب بشه کدهای html رو باید به چ طریقی بنویسم؟؟

  3. ERR_No_Name_(343) گفت:

    سلام.
    خیلی خوب میشه اگه ویدیو هم درباره این دروس بذارین.

  4. Bardia. گفت:

    خسته نباشید ممنون بابت اموزش خوبتون.

دیدگاهتان را بنویسید