نحوه افزودن CSS به HTML (How To)

در این راهنما «نحوه افزودن CSS» به اسناد HTML را مرور می کنیم. بنابراین سه روش اصلی را می بینیم و سپس ترتیب آبشاری را می شناسیم تا بدانیم کدام قانون اعمال می شود.

روش های افزودن CSS

مرورگر براساس استایل شیت، سند را فرمت می کند. سه روش درج وجود دارد:

• External CSS (فایل بیرونی)
• Internal CSS (درون تگ <style> در head)
• Inline CSS (در ویژگی style روی خود عنصر)

External CSS

با یک فایل .css ظاهر کل وب سایت را از یک نقطه کنترل کنید. فایل بیرونی فقط قوانین CSS دارد و هیچ تگ HTMLی در آن نیست.

/* mystyle.css */
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }

نکته: بین مقدار و واحد فاصله نگذارید: 20px صحیح است و 20 px نادرست.

Internal CSS

وقتی یک صفحه یکتا استایل مخصوص دارد، قوانین را در بخش head و داخل <style> تعریف کنید.

/* درون <style> */
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }

Inline CSS

برای یک عنصر خاص از ویژگی style استفاده می شود و هر خاصیتی را می پذیرد.

/* معادل اعلان های درون style روی عنصر */
h1 { color: blue; text-align: center; }
p  { color: red; }

نکته: Inline مزایای جداسازی محتوا و نمایش را از بین می برد؛ بنابراین کم استفاده به کار ببرید.

چند استایل شیت و ترتیب بارگذاری

اگر یک سلکتور در چند استایل شیت تعریف شود، مقدار «آخرین فایل خوانده شده» برنده می شود. بنابراین قرارگیری link و style در head مهم است.

ترتیب آبشاری (Cascading Order)

وقتی چند قانون برای یک عنصر دارید، اولویت ها به ترتیب زیر است:

1. Inline style (بالاترین اولویت)
2. Internal/External در head (براساس ترتیب بارگذاری)
3. پیش فرض مرورگر

در نتیجه، Inline قوانین بیرونی و داخلی و همچنین پیش فرض مرورگر را نادیده می گیرد.

گام های بعدی

برای هدف گیری بهتر عناصر، به بخش انتخاب گرها بروید؛ همچنین برای نوشتن توضیحات تمیز، کامنت ها در CSS را بخوانید.