klasseattributt

6.1 Klasseattributtet og stilkoden

Men det er ikke alt. Etter at hundrevis av "stiler" ble oppfunnet, oppsto spørsmålet: hvordan bruke dem? Og så kom de på ideen om å gruppere dem i "klasser". Dette er selvfølgelig ikke de samme klassene som i Java. Bare spesielle stilgrupper.

Og hvis du hadde et bilde før du brukte "klasser":

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

Nå kan det skrives slik:

<img src="logo.png" class="picture">
 
<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

Vi laget en spesiell «style» pictureog overførte stilverdiene fra style. Og så knyttet vi <img> og "stil"-bildet med taggen class.

6.2 Velger, typer velgere

Disse stilene, gjengitt separat, ble kjent som classeseller selectors. De har flere viktige funksjoner.

Man html-elementkan ha flere velgere. Navnene deres er angitt med et mellomrom. Eksempel:

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

En grunn til at vi har berørt velgerne her, er fordi de kan brukes automatisk. Og denne nyttige eiendommen vil bli brukt veldig ofte i fremtiden. Inkludert Java-utviklere.

Her er en kort liste over dem:

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

Du trenger ikke å huske alt. Men det ville være bra om du studerte denne tabellen et par ganger og alt dette ble lagt inn i hodet ditt. Uten nettet i det moderne liv, ingen steder, og på nettet - ingen steder uten velgere.