درس سوم : نحوه اضافه کردن CSS

نحوه اضافه کردن CSS

هنگامی که یک مرورگر یک برگه استایل (Style Sheet) را پیدا می‌کند، سند HTML را مطابق با اطلاعات موجود در آن برگه استایل، فرمت‌بندی و نمایش می‌دهد.

سه روش برای اضافه کردن CSS

سه راه برای درج کدهای CSS در یک سند HTML وجود دارد:

  1. External CSS (CSS خارجی)
  2. Internal CSS (CSS داخلی)
  3. Inline CSS (CSS درون‌خطی)

۱. CSS خارجی (External CSS)

با یک برگه استایل خارجی، شما می‌توانید ظاهر کل یک وب‌سایت را تنها با تغییر یک فایل عوض کنید!

هر صفحه HTML باید شامل یک ارجاع به فایل برگه استایل خارجی در داخل تگ <link> باشد. تگ <link> در داخل بخش <head> قرار می‌گیرد:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>

<h1>این یک تیتر است</h1>
<p>این یک پاراگراف است.</p>

</body>
</html>

یک برگه استایل خارجی می‌تواند در هر ویرایشگر متنی نوشته شود و باید با پسوند .css ذخیره گردد.

فایل خارجی نباید حاوی هیچ تگ HTML باشد. نمونه‌ای از فایل mystyle.css:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

۲. CSS داخلی (Internal CSS)

اگر یک تک صفحه وب دارای استایل منحصربه‌فردی باشد، ممکن است از استایل داخلی استفاده شود.

استایل داخلی در داخل تگ <style> و در بخش <head> تعریف می‌شود:

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

۳. CSS درون‌خطی (Inline CSS)

از استایل درون‌خطی می‌توان برای اعمال یک استایل منحصربه‌فرد برای یک تک‌عنصر استفاده کرد.

برای استفاده از استایل‌های درون‌خطی، ویژگی style را به عنصر مربوطه اضافه کنید:

<h1 style=”color:blue;text-align:center;”>این یک تیتر است</h1>
<p style=”color:red;”>این یک پاراگراف است.</p>

خروجی کد بالا (Inline CSS):

این یک تیتر است

این یک پاراگراف است.

ترتیب اولویت (Cascading Order)

اگر استایل‌های مختلفی برای یک عنصر HTML تعریف شده باشد، کدام استایل نمایش داده می‌شود؟

تمام استایل‌ها بر اساس قوانین زیر به صورت یک استایل جدید “آبشاری” می‌شوند؛ به طوری که اولویت شماره ۱ بالاترین است:

  1. Inline style (درون‌خطی) – بالاترین اولویت
  2. External و Internal (در بخش head)
  3. پیش‌فرض مرورگر

بنابراین، یک استایل درون‌خطی بالاترین اولویت را دارد و استایل‌های موجود در تگ style یا فایل خارجی را بازنویسی می‌کند.

پایان فصل سوم

در درس بعدی به مبحث «کامنت‌ها در CSS» می‌پردازیم.

درس قبلی
بازگشت به دوره
درس بعدی