چگونه CSS اضافه کنیم
هنگامی که یک مرورگر یک شیوه‌نامه (style sheet) را می‌خواند، سند HTML را بر اساس اطلاعات موجود در آن شیوه‌نامه قالب‌بندی می‌کند.
سه راه برای درج یک شیوه‌نامه وجود دارد:
-
CSS خارجی (External CSS)
-
CSS داخلی (Internal CSS)
-
CSS درون‌خطی (Inline CSS)
CSS خارجی (External CSS)
با یک شیوه‌نامه خارجی، شما می‌توانید ظاهر کل یک وب‌سایت را تنها با تغییر دادن یک فایل، عوض کنید!
هر صفحه HTML باید شامل یک ارجاع به فایل شیوه‌نامه خارجی در داخل عنصر <link>، درون بخش <head> باشد.
مثال
استایل‌های خارجی در داخل عنصر <link>، درون بخش <head> یک صفحه HTML تعریف می‌شوند:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>یک شیوه‌نامه خارجی را می‌توان در هر ویرایشگر متنی نوشت و باید با پسوند .css ذخیره شود.
فایل .css خارجی نباید حاوی هیچ تگ HTML باشد.
فایل "mystyle.css" به این شکل است:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}توجه: بین مقدار ویژگی (20) و واحد آن (px) فاصله قرار ندهید:
-
نادرست (با فاصله):
margin-left: 20 px; -
صحیح (بدون فاصله):
margin-left: 20px;
CSS داخلی (Internal CSS)
یک شیوه‌نامه داخلی ممکن است زمانی استفاده شود که یک صفحه HTML واحد، استایل منحصر به فردی داشته باشد.
استایل داخلی در داخل عنصر <style>، درون بخش <head> تعریف می‌شود.
مثال
استایل‌های داخلی در داخل عنصر <style>، درون بخش <head> یک صفحه HTML تعریف می‌شوند:
<!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>CSS درون‌خطی (Inline CSS)
یک استایل درون‌خطی ممکن است برای اعمال یک استایل منحصر به فرد برای یک عنصر واحد استفاده شود.
برای استفاده از استایل‌های درون‌خطی، صفت (attribute) style را به عنصر مورد نظر اضافه کنید. صفت style می‌تواند حاوی هر ویژگی CSS باشد.
مثال
استایل‌های درون‌خطی در داخل صفت "style" عنصر مورد نظر تعریف می‌شوند:
<!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>نکته: یک استایل درون‌خطی بسیاری از مزایای یک شیوه‌نامه را (با مخلوط کردن محتوا با ارائه) از دست می‌دهد. از این روش به ندرت استفاده کنید.
چندین شیوه‌نامه (Multiple Style Sheets)
اگر برخی ویژگی‌ها برای یک انتخابگر (عنصر) یکسان در شیوه‌نامه‌های مختلف تعریف شده باشند، مقداری که از آخرین شیوه‌نامه خوانده شده است، استفاده خواهد شد.
فرض کنید یک شیوه‌نامه خارجی استایل زیر را برای عنصر <h1> دارد:
h1 {
color: navy;
}سپس، فرض کنید یک شیوه‌نامه داخلی نیز استایل زیر را برای عنصر <h1> دارد:
h1 {
color: orange;
}مثال
اگر استایل داخلی بعد از لینک به شیوه‌نامه خارجی تعریف شود، عناصر <h1> «نارنجی» (orange) خواهند بود:
<head>
<link rel="stylesheet" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>مثال
اما، اگر استایل داخلی قبل از لینک به شیوه‌نامه خارجی تعریف شود، عناصر <h1> «سرمه‌ای» (navy) خواهند بود:
<head>
<link rel="stylesheet" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
ترتیب آبشاری (Cascading Order)
وقتی بیش از یک استایل برای یک عنصر HTML مشخص شده باشد، کدام استایل استفاده خواهد شد؟
تمام استایل‌های یک صفحه بر اساس قوانین زیر، در یک شیوه‌نامه «مجازی» جدید «آبشاری» می‌شوند، که شماره یک بالاترین اولویت را دارد:
-
استایل درون‌خطی (Inline) - (داخل یک عنصر HTML)
-
شیوه‌نامه‌های خارجی و داخلی - (در بخش
<head>) -
پیش‌فرض مرورگر
بنابراین، یک استایل درون‌خطی بالاترین اولویت را دارد و استایل‌های خارجی و داخلی و همچنین پیش‌فرض‌های مرورگر را لغو (override) خواهد کرد.