osztály attribútuma

6.1 Az osztály attribútum és a stíluscímke

De ez még nem minden. Több száz „stílus” feltalálása után felmerült a kérdés: hogyan kell használni? Aztán felmerült az ötlet, hogy „osztályokba” csoportosítsák őket. Ezek természetesen nem ugyanazok az osztályok, mint a Java-ban. Csak speciális stíluscsoportok.

És ha az „osztályok” használata előtt volt egy kép:

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

Most így lehetne írni:

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

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

Létrehoztunk egy speciálisat «style» picture, és átvittük a stílusértékeket a style. Aztán az <img> és a "stílus" képet összekötöttük a címkével class.

6.2 Kiválasztó, szelektorok típusai

classesEzek a stílusok külön megjelenítve vagy néven váltak ismertté selectors. Számos fontos tulajdonságuk van.

Több választó is html-elementlehet. Nevüket szóköz jelzi. Példa:

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

Az egyik ok, amiért itt érintettük a kiválasztókat, az az, hogy automatikusan alkalmazhatók. Ezt a hasznos tulajdonságot pedig nagyon gyakran fogják használni a jövőben. Beleértve a Java fejlesztőket is.

Íme egy rövid lista belőlük:

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

Nem kell mindent megjegyezni. De jó lenne, ha párszor áttanulmányoznád ezt a táblázatot, és mindez lerakódott a fejedben. Internet nélkül a modern életben, sehol, és a weben – választó nélkül sehol.