نحوه افزودن کدهای CSS

نحوه افزودن کدهای CSS چگونه است؟ بعد از این که با CSS در مقاله آشنایی با CSS آشنا شدید می رسیم به بخش نحوه افزودن کدهای CSS .

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

سه روش برای درج CSS

سه روش برای قرار دادن یک شیوه نامه وجود دارد:

  • CSS خارجی
  • CSS داخلی
  • Inline CSS

CSS خارجی

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

هر صفحه HTML باید حاوی ارجاع به پرونده سبک خارجی در داخل عنصر ، در داخل بخش head باشد.

مثال:

 <!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” وجود دارد:

body {
  background-color: lightblue;
}

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

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

CSS داخلی

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

سبک داخلی در داخل عنصر ، در داخل بخش head تعریف شده است.</p>

مثال:

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

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

برای استفاده از سبک های درون خطی ، ویژگی 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> 

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

ورق های چند سبک

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

فرض کنید یک سبک سبک خارجی برای عنصر <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> 

دستور آبشار

نحوه افزودن کد های CSS - نمودار دستورات آبشاری را در این تصویر مشاهده می کنید
نمودار دستورات آبشاری را در این تصویر مشاهده می کنید

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

با توجه به قوانین زیر ، که در آن شماره یک بالاترین اولویت را دارد ، تمام سبک های یک صفحه به یک صفحه سبک “مجازی” جدید تبدیل می شوند:

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

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

می خواهید از تخفیف های ویژه ما با خبر شوید؟    بله خیر