class atributi

6.1 class atributi va style tegi

Lekin bu hammasi emas. Yuzlab "uslublar" o'ylab topilgandan so'ng, ularni qanday ishlatish kerakligini hal qilish kerak edi. Shunda ular "klasslar"da guruhlanishni o'ylab topishdi. Bu, albatta, Javada bo'lmagan kabi klasslar emas. Faqat maxsus uslublar guruhlari.

Agar "klasslar"dan foydalanishdan oldin sendagi rasm quyidagi bo'lsa:

       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">
    

Endi uni quyidagi tarzda yozish mumkin:

<img src="logo.png" class="picture">
 
<style>
    img.picture {
 width=100px;
 height=100px;
 opacity=0.5
    }
</style>

Biz maxsus "style" picture yaratdik va style atributidan uslub qiymatlarini unga ko'chirdik. Keyin esa <img> va "style" picture ni class teg orqali bog'ladik.

6.2 Selektor, selektor turlari

Alohida olingan bu uslublar klasslar yoki selektorlar deb atala boshladi. Ular bir nechta muhim xususiyatlarga ega.

Bitta html-element bir nechta selektorlarga ega bo'lishi mumkin. Ularning nomlari bo'sh joy orqali ko'rsatiladi. Misol:

       <img src="logo.png" class="picture main">
    

Biz bu yerda selektorlarni tilgan sababimiz, ular avtomatik tarzda qo'llanilishi mumkin. Bu ularning foydali xususiyatlari kelgusida juda ko'p ishlatiladi. Shu jumladan, Java dasturchilari tomonidan ham.

Ularning qisqa ro'yxati:

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

.main .article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

Bu hammasini eslab qolishing shart emas. Lekin bu jadvalni bir necha marta o'qib chiqishing va bularni eslab qolishing yaxshi. Zamonaviy hayotda webdan hech qaerga ketolmaysan, webda esa selektorlarsiz hech qaerga ketolmaysan.

HTML + CSS