atrybut klasy

6.1 Atrybut class i znacznik stylu

Ale to nie wszystko. Po wynalezieniu setek „stylów” pojawiło się pytanie: jak ich używać? A potem wpadli na pomysł pogrupowania ich w „klasy”. Nie są to oczywiście te same klasy, co w Javie. Po prostu specjalne grupy stylów.

A jeśli przed użyciem „klas” miałeś obrazek:

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

Teraz można to zapisać jako:

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

<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

Stworzyliśmy specjalny «style» picturei przenieśliśmy wartości stylu z pliku style. Następnie połączyliśmy <img> i obraz „style” z tagiem class.

6.2 Selektor, rodzaje selektorów

Style te, renderowane oddzielnie, stały się znane jako classeslub selectors. Mają kilka ważnych cech.

Można html-elementmieć wiele selektorów. Ich nazwy są oznaczone spacją. Przykład:

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

Jednym z powodów, dla których poruszyliśmy tutaj selektory, jest to, że można je zastosować automatycznie. I ta użyteczna właściwość będzie używana bardzo często w przyszłości. W tym programiści Java.

Oto ich krótka lista:

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

Nie musisz wszystkiego zapamiętywać. Ale byłoby dobrze, gdybyś przestudiował tę tabelę kilka razy i wszystko to zostało złożone w twojej głowie. Bez sieci we współczesnym życiu nigdzie, aw sieci - nigdzie bez selektorów.