attributo di classe

6.1 L'attributo class e il tag style

Ma non è tutto. Dopo che centinaia di "stili" sono stati inventati, è sorta la domanda: come usarli? E poi hanno avuto l'idea di raggrupparli in "classi". Queste, ovviamente, non sono le stesse classi di Java. Solo gruppi di stile speciali.

E se prima di usare "classi" avevi una foto:

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

Ora potrebbe essere scritto come:

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

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

Ne abbiamo creato uno speciale «style» picturee trasferito i valori di stile dal style. E poi abbiamo legato l'immagine <img> e lo "stile" con il tag class.

6.2 Selettore, tipi di selettori

Questi stili, resi separatamente, divennero noti come classeso selectors. Hanno diverse caratteristiche importanti.

Si html-elementpossono avere più selettori. I loro nomi sono indicati con uno spazio. Esempio:

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

Uno dei motivi per cui abbiamo toccato i selettori qui è perché possono essere applicati automaticamente. E questa utile proprietà verrà utilizzata molto spesso in futuro. Compresi gli sviluppatori Java.

Eccone un breve elenco:

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

Non devi memorizzare tutto. Ma sarebbe bello se studiassi questa tabella un paio di volte e tutto questo si depositasse nella tua testa. Senza il web nella vita moderna, da nessuna parte e sul web - da nessuna parte senza selettori.