Атрибут class

1. Атрибут class та тег style

Але це ще не все. Після того, як створили сотні стилів, постало питання: як їх використовувати? І тоді вирішити групувати їх у «класи». Це, звісно, не такі класи, як у Java. Просто спеціальні групи стилів.

І якщо до використання «класів» у тебе була картинка:

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

То тепер її можна записати у вигляді:

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

Ми створили спеціальний «стиль» picture і перенесли до нього значення стилів з атрибуту style. А потім пов'язали <img> і «стиль» picture за допомогою тега class.

2. Селектор, види селекторів

Ці стилі, які винесено окремо, стали називати класами або селекторами. Вони мають кілька важливих особливостей.

В одного html-елемента може бути кілька селекторів. Їхні назви вказуються через пробіл. Приклад:

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

Одна з причин, чому ми тут торкнулися теми селекторів, – це те, що вони можуть застосовуватися автоматично. І ця їхня корисна властивість надалі буде дуже часто використовуватися. У тому числі і Java-розробниками.

Ось їх короткий список:

* {
  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;
}

Тобі не треба все це запам'ятовувати. Але добре, якщо ти переглянеш цю таблицю кілька разів, щоб інформація відклалася в твоїй пам'яті. Без інтернету в сучасному нині ніяк, а в інтернеті – ніяк без селекторів.