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