• Selektor turlari CSS da teg va attributlar yo’q, uning o’rnini maxsus kodlar egallaydi va ular selektor, xususiyat va qiymat
  • Psevdosinflar
  • Elementlar va sinflar
    		•

    Css darsliklari




    Download 78.94 Kb.
    bet4/5
    Sana23.05.2023
    Hajmi78.94 Kb.
    #63728
    1   2   3   4   5
    Bog'liq
    4-MA’RUZA. CSS ga kirish. HTMLga ulanish usullari. Selektorlar turlari.
    yugjnfkmdl, 11.SHAXSIY HUJJAT TURLARI, Reja mtmda tabiat burchagini tashkil etishning o‘ziga xosligi T, 9-mavzu Jilvirlash stanoklari (Circular grinding machine) Reja (1), Kiberxavfsizlik haqiqiy hammasi, 7-mustaqil ish, android 4-lab (2), Fonetika maxsus, Algebra fanining vujudga kelishi va rivojlanishi, Kòp tarmoqli maktabgacha ta\'lim muassasalarida tarbiyachilarning pedogogik muloqot maxorati, 1698777484, 2d62efe0-e11c-4abd-ad07-1fa5b5a56fd1, umarjon, 1701419686
    Selektor turlari
    CSS da teg va attributlar yo’q, uning o’rnini maxsus kodlar egallaydi va ular selektor, xususiyat va qiymat deb nomlanadi.
    CSS o’zining sintaksisiga ega. Qoidalarni yozish sintaksisi - selektor va figurali qavs ichida stillarni e’lon qilish blokidan iborat :

    Stillarni e’lon qilish bloki xususiyatlar va ularning qiymatidan iborat.

    Quyida CSS da ishlatiladigan selektor turlari keltirilgan

    Universal selektor
    * { margin: 0; padding: 0; }
    Elementlar selektori
    p { font-family: arial, helvetica, sans-serif; }
    Sinflar selektori
    .note { color: red; background-color: yellow; font-weight: bold; }
    Identifikatorlar selektori
    #paragraph1 { margin: 0px; }

    Atributlar selektori
    a[href="http://www.somesite.com"] { font-weight: bold; }
    Avlodlar selektori
    div#paragraph1 p.note { color: red; }
    Farzand element selektori
    p.note > b { color: green; }
    Psevdosinflar selektori a:active { color: blue; }
    Psevdoelementlar selektor
    p:first-letter { font-size: 32px; }


    Psevdosinflar
    CSSda gipermurojaatlar bilan bog’liq to’rtta psevdosinf mavjud. Giper o’tish to’rtta holatda bo’lishi mumkin:

    • oddiy,

    • faollashgan,

    • o’tilgan,

    kursor ustiga keltirilgan
    Ushbu stillarni ko’rinishini o’zgartirish uchun psevdosinflar ishlatiladi.
    • a:link – oddiy xolat stilini beradi.
    • a:active – faollashgan xolat stilini beradi.
    • a:visited – o’tilgan xolat stilini beradi.
    • a:hover – kursor ustiga keltirilgan xolat stilini beradi.
    Elementlar va sinflar
    Quyida CSS ning element va sinflarini ishlatishning to’rt xil uslubini ko’rib chiqamiz va birinchi uchta xolatda CSS ni HTML dokumenti ... qismida ishlatamiz, to’rtinchi uslubni esa ...
    ,
    ,
    ) taglar uchun quyidagi "{ }" orasidagi buyruqlarni amalga oshir deganidir, xuddi HTML dagi taglarning attributelari kabi. Boshqacha qilib aytganda tag attributelariga judayam o’xshash, lekin ulardan ko’ra ko’proq xususiyatlarga egadir. YA’ni HTML dagi o’rniga CSS da body {background-color:#FF0000;} ikkalasi bir xil funktsiyani amalga oshiradi. Agar CSS da body {background-color:#FF0000;} yozilsa HTML da tagi bir o’zi xech qanday attributelarsiz keladi chunki CSS elementlari attribute vazifasini o’taydi. HTML dokumentimizning ...
    "birodar">Bu matn brovzerda sariq rangda va veb saxifa markazida paydo bo’ladi

    ,
    va
    lar uchun CSS ning elementlari attribute vazifasini o’tashini tushuntirgan edim, lekin siz ba’zi
    yoki
    lar uchun bu elementlar qo’llanmasligini va ular uchun boshqa elementlar bo’lishini xoxlashingiz tabiiydir, u xolda CSS da "p.birodar" qilib belgilab HTML da
    qilib ishlatishingizga to’g’ri keladi. Shunda CSS dagi
    p {
    font-family:arial;
    font-size:14pt;
    font-style:italic;
    color:#660000;
    }
    buyruqlari sizning HTML dagi
    ...
    orasida keladigan ma’lumotingizga ta’sir qilmaydi, va aksincha CSS da "p.brodar {font-family:times new roman; font-size:16pt;} qilib yozib olingan qoidalar
    ...
    uchun o’rinli bo’ladi. Lekin nega aynan "p.birodar", ".birodar" qilsak bo’lmaydimi, baribir ikkala xolatda xam tag ichida ishlatilinadiku? - degan savol tug’ilishi tabiiy. Bunday qilishdan 2 xil maqsad bordir: birinchisi
    larning ko’p va xar xil bo’lishi mumkinligi xoxishga qarab va ularni bir biridan ajratish oson bo’lishi uchun (masalan: p.bir, p.ikki, p.uch), ikkinchi maqsad p.birodar faqat
    uchundir, agar .brodar ni ishlatsak unda boshqa taglarga xam qo’llanishi mumkin bo’lib qoladi .brodar qaysi taglar uchun yaralgani sizni chalg’itishi mumkin katta ma’lumotlar kiritganizda.
    "Quyidagi (b) misolda uni yaqinroq tushunishga xarakat qilamiz, agar tushunarsizlik bo’lsa email orqali xabar bering aniqroq tushuntirishga xarakat qilaman, biroq ikkinchi darsda ko’proq misollarda ko’rsangiz albatta yaxshi tushunib olasiz chunki bu qoidalar juda oson, siz asosan CSS da "{ }" orasidagi qiymatlar turlari va xar birining bajarish funktsiyalari va vazifalarini o’rganasiz, qolgan xamma narsa mutlaqo osondir. Xozir birinchi bo’lib (a) Misolni ko’raylik, keyin (b) Misol.
    (a) Misol:


    CSS Darsliklari

    Download 78.94 Kb.
    1   2   3   4   5




    Download 78.94 Kb.