«informatika va axborot teхnologiyalar»

 

 

CSS ni HTML hujjatda qo’llash 

 

Kaskad  jadvallar  stilini  faqatgina  CSS  da  emas,  balki  XSL  da  ham  yozish 

mumkin.Odatda  stillar  jadvali  tilini  o’rnatish  uchun  META  elementidan  foydalaniladi.  Bu 

elementdan hujjatning HEAD bolimiga joylashuvchi turli tuman xizmatchi axborotlarni berishda 

foydalaniladi:  

  

<МЕТА http - equiv="Content-Style-Тype" content="text/css">  

  

http-equiv="Content-StyleТype" atributi, bu META element   kaskad jadvallar stiliga tegishli 

ekanini bildiradi, content="text/css" atributi esa jadvallar stili CSS tilida yozilganini ko’rsatadi. 

Inline stilidan foydalanish 

Bu usul hujjatni istalgan joyida style atributini qo’llash bilan yoziladi. Masalan: 

---

<Н1 > Yashil sarlavha  

Bu holda hujjatni ichidagi faqat bitta sarlavha yashil rangda bo’ladi. 

Embeding stilidan foydalanish 

Hujjatning HEAD bo’limiga stil qoidalari kiritiladi, bu qoidalar  

va  elementlar ichiga yoziladi. 

  

Н1{ color:green  }  

 

Bu  holda  berilgan  hujjatdagu  hamma  birinchi  darajali  (H1)  sarlavhalar  yashil  rangda 

bo’ladi.   

STYLE, elementini yana bir atributi, media quyidagi qiymatlarni qabul qilishi mumkin.  

   screen  -  kompyuter ekranlari uchun;  

   tty – simvollarni aks ettirish cheklangan qurilmalar,terminal,teletayp va xokazo; 

   tv –televizor tipidagi qurilmalar;  

   projection –proyektor tipidagi qurilmalar uchun.  

   handheld – mobil telefon, cho’ntak kompyuterlari uchun;  

   print – pechatga chiqaruvchi qurilma yoki pechatni oldindan ko’rib chiqish rejimi;  

   braille –Brayl alfavitli qurilmalar uchun( ko’rish qobiliyati pastlar);  

   aural –ovozni sintezlash qurilmalari uchun;  

   all – hamma qurilmalar uchun. 

Misol keltiramiz: 

 

  

   

   

   

   @media screen {/* brauzerda aks ettitish uchun stil */ 

    BODY { 

     font-family:  Arial,  Verdana,  sans-serif;  /*  shriftni  turi 

*/ 

     font-size: 90%; /* shriftni o’lchami */ 

     color: #000080; /* Matnni rangi */ 

    } 

    H1 { 

     background: #faf0e6; /* Matnni tagidagi fon rangi */ 

     border: 2px dashed #800000; /* sarlavha atrofidagi ramka */ 

     color: #a0522d; /* Matnni rangi */ 

     padding: 7px; /* Matnatrofidagi hoshiya */ 

    } 

    H2 { 

     color: #556b2f; /* Matnni rangi */ 

     margin: 0; /* otstuplarni yo’qotamiz */ 

    } 

    P { 

     margin-top: 0.5em; /* yuqori otstup */ 

    } 

   } 

   @media print { /* pechat uchun stil */ 

    BODY { 

     font-family: Times, 'Times New Roman', serif;  

    } 

    H1, H2, P { 

     color: #000; /* Matnqora rangda */ 

---

    } 

   }