5 – 6 pseudoclassi e blocchi

Pubblicato il di

Vediamo cosa accade se 2 regole entrano in conflitto o sono contraddittorie :

td > p {font-size: 0.5em; color: white; }
td p { font-size: 1em; color: red; }

Nella prima riga dico se p è figlio di td , nella seconda se p è contenuto dentro un td, l’html è questo

<td><p>CREMONESE</p></td>

Come norma generale prevale la regola più specifica . Per il calcolo della specificità di una regola bisogna estrarre un numero di. 3 cifre dato da

  1. quanti id sono presenti
  2. quanti classi e pseudoclassi sono presenti
  3. quanti tag html sono presenti

nel nostro caso nessun id, nessuna classe, 2 tag html su entrambe le regole (td e p) quindi il numero a 3 cifre che ottengo è 0 0 2 su entrambe le regole. A parità di valore di regola specifica, la priorità viene detta all’ultima regola inserita (nel ns caso td p).

pseudoclassi

sono proprietà intrinseche, che, anche se non vengono dichiarate nell’elemento, si riesce a risalire chi ne fa parte. Un esempio che abbiamo già visto è first-child che pur non essendo dichiarato come classe, è possibile risalire quale elemento è primo figlio di un altro . Altri esempi

<p>Guarda che <a href="http://faghy.it">bella pagina</a></p>

applichiamo una regola usando la sottoclasse link che si riferisce ad un collegamento non visitato .

a:link { color: yellow; }

mentre con visited posso applicare regole ai link già visitati

a:visited {color: grey; }

Posso applicare le pseudoclassi non solo agli anchore (<a>) ma anche ad altri tag tipo

p:hover { background-color: pink; }

Sto chiedendo quando il mouse passa sopra ( hover ) l’elemento p, fammi lo sfondo rosa.

Interessante anche first-letter (prima lettera)

p:first-letter { background-color: pink; font-size: 40px; }

Interessante anche first-line per catturare tutta la prima linea.

p:first-line { background-color: pink; }

blocchi

Uno dei blocchi molto usati nella costruzione di una pagina web è il tag div (divisore), che permette di costruire le nostre pagine con questi contenitori fatti a rettangoli che vengono dimensionati e posizionati in base alle nostre esigenze.

creiamo 3 blocchi che occupano il 100% dello spazio in orizzontale blocchi

<div id="div1"> QUESTO È IL PRIMO BLOCCO  </div>
<div id="div2"> QUESTO È IL SECONDO BLOCCO  </div>
<div id="div3"> QUESTO È IL TERZO BLOCCO  </div>

ecco le 3 regole css

#div1 { background-color: red; width: 100%; height: 100px; }
#div2 { background-color: green; width: 100%; height: 100px; }
#div3 { background-color: blue; width: 100%; height: 100px; }

Ho indicato la larghezza width al 100% e un’altezza di 100 pixel

ecco l’effetto

QUESTO È IL PRIMO BLOCCO
QUESTO È IL SECONDO BLOCCO
QUESTO È IL TERZO BLOCCO

Vediamo se voglio ottenere questo invece:

QUESTO È IL PRIMO BLOCCO
QUESTO È IL SECONDO BLOCCO
QUESTO È IL TERZO BLOCCO
QUESTO È IL QUARTO BLOCCO

Intanto impariamo la proprietà float che sta a significare fluttuare, in questo caso fluttua il blocco sulla sinistra o sulla destra, permettendo la disposizione affiancata dei div.Nel blocco 5 abbiamo un po’ di caratteristiche, intanto la posizione absolute che permette di sganciarlo dal normale flusso dei blocchi della pagina e mi permette di indicare delle posizioni assolute tramite le proprietà left e top in questo caso. Questo è l’html

<div id="div1"> QUESTO È IL PRIMO BLOCCO  </div>
<div id="div2"> QUESTO È IL SECONDO BLOCCO  </div>
<div id="div3"> QUESTO È IL TERZO BLOCCO  </div>
<div id="div4"> QUESTO È IL QUARTO BLOCCO  </div>
<div id="div5"><img id="quadri" src="http://lightflow.cleito.it/css/quadri.png"></div>

e questo il suo css

#div1 { background-color: red; width: 50%; height: 100px; float: left}
#div2 { background-color: green; width: 50%; height: 100px; float: left}
#div3 { background-color: blue; width: 50%; height: 100px; float: right}
#div4 { background-color: grey; width: 50%; height: 100px; float: left}
#div5 { position: absolute; background-color: yellow; width: 5%; height: 50px;
left: 46%; top: 50px; padding: 15px; }
#quadri {width: 100%; height: 100%}

Per fare la stessa cosa con una tabella bisognerebbe scrivere decine e decine di codice. e arei un risultato differente e molto meno flessibile