klasse attribuut

6.1 Het class-attribuut en de style-tag

Maar dat is niet alles. Nadat honderden "stijlen" waren uitgevonden, rees de vraag: hoe ze te gebruiken? En toen kwamen ze op het idee om ze in "klassen" te groeperen. Dit zijn natuurlijk niet dezelfde klassen als in Java. Gewoon speciale stijlgroepen.

En als je voordat je "klassen" gebruikte een foto had:

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

Nu zou het kunnen worden geschreven als:

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

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

We hebben een speciale gemaakt «style» pictureen de stijlwaarden van de style. En toen hebben we de <img> en de "stijl" foto gekoppeld aan de tag class.

6.2 Selector, soorten selectors

Deze stijlen, afzonderlijk weergegeven, werden bekend als classesof selectors. Ze hebben verschillende belangrijke kenmerken.

Men html-elementkan meerdere selectors hebben. Hun namen worden aangegeven met een spatie. Voorbeeld:

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

Een van de redenen waarom we hier selectors hebben genoemd, is omdat ze automatisch kunnen worden toegepast. En deze nuttige eigenschap zal in de toekomst nog heel vaak gebruikt worden. Inclusief Java-ontwikkelaars.

Hier is een korte lijst van hen:

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

Je hoeft niet alles te onthouden. Maar het zou goed zijn als je deze tabel een paar keer bestudeerde en dit alles in je hoofd werd gedeponeerd. Zonder internet in het moderne leven, nergens, en op internet - nergens zonder selectors.