клас атрибут

6.1 Атрибутът class и тагът style

Но това не е всичко. След като бяха изобретени стотици "стилове", възникна въпросът: How да ги използваме? И тогава им хрумна идеята да ги групират в „класове“. Това, разбира се, не са същите класове като в 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>

Създадохме специален «style» pictureи прехвърлихме стиловите стойности от style. И след това свързахме <img> и картината "style" с етикета class.

6.2 Селектор, видове селектори

Тези стилове, представени отделно, станаха известни като classesor selectors. Те имат няколко важни характеристики.

Човек html-elementможе да има няколко селектора. Имената им се отбелязват с интервал. Пример:

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

Не е нужно да запомняте всичко. Но би било добре, ако сте проучor тази table няколко пъти и всичко това се е отложило в главата ви. Без мрежата в съвременния живот никъде, а в мрежата - никъде без селектори.