آموزش اضافه کردن CSS به HTML

آموزش اضافه کردن CSS به HTML

برای اعمال کردن استایل های CSS به عناصر صفحه HTML سه روش مختلف وجود دارد. 

راه های اضافه کردن CSS به فایل HTML

• External CSS
• Internal CSS
• Inline CSS

External CSS

رایج ترین و پرکاربرد ترین روش اضافه کردن فایل CSS به صفحه استفاده از روش External می باشد. در این روش استایل ها در یک فایل مجزا با پسوند css. نوشته شده و در نهایت در بخش head به صفحه ی ما لینک می شوند. با External CSS شما قادر خواهید بود با تغییر دادن یک فایل تمام شکل و شمایل یک وب سایت را تغییر دهید! برای این کار هر صفحه ی HTML در درون عنصر<link> باید به فایل CSS خارجی مرتبط باشد در بخش (head)

در بالا از طریق تگ link فایل mystyle.css را به صفحه html اضافه کردیم. ممکن است نیاز باشد که چند فایل css به صفحه اضافه کنید. دقت کنید که ترتیب اضافه کردن فایل های css مهم است زیرا آن فایلی که آخر از همه اضافه شده، اولویت بالاتری نسبت به فایل قبل از خود دارد. یعنی آخرین فایل از همه اولویت بالاتری دارد و سپس قبلی و سپس قبل از آن تا به بالا.

یک فایل css خارجی را می توان در هر ادیتوری نوشت، و فقط باید با فرمت .css نوشته شود. توجه کنید که فایل css خارجی نباید شامل هیچگونه تگ HTML باشد. مثال:

Internal CSS

internal style sheet وقتی استفاده می شود که یک صفحه باید استایل مشخصی داشته باشد. internal style در تگ style و در بخش head تعریف می شود:

Inline CSS

یک استایل inline برای اعمال کردن یک استایل منحصر به فرد روی یک عنصر استفاده می شود. برای استفاده از این قابلیت، ویژگی استایل را به عنصر مربوط اضافه کنید. ویژگی استایل می تواند شامل هر نوع مشخصه CSS باشد.

چندین Style Sheet

اگر چندین مشخصه، سلکتور (عنصر) مشابه را در style sheets های متفاوت انتخاب کرده اند، آخرین مقدار داده شده اعمال می شود.

اگر استایل internal بعد از لینک به فایل css خارجی یعنی mystyle.css تعریف شود، عناصر <h1> نارنجی خواهند بود:

اما، در صورتی که استایل internal قبل از لینک به فایل css خارجی یعنی همان mystyle.css تعریف شود، عناصر <h1> آبی خواهند بود:

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

1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default (استایل های پیشفرضی که مرورگر به صورت پیشفرض روی صفحه اعمال می کند)