class attributi

class so'zini klass deb tarjima qilmaymiz. Shu oddiygina klass deb o'qib qo'yamiz xolos.

Html da class atributi bor. class atributi elementga qaysi CSS klasi tegishli ekanligini ko'rsatadi.

Dehkonchasiga aytganda Css da class yoziladi va shu class html da qaysidir elementlarga beriladi. Shunda Html da class atributidan foydalaniladi.

Css da class bu bir va undan ortiq bo'lgan stillar to'plami desak bo'ladi. Har bitta stilni alohida html elementga yozib o'tirmasdan ularni bitta class ga yozib shu class ni elementlar uchun ishlatsak bo'ladi.

Bitta class ni bir nechta elementlarga ishlatsa bo'ladi.

Namuna

<!DOCTYPE html>
<html>
<head>
    <style>
      .city {
        background-color: tomato;
        color: white;
        border: 2px solid black;
        margin: 20px;
        padding: 20px;
      }
   </style>
</head>
  
<body>

<div class="city">
	<h2>London</h2>
	<p>London - Angliya poytaxti.</p>
</div> 

<div class="city">
	<h2>Parij</h2>
	<p>Parij - Frantsiyaning poytaxti.</p>
</div>

<div class="city">
	<h2>Tokyo</h2>
	<p>Tokio - Yaponiyaning poytaxti.</p>
</div>


</body>
</html>

Natijada 3ta div elementi berilgan va ular bitta class ni ishlatishadi. Ya'ni city degan class ni 3ta element ishlatadi.

Elementning class atributiga qarang. U yerda city yozilgan . Ya'ni class atributini qiymati city ga teng.

Bu degani shu elementga city classi yozilgan hisoblanadi va shu city lassda yozilgan stillar elementga ta'sir qiladi.

Agar class bo'lmaganda city da yozilgan 5ta xususiyatni har bitta element uchun yozib chiqish kerak bu ancha vaqtni oladi.

Html da CSS class lar <style> taglari ichida yoziladi. CSS da class lar . (nuqta) bilan boshlanadi.


<!DOCTYPE html>
<html>
<head>
  <style>
    .note {
      font-size: 120%;
      color: red;
    }
  </style>
</head>
<body>

<h1>Bu <span class="note">Bitta</span> Sarlovha</h1>
<p>Boshqa  <span class="note">bitta</span> ma'nosiz teks.</p>

</body>
</html>

Natija

Namunada 2ta <span> elementi bor va ularga .note classi berilgan. Ular note class da yozilgan stillar bo'yicha stillannadi.

Bir nechta class

Bitta elementda bir nechta class lar yozilishi mumkin.

Bunda class atributida class nomlari bo'sh joy tashab yoziladi.

Namuna


    <h2 class="city main">London</h2>
	<h2 class="city">Paris</h2>
	<h2 class="city">Tokyo</h2>

Natija

Eslatma Agar elementda berilgan classlarda stillar konflict bo'lsa (xususiyat bitta bo'lsa yu qiymat harqil bo'lsa ) eng oxirgi kelgan classdagi stilni element qabul qiladi.

Namuna

<!DOCTYPE html>
<html>
<head>
  <style>
     .one {
          color: indianred;
        } 

    .two {
         color: yellow;
    }
  </style>
</head>
<body>

 	<h2 class="one two">London</h2>
	<h2 class="one">Paris</h2>

</body>
</html>

Natija

Namunada birinchi <h2> elementida 2ta class yozilgan va ikkala clasda ham color xususiyatiga turli qiymatlar berilgan. Shu holatlarda element oxirgi yozilgan xususiyatni qabul qiladi.

Turli xil elementlar

Turli xil HTML elementlari bir xil class nomiga ega bo'lishi mumkin. Ya'ni turli elementlar birxil class dagi stillardan foydalanishi mumkin

Quyidagi misolda <h2> va <p> elementlariga "city" classi yozilgan va natijada ular birxil stillarni qabul qiladi.

Namuna

<!DOCTYPE html>
<html>
<head>
  <style>
     .city {
          background-color: indianred;
          color: white;
          padding: 10px;
        } 

  </style>
</head>
<body>

 	<h2 class="city">Paris</h2>
	<p class="city">Fransiyaning poytahti Paris</p>

</body>
</html>