CSS Haqida To’liq Kitob [2024]

So'nggi tahrir: Fevral 24, 2024

CSS yoki Cascading Styles Sheets – bu HTML-ni stillash va taqdim etishning bir usuli. HTML ma’no yoki mazmun bo’lsa, CSS ushbu hujjatning stilidir.

Stillar HTMLga o’xshamaydi, ular «property: value» formatiga ega va aksariyat atributlar HTML teglariga qo’llanilishi mumkin.

CSS-ni HTML-ga qo’llashning uchta usuli mavjud: Inline, ichki va tashqi.

1. HTML qator ichida css yozish (Inline)

Ichki stillar HTML atributlariga to’g’ridan-to’g’ri stil atributidan foydalanib joylashtiriladi.

Ular quyidagidek ko’rinadi:

    
        <p style="color: red">text</p>

Bu kod xatboshini qizil rangga aylantiradi.

Ammo, esingizda bo’lsa, eng yaxshi yondashuv shundan iboratki, HTML mustaqil, stil kodlarisiz hujjat bo’lishi kerak va shuning uchun iloji boricha ichki stillardan qochish kerak.

Ichki CSS

Ichki stillar <head> tegi ichida ulanadi.

    
        <!DOCTYPE html> 
        <html> 
        <head> 
        <title> CSS Example</title> 
        <style> 
            p {
                color: red;
            }

            a {
                color: blue;
            }
        </style>

Bu sahifadagi barcha xatboshilarni qizil va barcha havolalarni ko’k rangga aylantiradi.

HTML ga ichki CSS yozish qulayroqday tuyulsa ham, HTML va CSS kodlarni alohida fayllarga ajratgan ma’qul.

2. Tashqi CSS

Tashqi stillar ko’p sahifali veb-saytlar uchun ishlatiladi. Shunchaki ko’rinadigan alohida CSS fayli mavjud:

    
        p {
            color: red;
        }

        a {
            color: blue;
        }

Agar ushbu fayl sizning HTML-sahifangiz bilan bir xil papkada «style.css» sifatida saqlansa, u holda HTML-ga quyidagicha bog’lanish mumkin:

    

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS Example</title>
            <link rel="stylesheet" href="style.css">
    ...

3. Ishga tushiring!

Ushbu qo’llanmadan maksimal darajada foydalanish uchun kod yozib ko’rish kerak, shuning uchun matn muharriri bilan yangi faylni ishga tushiring va bo’sh hujjatni «style.css» sifatida HTML fayli turgan papkaga saqlang.

Endi HTML-faylingizni shunday ishga tushirish uchun o’zgartiring:

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>My first web page</title>
                <link rel="stylesheet" href="style.css">
            </head>
        ...

HTML faylini saqlang. Bu hozirda bo’sh bo’lgan CSS fayliga bog’lanadi, shuning uchun hech narsa o’zgarmaydi. HTML fayli joylashgan brauzer oynasini yangilash orqali CSS faylini qo’shishingiz va o’zgartirishingiz va natijalarini ko’rishingiz mumkin bo’ladi.

Internet reklama va Dasturlash xizmatlari

Kettik!