MohirDox

Ko'rinishi

CSSdan foydalanish usullari ​

Brauzer stil varaqasini o‘qiganda, HTML hujjatini stil varaqasidagi ma’lumotlarga ko‘ra formatlaydi.

CSS-ni qo‘shishning uchta usuli mavjud:

  • Tashqi CSS
  • Ichki CSS
  • Inline CSS

Tashqi CSS ​

Tashqi stil varaqasi yordamida butun sayt ko‘rinishini faqat bitta faylni o‘zgartirib o‘zgartirish mumkin!

Har bir HTML sahifada <head> bo‘limida <link> elementi orqali tashqi stil varaqasiga havola bo‘lishi kerak.

Misol:

html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <h1>Bu sarlavha</h1>
    <p>Bu paragraf.</p>
</body>
</html>

Tashqi stil varaqasi oddiy matn muharririda yoziladi va .css kengaytmada saqlanadi. Tashqi .css faylida HTML teglar bo‘lmasligi kerak.

"mystyle.css" fayli misoli:

css
body {
    background-color: lightblue;
}

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

Eslatma: Property qiymati (20) va birlik (px) orasida bo‘sh joy bo‘lmasligi kerak.

Noto‘g‘ri: margin-left: 20 px;

To‘g‘ri: margin-left: 20px;

Ichki CSS ​

Agar bitta HTML sahifada o‘ziga xos uslub bo‘lsa, ichki stil varaqasi ishlatiladi.

Ichki stil <head> bo‘limidagi <style> elementida aniqlanadi.

Misol:

html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: linen;
        }
        h1 {
            color: maroon;
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <h1>Bu sarlavha</h1>
    <p>Bu paragraf.</p>
</body>
</html>

Inline CSS ​

Inline stil bitta elementga o‘ziga xos uslub berish uchun ishlatiladi.

Inline stil uchun tegga style atributi qo‘shiladi va istalgan CSS xossasi yoziladi.

Misol:

html
<!DOCTYPE html>
<html>
<body>
    <h1 style="color:blue;text-align:center;">Bu sarlavha</h1>
    <p style="color:red;">Bu paragraf.</p>
</body>
</html>

Maslahat: Inline stil kontent va dizaynni aralashtiradi, shuning uchun kam ishlatish tavsiya etiladi.

Bir nechta stil varaqalari ​

Agar bir xil selektor (element) uchun turli stil varaqalarida xossalar aniqlangan bo‘lsa, oxirgi o‘qilgan stil varaqasidagi qiymat ishlatiladi.

Misol:

Tashqi stil varaqasida:

css
h1 {
    color: navy;
}

Ichki stil varaqasida:

css
h1 {
    color: orange;
}

Agar ichki stil tashqi stil havolasidan keyin yozilsa, <h1> elementi "orange" bo‘ladi:

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

Agar ichki stil tashqi stil havolasidan oldin yozilsa, <h1> elementi "navy" bo‘ladi:

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

Kaskad tartibi ​

Bir element uchun bir nechta stil aniqlansa, quyidagi ustuvorlik bo‘yicha ishlatiladi (1 - eng yuqori):

  1. Inline stil (element ichida)
  2. Tashqi va ichki stil varaqalari (<head> bo‘limida)
  3. Brauzerning standart uslubi

Demak, inline stil eng ustun, tashqi va ichki stil hamda brauzer standartlarini bekor qiladi.