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

در این مقاله یاد می گیریم که چگونه قابلیت های ساخته شده با CSS را به صفحات HTML خود اضافه کنیم.

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

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

  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

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

آموزش CSS

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

آموزش طراحی سایت

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

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

Internal CSS

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

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

آموزش طراحی سایت

Inline CSS

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

آموزش طراحی سایت

آموزش CSS

چندین Style Sheet

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

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

آموزش طراحی سایت

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

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

آموزش CSS

آموزش طراحی سایت

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

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