Css stuffs #2
-
Upload
diego-la-monica -
Category
Technology
-
view
65 -
download
2
Transcript of Css stuffs #2
CSS - Stuffs #2Regole, selettori, parentele
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.
Diego La Monica - [email protected] - http://diegolamonica.info
Conformazione della regola di stile
color: red;
Regola di stile
Diego La Monica - [email protected] - http://diegolamonica.info
Conformazione della regola di stile
color: red;
Caratteristica da alterare dell’elemento interessato
dalla regola
Diego La Monica - [email protected] - http://diegolamonica.info
Conformazione della regola di stile
color: red;
Valore che la caratteristica assumerà
Diego La Monica - [email protected] - http://diegolamonica.info
Conformazione della regola di stile
color: red;
Terminatore della regola. È fondamentale. Se manca la
regola stessa e la successiva non verranno interpretate.
Diego La Monica - [email protected] - http://diegolamonica.info
Conformazione della regola di stile
color: red;
Separatore tra caratteristica e valore. È necessario.
In assenza di esso l’intera regola non sarà compresa.
Diego La Monica - [email protected] - http://diegolamonica.info
Applicare più regole
color: red;
background-color: white;
Una regola, un separatore!
Diego La Monica - [email protected] - http://diegolamonica.info
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
Diego La Monica - [email protected] - http://diegolamonica.info
Definire delle regole per gli elementi della pagina
xxx {color: red;background-color: white;
}Selettore
Diego La Monica - [email protected] - http://diegolamonica.info
Definire delle regole per gli elementi della pagina
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
Diego La Monica - [email protected] - http://diegolamonica.info
Definire delle regole per gli elementi della pagina
.class {color: red;background-color: white;
}Se il selettore è preceduto da un “.”, le regole saranno
applicate a tutti gli elementi di una specifica classe.
Diego La Monica - [email protected] - http://diegolamonica.info
Definire delle regole per gli elementi della pagina
.text-red {color: red;background-color: white;
}
Risultato:
Questo testo sarà rosso
Questo invece no
Questo sarà di nuovo rosso<p class="text-red">Questo testo sarà rosso</p><p>Questo invece no</p><p class="text-red">Questo sarà di nuovo rosso</p>
http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-2.html
Diego La Monica - [email protected] - http://diegolamonica.info
Definire delle regole per gli elementi della pagina
#id {color: red;background-color: white;
}Se il selettore è preceduto da un “#”, le regole saranno
applicate all’elemento sulla pagina con il dato id.
Diego La Monica - [email protected] - http://diegolamonica.info
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.
Diego La Monica - [email protected] - http://diegolamonica.info
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><p>Questo testo è
rosso</p></li><li>
<p>Anche questo</p><ul>
<li>Questo no</li></ul><ol>
<li><p>ed anche questo</p></li>
</ol></li>
</ul>
http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-3.html
Diego La Monica - [email protected] - http://diegolamonica.info
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
Diego La Monica - [email protected] - http://diegolamonica.info
Selezionare solo i nodi strettamente figli di qualcuno
ul > li > p{color: red;background-color: white;
}
<ul><li><p>Questo testo è rosso</p></li><li>
<p>Questo testo sì</p><ul>
<li>Questo no</li></ul><div><p>Nemmeno io</p></div><ol>
<li><p>E nemmeno questo testo è rosso</p></li>
</ol></li>
</ul>
http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-4.html
Diego La Monica - [email protected] - http://diegolamonica.info
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 +.
http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-5.html
Diego La Monica - [email protected] - http://diegolamonica.info
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 ~.
http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-6.html
Diego La Monica - [email protected] - http://diegolamonica.info
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.