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 «стиль» 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

классамиEzek 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:

# Választó Példa Leírás
1 *
* {
  margin: 0;
  padding: 0;
}
A HTML-dokumentum minden elemére vonatkozik.
2 #id
#img123 {
   width:100px;
   height 100px;
}
A # után annak az elemnek az azonosítója következik, amelyre az adott stílust alkalmazni kell.
3 címke
table {
   color: black;
}
A dokumentum összes táblázatára vonatkozik.
4 tag.selector
table.important {
   color: red;
}
Minden olyan dokumentumtáblára vonatkozik, amelynél az osztály attribútuma van megadva.
5 .választó
.picture {
  opacity: 0.5
}
Minden olyan elemre vonatkozik, amelynél meg van adva az osztály attribútum. Bármilyen címke.
6 szülő gyermek
main article {
  color: blue;
}
Minden olyan elemre vonatkozik, ahol a szülő címke tartalmazza a fő osztályt, a gyermek címke pedig a cikkosztályt.
7 címke: link
a:link {
color: blue;
}
A :link pszeudoosztály olyan hivatkozások stílusára szolgál, amelyekre a felhasználó még nem kattintott.
8 tag:látogatott
a:visited {
color: red;
}
A :link pszeudoosztály olyan hivatkozások stílusára szolgál, amelyekre a felhasználó már rákattintott.
9 tag:checked
input[type=radio]:checked {
 border: 1px solid black;
}
Ez a pszeudoosztály csak a bejelölt UI-elemeket jelöli ki: rádiógombokat vagy jelölőnégyzeteket.
10 címke: lebeg
div:hover {
  background: red;
}
Ez a pszeudoosztály lehetővé teszi egy elem stílusának megváltoztatását, amikor az egérrel rámutat.
tizenegy tag:első gyerek
ul li:first-child {
 border-top: none;
}
Ez a pszeudoosztály csak az első gyermekelem kiválasztását teszi lehetővé.

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.