بنام خدا
تغییر سبک نمایش عناصر 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 از خاصیت و یک مقدار رنگ بر حسب نام رنگ، کد رنگ RGB یا هگزادسیمال استفاده می شود. در مورد کد رنگ های RGB و هگزادسیمال بعدا مفصل بحث می شود.
<p style="background-color:yellow;">این یک سطر با پشت زمینه زرد است.</p>
🔸در مثال بالا با استفاده از خاصیت و مقدار رنگ (زرد) پشت زمینه سطر را رنگ زرد قرار دادیم.
🔹مقدار بر اساس نام رنگ است که yellow یعنی زرد انتخاب شده است.
خاصیت رنگ متن (color)
برای اضافه کردن رنگ دلخواه به متن یک عنصر HTML از خاصیت به معنی رنگ و یک مقدار رنگ بر حسب نام رنگ، کد رنگ RGB یا هگزادسیمال استفاده می شود.
<h1 style="color:red;">این یک سرفصل به رنگ قرمز است.</h1>
🔸در مثال بالا با استفاده از خاصیت و مقدار رنگ (قرمز) سرفصل را رنگ قرمز قرار دادیم.
🔹مقدار بر اساس نام رنگ است که یعنی قرمز انتخاب شده است.
خاصیت خانواده قلم (font-family)
برای مشخص کردن قلم ها (فونت) یک نوشته در عناصر HTML از خاصیت و مقدار قلم استفاده می شود.
قلم های پیشفرضی مانند Arial ،Tahoma ،Verdana و غیره وجود دارند که تقریبا تمام مرورگرها از آنها پشتیبانی می کنند. همچنین شرکت گوگل از قلم هایی مانند Lato و Open sans پشتیبانی می کند که می توان از آنها با قرار دادن آدرس در تگ مخصوصا برای رسم الخط انگلیسی استفاده کرد.
روش دیگری هم برای بکار بردن قلم سفارشی مخصوصا برای زبان فارسی وجود دارد که در مبحث CSS در آینده گفته خواهد شد.
به مثال زیر توجه کنید:
<h1 style="font-family:Arial;">این یک سر فصل به قلم آریل است.</h1> <p style="font-family:Tahoma;">این یک سطر به قلم تاهوما است.</p>
🔸در مثال بالا با استفاده از خاصیت نوع قلم متن سرفصل و سطر را مشخص کردیم.
🔹دقت داشته باشید که در می توان بیشتر از یک فونت را نوشت و با علامت ویرگول (,) جدا کرد. در صورتی که قلمی توسط مرورگر پشتیانی نشود، قلم دوم به طور خودکار خوانده خواهد شد:
<h1 style="font-family:Arial, Tahoma;">این یک سر فصل به قلم آریل و در صورت خوانده نشدن، تاهوما است.</h1>
در دروس مربوط به CSS بیشتر در مورد ویژگی قلم ها بحث خواهد شد.
خاصیت چینش متن (text-align)
برای مشخص کردن چیدمان یک متن که آیا در سمت راست، چپ یا وسط قرار داشته باشد، از خاصیت و مقادیر راست (right)، چپ (left) یا وسط (center) استفاده می شود.
<h1 style="text-align:center;">این سر فصل وسط چین است.</h1> <p style="text-align:right;">این سطر راست چین است.</p> <p style="text-align:left;">این سطر چپ چین است.</p>