اضافه کردن CSS

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

چگونه CSS را اضافه کنیم

هنگامی که مرورگری یک فایل طراحی (stylesheet) را می‌خواند، فایل HTML را مطابق اطلاعات موجود در فایل طراحی قالب‌بندی می‌کند.[۱]

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

سه روش برای اضافه‌کردن یک فایل طراحی (stylesheet) وجود دارد:

  1. CSS خارجی
  2. CSS داخلی
  3. CSS بر خط

CSS خارجی

با داشتن یک فایل طراحی خارجی، می‌توانید با تغییر فقط یک فایل، ظاهر وب‌سایت را به طورکامل تغییر دهید!

هر صفحه HTML باید در بخش head و در داخل عنصر <link> به فایل طراحی خارجی ، ارجاع داشته باشد.

مثال

استایل های خارجی، درون عنصر <link> و داخل قسمت <head> یک صفحه HTML تعریف می شوند: 

<!DOCTYPE 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>


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

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

در اینجا کد فایل "mystyle.css" را مشاهده می‌کنید:

"mystyle.css"
body {
  background-color: lightblue;
}

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


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

روش صحیح به این صورت است: margin-left: 20px;

CSS داخلی

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

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

مثال

استایل‌ها (طرح‌ها) درون عنصر <style> و درون قسمت <head> تعریف می‌شوند:

<!DOCTYPE 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>

CSS درون خطی (Inline)

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

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

مثال

استایل‌های بر خط به وسیله خاصیت "style" عنصر مربوطه تعریف می‌شوند:

<!DOCTYPE html>

<body>

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

</body>


نکته: یک استایل درون خطی بسیاری از مزایای یک فایل طراحی (style sheet) (با ترکیب محتوا و شیوه نمایش) را از دست می‌دهد. از این روش خیلی کم استفاده کنید.

فایلهای طراحی چندگانه

اگر برخی از خصوصیات برای یک انتخابگر (عنصر) در فایل‌های طراحی‌های مختلف تعریف شده باشد، مقدار موجود در آخرین صفحه استایل خوانده شده استفاده می‌شود.

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

h1 {
  color: navy;
}


فرض کنید که یک صفحه استایل داخلی نیز طرح زیر را برای عنصر <h1> دارد :

h1 {
  color: orange;   
}

مثال

اگر استایل داخلی (internal style) بعد از لینک صفحه به صفحه استایل خارجی (external style sheet) تعریف شود، عنصر <h1> به رنگ «نارنجی» خواهد بود:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

مثال

اما، اگر استایل داخلی قبل از لینک به صفحه استایل خارجی تعریف شود، عناصر <h1> به صورت "navy" خواهند بود :

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


روش قرارگیری آبشاری (Cascading)

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

تمامی استایل ها با رعایت قوانین زیر، درون یک صفحه استایل «مجازی»، به صورت «آبشاری» قرار می‌گیرند که شماره یک، بیشترین اولویت را دارد:

  1. استایل درون خطی(درون یک عنصر HTML)
  2. صفحه های استایل خارجی و داخلی (در قسمت head)
  3. پیش‌فرض مرورگر

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


خود را به وسیله تمرینها امتحان کنید!

منابع آموزشی

  1. ↑ w3schools.com: How To Add CSS



برگرفته از «https://wikicod.ir/w/index.php?title=CSS:Tutorial/اضافه_کردن_CSS&oldid=23745»