• Kasblar
    • HTML
    CSS
    JavaScript
    PHP
    SQL
    Python
  • Bo'limlar
    • Yangiliklar
    Texnologiyalar
    Maqolalar

    Class

    Brauzer Css da yozilgan kodlarni o'qib web saxifani (html ni ) shu asosida stil (bezak) berib chiqadi. (Pardoz-andoz qiladi ????)

     

    Html bilan Css ni qanday ishlatsak bo'ladi ?

    Html bilan css ni ulab ishlatishni 3ta yo'li bor.

    • External (tashqi)
    • Internal (Ichki)
    • Inline (mos ravishda, kiritilgan)

     

    External CSS

    Bunda Css kodlar tashqaridan Html <link> elementi orqali qo'shiladi. Qo'shilgan <link> elementi <head> tagi ichida bo'lishi kerak.

     

    Namuna

    <!DOCTYPE html>
<html>
    <head>
          <link rel="stylesheet" href="MyCss.css">
    </head>
    <body>
          <p> Bu Html faylga css  link orqali ulandi  </p>
    </body>
</html>

     

     

    Izoh. link elementidagi rel atributi qo'shilayotgan file ni turini anglatadi. href da o'sha qo'shilayotgan faylgacha bo'lgan to'liq yo'lni ko'rsatish kerak.

    MyCss.css faylda css kodlar yozilgan. Html ga css fayl ulangandan keyin brauser css da yozilgan kodlarni bo'yicha Html ga stillar beradi.

    External usulini loyihalarda ishlatish tafsiya qilinadi. Qolgan usullarni o'rganish jarayonida ishlatish mumkin.

     

    Css Fayl yaratish.

    Css fayl yaratish uchun xohlagan teks editor dan foydalansak bo'ladi. Bunda Faytl saqlayotganda (save qilayotganda) faylni turini .css qilish kerak.

    Internal CSS

    Internal usulida css kodlar Html fayli ichida yoziladi.

    Bunda css kodlar <style> </style> taglari orasiga yozilishi kerak va <style> taglari <head> tagi ichida bo'lishi kerak.

    Namuna

    <!DOCTYPE html>
    <html>
    <head>
    
      <style>
          p {
              color: coral;
          }
      </style>
    
    </head>
   <body>
    
       <p> Bu namunada css interlan usulida bo'ldi </p>
       <p> Bunda css kodlar html faylni o'ziga yoziladi. </p>
    </body>
</html>

     

     

    Izoh. Internet usuli haqiqiy loyihalarda tafsiya qilinmaydi. Asoson O'rganish uchun shu usuldan foydalanib css kodlarni yozsangiz bo'ladi.

     

    Inline CSS

    Inline usulida css kodlar elementni o'ziga style atribuni yordamida yoziladi.

     

    Namuna

    <!DOCTYPE html>;
    <html>
    <head>
    
    </head>
    <body>
    
    <p style="color: red"> Bu namunada css interlan usulida bo'ldi </p>
    <p style="color: yellow"> Bunda css kodlar html faylni o'ziga yoziladi. </p>
    
    </body>
    </html>

     

    Multiple Style

    Css da bitta selectorga bir nechta joyda bitta xususiyatga ega qiymatlar berilsa oxirda yozilgan qiymatni qabul qiladi.

    Yani css da p elementlari uchun 2 ta joyda color xususiyatiga qiymat berilgan bo'lsa element eng oxirda yozilgan qiymatni qabul qiladi. Yani Eng oxirda yozilgan rang qabul bo'ladi.

    Namuna

    <!DOCTYPE html>;
    <html>
    <head>
    
      <style>
          p {
              color: red;
          }
    
    
          p {
              color: yellow;
          }
      </style>
    
    </head>
    <body>
    
    <p> Bu p elementi tekstlari yellow rangda bo'ladi </p>
    <p> Sababi yellow qiymat eng oxirida berildi. </p>
    
    </body>
    </html>

     


     

    Inline vs Internal

    Agar elementga bir xil inline va internal css xususiyatlar yozilsa inline yozilgan stillar qabul bo'ladi.

    Namuna

    !DOCTYPE html>;
    <html>
    <head>
    
      <style>
          p {
              color: red;
          }
    
    
          p {
              color: yellow;
          }
      </style>
    
    </head>
    <body>
    
    <p> Bu p elementi oxirda yozilgan yello rangni oladi. </p>
    <p style="color: blue"> Bu elementga inline ko'rinishida stil yozilgan va shu stilni qabul qiladi.  </p>
    
    </body>
    </html>

    Izoh. Inline yani elmentga style atributiga yozilgan stillar elementga ta'sir qilish bo'yicha eng kuchlisi hisoblanadi. Yani boshqa usullar bilan solishtirganda element inline usulida yozilgan stillarni qabul qiladi. Ammo bu usulni real loyihalarda tafsiya qilinmaydi.

    Birnechta External usullari

    Html ga xohlagancha external usulda css fayllar ni qo'shsak bo'ladi. Undan tashqari internal usulida html faylda css kodlarni yozsak ham bo'ladi.

    Deylik bizda 2 ta external usulida css fayllar qo'shilgan.

    1 chi faylda quyidagi css xususiyati yozilgan

    
    p {
        color: red;
    }

    2 chi faylda quyidagi css xususiyati yozilgan

        p {
         color: yellow;
     }

    Namuna

    <!DOCTYPE html>;
    <html>
    <head>
    
      <link rel="stylesheet" href="birinchi.css">
      <link rel="stylesheet" href="ikkinchi.css">
    
    </head>
    <body>
    
    <p> p elementi teksni  yellow rang bo'ladi.</p>
    <p>Sababi css fayllar ketma ket qo'shilganda </p>
    <p>oxirda ikkinchi fayl dagi qo'shilyapdi va unda yozilgan css kodlar elemetnga ta'sir qiladi </p>
    
    </body>
    </html>