امروز : دوشنبه، 03 آبان 1400

آموزش CSS - نحوه افزودن کد های CSS

تعداد بازدید: 321

وقتی یک مرورگر استایل (سبک) صفحه را می خواند ، سند 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 استفاده کنید .

مثال :

استایل های داخلی در داخل عنصر <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 باشد.

مثال :

استایل های درون خطی در ویژگی "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> به همان رنگ داخل فایل CSS خواهند بود:

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

 

قانون آبشاری CSS :

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

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

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

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

سید مرتضی یثربی

برنامه نویس فرانت و طراحی دیزاین وبسایت 😉

blog-author-image