بنام خدا

تغییر سبک نمایش عناصر HTML با CSS

برای تغییر سبک نمایش عناصر HTML مانند تغییر رنگ ها، اندازه قلم، رنگ پشت زمینه، اندازه حاشیه ها و … از CSS مخفف Cascading Style Sheets استفاده می شود. در این درس به طور مختصر با برخی سبک ها (styles) آشنا می شوید و در مبحث مربوط به CSS بعد از دروس HTML به طور مفصل به آن پرداخته می شود.
به مثال زیر توجه کنید (در صورت تمایل به صفحه تمرین عملی بروید):

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<p>یک سطر عادی بدون سی اس اس</p>
<p style="color:red;">یک سطر با خاصیت رنگ و  مقدار قرمز</p>
<p style="color:blue;">یک سطر با خاصیت رنگ و  مقدار آبی</p>
<p style="font-size:50px;">یک سطر با خاصیت اندازه قلم و مقدار ۵۰ پیکسل</p>

</body>
</html> 

 

نکات!
🔸برای مشخص کردن سبک نمایش یک عنصر از ویژگی style در تگ باز استفاده می شود.
🔹خاصیت (property) و مقدار آن (value) بعد از علامت = و داخل علامت نقل قول (“”) قرار می گیرند.
🔸خاصیت ویژگی style می تواند رنگ، اندازه قلم، رنگ پشت زمینه و … و مقادیر آن قرمز، ۱۸ پیکسل، آبی و … باشند.

خاصیت رنگ پشت زمینه (background-color)

برای اضافه کردن رنگ دلخواه به پشت زمینه یک عنصر HTML از خاصیت background-color و یک مقدار رنگ بر حسب نام رنگ، کد رنگ RGB یا هگزادسیمال استفاده می شود. در مورد کد رنگ های RGB و هگزادسیمال بعدا مفصل بحث می شود.


<p style="background-color:yellow;">این یک سطر با پشت زمینه زرد است.</p> 

 

نکات!
🔸در مثال بالا با استفاده از خاصیت background-color و مقدار رنگ yellow (زرد) پشت زمینه سطر را رنگ زرد قرار دادیم.
🔹مقدار بر اساس نام رنگ است که yellow یعنی زرد انتخاب شده است.

خاصیت رنگ متن (color)

برای اضافه کردن رنگ دلخواه به متن یک عنصر HTML از خاصیت color به معنی رنگ و یک مقدار رنگ بر حسب نام رنگ، کد رنگ RGB یا هگزادسیمال استفاده می شود.


<h1 style="color:red;">این یک سرفصل به رنگ قرمز است.</h1>

 

نکات!
🔸در مثال بالا با استفاده از خاصیت color و مقدار رنگ red (قرمز) سرفصل را رنگ قرمز قرار دادیم.
🔹مقدار بر اساس نام رنگ است که red یعنی قرمز انتخاب شده است.

خاصیت خانواده قلم (font-family)

برای مشخص کردن قلم ها (فونت) یک نوشته در عناصر HTML از خاصیت font-family و مقدار قلم استفاده می شود.
قلم های پیشفرضی مانند Arial ،Tahoma ،Verdana و غیره وجود دارند که تقریبا تمام مرورگرها از آنها پشتیبانی می کنند. همچنین شرکت گوگل از قلم هایی مانند Lato و Open sans پشتیبانی می کند که می توان از آنها با قرار دادن آدرس در تگ head مخصوصا برای رسم الخط انگلیسی استفاده کرد.
روش دیگری هم برای بکار بردن قلم سفارشی مخصوصا برای زبان فارسی وجود دارد که در مبحث CSS در آینده گفته خواهد شد.

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


<h1 style="font-family:Arial;">این یک سر فصل به قلم آریل است.</h1>
<p style="font-family:Tahoma;">این یک سطر به قلم تاهوما است.</p>

 

نکات!
🔸در مثال بالا با استفاده از خاصیت font-family نوع قلم متن سرفصل و سطر را مشخص کردیم.
🔹دقت داشته باشید که در font-family می توان بیشتر از یک فونت را نوشت و با علامت ویرگول (,) جدا کرد. در صورتی که قلمی توسط مرورگر پشتیانی نشود، قلم دوم به طور خودکار خوانده خواهد شد:

<h1 style="font-family:Arial, Tahoma;">این یک سر فصل به قلم آریل و در صورت خوانده نشدن، تاهوما است.</h1>

در دروس مربوط به CSS بیشتر در مورد ویژگی قلم ها بحث خواهد شد.


خاصیت چینش متن (text-align)

برای مشخص کردن چیدمان یک متن که آیا در سمت راست، چپ یا وسط قرار داشته باشد، از خاصیت text-align و مقادیر راست (right)، چپ (left) یا وسط (center) استفاده می شود.


<h1 style="text-align:center;">این سر فصل وسط چین است.</h1>
<p style="text-align:right;">این سطر راست چین است.</p>
<p style="text-align:left;">این سطر چپ چین است.</p>

 

اینفوگرافی

دستور انگلیسی

آیا می دانید؟

لغات 504

مکالمات انگلیسی

اصطلاحات انگلیسی





عضویت در خبرنامه

با عضویت در خبرنامه، از آخرین آموزش ها، محصولات و تخفیف های بابا آب داد مطلع شوید.

یا برای اطلاع می توانید در هر یک از کانال های زیر در تلگرام، گپ و ایتا به آی دی babaabdadchannel@ عضو شوید:

گپ تلگرام ایتا

آموزش HTML ؛ درس هفتم: تغییر سبک نمایش عناصر HTML با CSS

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *