تعداد بازدید: 863
وقتی یک مرورگر استایل (سبک) صفحه را می خواند ، سند HTML را با توجه به اطلاعات موجود در صفحه استایل (سبک) ، قالب بندی می کند .
سه روش برای درج یا افزودن کد CSS
- CSS خارجی
- CSS داخلی
- CSS درون خطی
CSS خارجی :
با استفاده از یک فایل خارجی ، فقط با تغییر اون فایل می تونید ظاهر یک وب سایت را تغییر دهید !
هر صفحه HTML باید شامل یک مرجع به فایل استایل (سبک) خارجی در داخل تگ <link> ؛ در داخل بخش <head> ، با کلیک روی این لینک میتوانید با تگ های html بیشتر آشنا بشوید .
مثال :
استایل های خارجی در داخل عنصر <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;
}توجه: فاصله ای بین مقدار خاصیت و واحد اضافه نکنید ( مانند ;margin-left: 20 px ) . روش صحیح این است: ;margin-left: 20px
CSS داخلی :
اگر یک صفحه HTML منحصر به فرد دارای یک استایل منحصر به فرد است ، میتوانید از تگ <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 درون خطی :
برای اعمال استایل منحصر به فرد و مختصر برای یک عنصر ، می توان از یک استایل درون خطی استفاده کرد.
برای استفاده از استایل های درون خطی ، ویژگی style را به عنصر مربوطه اضافه کنید. ویژگی style می تواند شامل هر خاصیت CSS باشد.
مثال :
<!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>
نکته: یک استایل داخلی بسیاری از مزایای یک صفحه استایل را از دست می دهد (یعنی نمیتوانید در فایل های html دیگر از آنها استفاده کنید و اینکه سرعت صفحه را هم پایین می آورد ) . از این روش کم استفاده کنید.
چندین صفحه استایل :
اگر برخی از خصوصیات برای همان انتخابگر (عنصر) در استایل های مختلف تعریف شده باشد ، از مقدار آخرین صفحه استایل خوانده شده استفاده می شود .
فرض کنید یک استایل خارجی برای عنصر <h1> استایل زیر را داشته باشد :
h1 {
color: navy;
}
سپس ، فرض کنید که یک صفحه استایل داخلی دارای استایل زیر برای عنصر <h1> باشد:
h1 {
color: orange;
}مثال :
اگر استایل داخلی پس از پیوند به صفحه استایل خارجی تعریف شود ، عناصر <h1> "نارنجی" خواهند بود :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>مثال :
با این حال ، اگر استایل داخلی قبل از پیوند به صفحه استایل خارجی تعریف شود ، عناصر <h1> به همان رنگ داخل فایل CSS خواهند بود:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>قانون آبشاری CSS :
وقتی بیش از یک استایل برای یک عنصر HTML مشخص شده باشد ، از چه سبکی استفاده می شود؟
با توجه به قوانین زیر ، که در آن شماره یک دارای بالاترین اولویت است ، تمام استایل های یک صفحه به یک صفحه استایل"مجازی" تبدیل می شوند.
- استایل درون خطی ( درون یک عنصر HTML ) .
- ورق های استایل خارجی و داخلی ( در بخش head ) .
- استایل های مرورگر به طور پیش فرض .
بنابراین ، یک استایل درون خطی دارای بالاترین اولویت است و سبک های خارجی و داخلی و پیش فرض های مرورگر را نادیده می گیرد .
