CSS-ni Qo'shish Usullari

Brauzer stil varog'ini o'qiganida, HTML hujjatini stil varog'idagi ma'lumotlarga muvofiq formatlaydi.

CSS Qo'shishning Uchta Usuli

CSS-ni qo'shishning uchta usuli mavjud:

Tashqi CSS
Ichki CSS
Inline CSS

Tashqi CSS

Tashqi stil varog'i yordamida butun veb-saytning ko'rinishini bitta faylni o'zgartirish orqali o'zgartirishingiz mumkin!

Har bir HTML sahifasi, <head> qismida <link> elementi ichida tashqi stil varog'i fayliga havola kiritishi kerak.

Misol Tashqi uslublar HTML sahifasining <head> qismida joylashgan <link> elementi ichida belgilanadi:

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

Tashqi stil varog'i har qanday matn muharririda yozilishi mumkin va .css kengaytmasi bilan saqlanishi kerak.

Tashqi .css faylida hech qanday HTML teglar bo'lmasligi kerak.

"mystyle.css" fayli quyidagicha ko'rinadi:

"mystyle.css"

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

Eslatma: Xususiyat qiymati (20) bilan birlik (px) orasida bo'sh joy qo'shmang:

Noto'g'ri (bo'sh joy bilan): margin-left: 20 px;
To'g'ri (bo'sh joysiz): margin-left: 20px;

Ichki CSS

Agar bitta HTML sahifa o'ziga xos uslubga ega bo'lsa, ichki stil varog'idan foydalanish mumkin.

Ichki uslub <head> qismidagi <style> elementi ichida belgilanadi.

Misol Ichki uslublar HTML sahifasining <head> qismidagi <style> elementi ichida belgilanadi:

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

Inline uslub bitta element uchun noyob uslub qo'llash uchun ishlatilishi mumkin.

Inline uslublardan foydalanish uchun uslub atributini tegishli elementga qo'shing. Uslub atributi har qanday CSS xususiyatini o'z ichiga olishi mumkin.

Misol Inline uslublar tegishli elementning "style" atributi ichida belgilanadi:

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

Maslahat: Inline uslub stil varog'ining ko'plab afzalliklarini yo'qotadi (mazmunni taqdimot bilan aralashtirish orqali). Ushbu usulni kamdan-kam hollarda ishlating.

Bir Nechta Stil Varog'lari

Agar bir xil selektor (element) uchun turli stil varog'larida bir nechta xususiyatlar aniqlangan bo'lsa, oxirgi o'qilgan stil varog'idagi qiymat qo'llaniladi.

Tasavvur qiling, tashqi stil varog'ida <h1> elementi uchun quyidagi uslub aniqlangan:

h1 {
  color: navy;
}

Keyin, ichki stil varog'ida ham <h1> elementi uchun quyidagi uslub aniqlangan:

h1 {
  color: orange;
}

Misol Agar ichki stil varog'i tashqi stil varog'iga havoladan keyin aniqlansa, <h1> elementlari "orange" rangda bo'ladi:

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

Misol Ammo, agar ichki stil varog'i tashqi stil varog'iga havoladan oldin aniqlansa, <h1> elementlari "navy" rangda bo'ladi:

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

Kaskadli Tartib

HTML elementi uchun bir nechta stil belgilangan bo'lsa, qaysi uslub ishlatiladi?

Sahifadagi barcha uslublar quyidagi qoidalarga muvofiq yangi "virtual" stil varog'iga "kaskadlanadi", bu erda birinchi raqam eng yuqori ustuvorlikka ega:

Inline uslub (HTML elementi ichida)
Tashqi va ichki stil varog'lari (head qismida)
Brauzer standarti

Shunday qilib, inline uslub eng yuqori ustuvorlikka ega bo'ladi va tashqi, ichki uslublarni va brauzer standartlarini bekor qiladi.

Mashqlar bilan o'zingizni sinab ko'ring

Mashq: URL: "mystyle.css" bo'lgan tashqi stil varog'ini qo'shing.

<head>
  <link rel="stylesheet" href="mystyle.css" />
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS-ni Qo'shish Usullari

Ushbu sahifada