klasse attribut

6.1 Klasseattributten og stiltagget

Men det er ikke alt. Efter at hundredvis af "stile" blev opfundet, opstod spørgsmålet: hvordan man bruger dem? Og så kom de på ideen om at gruppere dem i "klasser". Det er selvfølgelig ikke de samme klasser som i Java. Bare specielle stilgrupper.

Og hvis du havde et billede, før du brugte "klasser":

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

Nu kunne det skrives som:

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

Vi oprettede en speciel «style» pictureog overførte stilværdierne fra style. Og så bandt vi <img> og "stil"-billedet med tagget class.

6.2 Vælger, typer af vælgere

Disse stilarter, gengivet separat, blev kendt som classeseller selectors. De har flere vigtige funktioner.

Man html-elementkan have flere vælgere. Deres navne er angivet med et mellemrum. Eksempel:

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

En grund til, at vi har berørt vælgere her, er, at de kan anvendes automatisk. Og denne nyttige ejendom vil blive brugt meget ofte i fremtiden. Herunder Java-udviklere.

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 behøver ikke at lære det hele udenad. Men det ville være godt, hvis du studerede denne tabel et par gange, og alt dette blev deponeret i dit hoved. Uden nettet i det moderne liv, ingen steder og på nettet - ingen steder uden vælgere.