Атрибут class

6.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.

6.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;
}

Тебе не нужно все это запоминать. Но хорошобы, чтоб ты изучил эту таблицу пару раз и все это у тебя в голове отложилось. Без веба в современной жизни никуда, а в вебе – никуда без селекторов.

HTML + CSS