klassattribut

6.1 Klassattributet och stiltaggen

Men det är inte allt. Efter att hundratals "stilar" uppfunnits, uppstod frågan: hur man använder dem? Och sedan kom de på idén att gruppera dem i "klasser". Det är naturligtvis inte samma klasser som i Java. Bara speciella stilgrupper.

Och om du hade en bild innan du använde "klasser":

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

Nu kan det skrivas som:

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

Vi skapade en speciell «style» pictureoch överförde stilvärdena från style. Och sedan knöt vi <img> och "stil"-bilden med taggen class.

6.2 Väljare, typer av väljare

Dessa stilar, renderade separat, blev kända som classeseller selectors. De har flera viktiga funktioner.

Man html-elementkan ha flera väljare. Deras namn anges med ett mellanslag. Exempel:

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

En anledning till att vi har berört väljare här är att de kan tillämpas automatiskt. Och denna användbara egendom kommer att användas mycket ofta i framtiden. Inklusive Java-utvecklare.

Här är en kort lista över 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 inte memorera allt. Men det skulle vara bra om du studerade den här tabellen ett par gånger och allt detta lades in i ditt huvud. Utan webben i det moderna livet, ingenstans och på webben - ingenstans utan väljare.