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

جلسه بعد ❯❮ جلسه قبل

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

کدهای CSS را به سه روش می توان به اسناد HTML اضافه کرد:

  • روش Inline یا در خط - با استفاده از صفت style به طور مستقیم کدهای CSS برای عناصر HTML استفاده شود.
  • روش Internal یا داخلی - با استفاده از عنصر <style> در قسمت <head> از سند HTML کدهای CSS اضافه شوند.
  • روش External یا خارجی - در این عناصر HTML با یک فایل CSS خارجی استایل دهی می شوند.

روش External یا (خارجی)

ز روش External برای دادن استایل به تعداد زیادی صفحه HTML استفاده می شود.

در این روش به این دلیل که ما از یک فایل خارجی برای استایل دهی به تمام صفحات وب سایت استفاده می کنیم با تغییر کدهای تنها همین یک فایل می توانیم شاهد تغییر ظاهر همه ی صفحات وب سایت باشیم.

در روش External برای ارجاع فایل خارجی CSS باید آدرس آن فایل CSS را در صفت href از عنصر <link> قرار داد.

توجه داشته باشید که عنصر <link> فقط میتواند داخل بخش <head> از سند HTML قرار بگیرد و نباید از این عنصر در بخش های دیگر از سند HTML مانند بخش <body> استفاده شود:

مثال

در این مثال از یک فایل خارجی CSS برای استایل دهی به عناصر HTML استفاده شده است:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
خودتان امتحان کنید »

یک فایل External (خارجی) CSS می تواند در هر ویرایشگر متنی نوشته شود. در این فایل نباید از تگ های HTML استفاده شود و باید با پسوند CSS. ذخیره شود.

محتوای فایل CSS ای که در مثال بالا به آن ارجاع داده شده بود حاوی کدهای زیر است:

"mystyle.css"

body {
  background-color: lightblue;
}

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

نکته: بین مقدار خاصیت (property) و واحد آن نباید فاصله قرار دهید (برای مثال margin-left: 20 px;) روش صحیح به این صورت است: (margin-left: 20px;)

روش Internal (داخلی)

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

در روش Internal کد های CSS در بخش <head> از صفحه ی HTML و در داخل عنصر <style> قرار می گیرند:

مثال

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

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
خودتان امتحان کنید »

روش Inline (داخلی)

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

برای استفاده از روش Inline، صفت style را به عنصر مورد نظر اضافه کنید، صفت style می تواند حاوی هر ویژگی CSS ای باشد.

در مثال زیر از این روش برای استایل دهی به دو عنصر p و h1 استفاده شده است:

مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
خودتان امتحان کنید »

تکته: روش Inline بسیاری از مزایای دو روش ریگر استفاده از CSS را ندارد و یکی از بهترین مزایای استفاده از زبان CSS که جداسازی محتوای سند HTML و CSS روش است را ندارد. پیشنهاد می شود که از Inline تنها در مواقع ضروری استفاده کنید.

استفاده از چند استایل برای یک عنصر

اگر چند ویژگی CSS برای استایل دهی به یک انتخاب کننده (Selector) در روش های مختلف استفاده از کدهای CSS استفاده شده باشد، مرورگر آخرین استایل تعریف شده برای عنصر بر روی آن اعمال می شود.

فرض کنید که یک فایل External (خارجی) CSS دارای استایل زیر برای عنصر <h1> است:

h1 {
  color: navy;
}

سپس، فرض کنید که استایل تعریف شده برای همان عنصر <h1> در روش Internal حاوی کدهای زیر است:

h1 {
  color: orange;   
}

اگر استایل مشخص شده در روش Internal بعد از ارجاعی باشد که به استایل های فایل External داده ایم به ، به دلیل نکته ای که در بالا به آن اشاره کردیماولویت با روش استایل های روش Inline بوده و در نتیجه عنصر h1 به رنگ نارجی (orange) در خواهد آمد:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
خودتان امتحان کنید »

اما اگر که ارجاعی به استایل های فایل External بعد از استایل های روش Internal باشد رنگ عنصر h1 به رنگ ناوی (navy) خواهد بود:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
خودتان امتحان کنید »

ترتیب اولویت ها در اعمال استایل

وقتی که بیشتر از یک استایل برای یک عنصر HTML تعریف شده باشد، از چه استایلی استفاده می شود؟

اولویت اعمال استایل بر روی یک عنصر HTML به صورت زیر است که در آن شماره یک بیشترین اولویت و شماره 3 کمترین اولویت را دارد:

  1. استایل تعریف شده در روش Inline دارای بالاترین اولویت برای اعمال روی عنصر است
  2. استایل در روش های Internal و External (در قسمت head) 
  3. استایل های تعریف شده پیشفرض مرورگر

بنابراین استایل تعریف شده در روش Inline دارای بیشترین اولویت است و در صورت استفاده از این روش برای یک عنصر در یک یا چند ویژگی CSS مانند Color در صورتی که از ویژگی color برای آن عنصر در روش های Internal و External و یا پیشفرض مرورگر استفاده شده باشد همگی نادیده گرفته می شوند و استایل در نظر گرفته شده در روش Inline بر روی عنصر اعمال می شود.

منبع

https://www.w3schools.com/css/css_howto.asp

جلسه بعد ❯❮ جلسه قبل