Css stuffs #2

CSS - Stuffs #2Regole, selettori, parentele

https://creativecommons.org/licenses/by-nc-sa/4.0/




RegoleLa prima regola del Fight Club è …

Diego La Monica - [email protected] - http://diegolamonica.info

Cos’è una regola di stile

È una regola che descrive la presentazione di

uno o più elementi presenti su un documento.

mailto:[email protected]

http://diegolamonica.info


Conformazione della regola di stile

color: red;

Regola di stile





color: red;

Caratteristica da alterare dell’elemento interessato

dalla regola





color: red;

Valore che la caratteristica assumerà





color: red;

Terminatore della regola. È fondamentale. Se manca la

regola stessa e la successiva non verranno interpretate.





color: red;

Separatore tra caratteristica e valore. È necessario.

In assenza di esso l’intera regola non sarà compresa.




Applicare più regole

color: red;

background-color: white;

Una regola, un separatore!




Raggruppare le regole

{color: red;background-color: white;

}Le regole che si riferiscono ad uno stesso oggetto sulla

pagina, sono raggruppate* tra parentesi graffe.* non possono esistere regole non raggruppate



SelettoriI want you! And you! And you too!


Definire delle regole per gli elementi della pagina

xxx {color: red;background-color: white;

}Selettore





div {color: red;background-color: white;

}Indicando il tag, le regole del blocco saranno applicate

a tutti gli elementi della pagina con quel preciso tag.http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-1.html



http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-1.html




.class {color: red;background-color: white;

}Se il selettore è preceduto da un “.”, le regole saranno

applicate a tutti gli elementi di una specifica classe.





.text-red {color: red;background-color: white;

}

Risultato:

Questo testo sarà rosso

Questo invece no

Questo sarà di nuovo rossoQuesto testo sarà rossoQuesto invece noQuesto sarà di nuovo rosso








#id {color: red;background-color: white;

}Se il selettore è preceduto da un “#”, le regole saranno

applicate all’elemento sulla pagina con il dato id.




Selezionare solo i nodi inclusi in altri nodi

ul li{color: red;background-color: white;

}Saranno cercati tutti gli elementi li dentro a qualsiasi tag ul.




Selezionare solo i nodi inclusi in altri nodi

ul li{color: green;background-color: white;

}ul li p{

color: red;background-color: white;

}

<ul><li>Questo testo è

rosso</li><li>

Anche questo<ul>

<li>Questo no</li></ul><ol>

<li>ed anche questo</li>

</ol></li>

</ul>






Selettori di parentelaLuke io sono tuo padre!


Selezionare solo i nodi strettamente figli di qualcuno

ul > li{color: red;background-color: white;

}Il > identifica una parentela stretta. Solo gli elementi li direttamente figli di un ul saranno interessati dalla regola




Selezionare solo i nodi strettamente figli di qualcuno

ul > li > p{color: red;background-color: white;

}

<ul><li>Questo testo è rosso</li><li>

Questo testo sì<ul>

<li>Questo no</li></ul><div>Nemmeno io</div><ol>

<li>E nemmeno questo testo è rosso</li>

</ol></li>

</ul>







Elementi strettamente adiacenti di pari livello

p + p{color: red;background-color: white;

}

Il + nel selettore indica che la regola verrà applicata a tutti gli elementi descritti dal selettore alla destra del + successivi di pari livello e direttamente adiacenti agli elementi descritti dalla parte di selettore alla sinistra del +.







Elementi di pari livello

p ~ p{color: red;background-color: white;

}

Il ~ nel selettore indica che la regola verrà applicata a tutti gli elementi descritti dalla regola alla destra del ~ di pari livello e successivi, ma non necessariamente adiacenti, agli elementi descritti dalla parte di regola alla sinistra del ~.







Applicare le stesse regole per più selettori

div, p {color: red;background-color: white;

}

La virgola separa più selettori



Creative Commons BY-NC-SA 4.0https://creativecommons.org/licenses/by-nc-sa/4.0/

Prima di riutilizzare queste slide ricorda che:

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.

You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

NonCommercial — You may not use the material for commercial purposes.

ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the

same license as the original.







https://creativecommons.org/licenses/by-nc-sa/4.0/#

Technology

Css stuffs #2