lunedì 30 Novembre 2020

Download in corso

Softwareone.it

07-01-2019

CSS Classi e ID stilizzare le pagini Web

CSS è un linguaggio, molto semplice, che permette di assegnare delle caratteristiche stilistiche agli elementi delle pagine Web, quindi alle pagine Web stesse.

Parliamo dunque di tre concetti apparentemente ostili ma in realtà molto semplici le classi, ID ed ereditarietà.

Pubblicità

Una classe CSS permette di definire solo una parte di elementi di una pagina (e dell’intero sito) dello stesso tipo; assegnando però solo a quelli che si riferiscono alla classe delle caratteristiche che all’elemento generico non vengono attribuite.

esempio

Assegnamo all’elemento “div” il colore del testo, quindi tutti gli elementi “div” avranno quel colore; avremo però dei “div” che si riferiscono ad una classe creata ad hoc, ad esempio; per l’impostazione del grassetto. Ovviamente potete assegnare un nome diverso di stile per ogni tag.

<div>Testo normale</div>
<div>Testo normale</div>
<div class="GRASSETTO">Testo in grassetto</div>

Vediamo dunque, con un foglio di stile interno o esterno che sia, come mettere in pratica quanto analizzato in precedenza:

div{
      color: #036;
} 
div.GRASSETTO{
       font-weight: bold;
}

Il primo elemento stilizzato, dunque, definisce semplicemente il colore del testo, mentre il secondo elemento (una classe associata con un “punto” ad un “div”) eredita dall’elemento madre il colore, ma definisce il grassetto, molto semplice. 

Pubblicità

Il risultato sarà il seguente:

Testo normale
Testo normale
Testo in grassetto

Definiamo alcune convenzioni. 

Abbiamo già detto che il “punto” permette di creare una classe che può essere associata ad un determinato elemento, oppure essere una classe generica.

.GRASSETTO { font-weight: bold; }

e/o la si può associare “anche” ad un altro elemento:

p.GRASSETTO{font-weight: bold;}

Ad una classe si può assegnare il nome che si vuole e lo si può scrivere indifferentemente in maiuscolo ed in minuscolo purchè il nome della classe non presenti spazi; sia alfanumerico (composto da soli numeri e lettere) ed abbia al massimo l’underscore (_) come carattere speciale, non alfanumerico. 

In questo modo, a seconda delle esigenze, si può “giocare”con le classi per avere il massimo risultato col minimo sforzo. 

Gli ID funzionano in maniera molto simile alle classi, solo che all’interno di una pagina è possibile specificare uno ed un solo ID, essendo appunto un identificatore univoco. 

Quindi

<div>Testo normale</div>
<div>Testo normale</div>
<div id="GRASSETTO">Testo in grassetto</div>

lo stile

div {color: #036;} #GRASSETTO {font-weight: bold;}

Ottenendo lo stesso risultato di prima, ma in maniera meno malleabile: avvolte definire degli ID per gli elementi di una pagina è molto importante. 

In precedenza abbiamo già visto il concetto di ereditarietà, affermando che la classe GRASSETTO eredita lo stile della definizione base dell’elemento a cui la classe è associata. 

Pubblicità

Tuttavia l’ereditarietà non si limita a questo. 

Prendiamo il codice precedente (quello relativo alla classe GRASSETTO, non all’ID) e modifichiamo solo il codice HTML aggiungendo uno stile in linea all’interno del tag stesso:

<div id="GRASSETTO" style="color: #036;">Testo in grassetto</div>

L’elemento “div” nel foglio di stile assegna il colore FF0000 (rosso) a tutti i “div”, mentre il codice HTML appena visto assegna al volo all’elemento il colore 0000FF (blu). 

Dato che l’interprete del browser legge in maniera sequenziale il codice che gli viene sottoposto (dall’alto verso il basso e da sinistra verso destra); il colore più recentemente ereditato è il blu; quindi il testo comparirà in blu per l’elemento che “ne fa richiesta”.

Una .classe{ } può essere associata ad un id #id{ } ” oppure possiamo associarle ad un qualsiasi tag più stili ” <div class=”clas1 class2 classe3″> </div> ” in certi casi ogni classe deve essere preceduta da un punto ” .clas1 .class2 .classe3 “

CSS Gestire Colori E Sfondi

https://www.w3schools.com/html/html_classes.asp

I commenti sono chiusi.

Pubblicità