Css stuffs #2

CSS - Stuffs #2
Regole, selettori, parentele

Regole
La prima regola del Fight Club è …

Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Cos’è una regola di stile
È una regola che descrive la presentazione di
uno o più elementi presenti su un documento.

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;
}
Le regole che si riferiscono ad uno stesso oggetto sulla
pagina, sono raggruppate*
tra parentesi graffe.
* non possono esistere regole non raggruppate

Selettori
I want you! And you! And you too!

Definire delle regole per gli elementi della pagina
xxx {
color: red;
}
Selettore

div {
color: red;
}
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

.class {
color: red;
}
Se il selettore è preceduto da un “.”, le regole saranno
applicate a tutti gli elementi di una specifica classe.

.text-red {
color: red;
}
Risultato:
Questo testo sarà rosso
Questo invece no
Questo sarà di nuovo rossoQuesto testo
sarà rosso
Questo invece no
Questo sarà di
nuovo rosso

#id {
color: red;
}
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;
}
Saranno cercati tutti gli elementi li dentro a qualsiasi
tag ul.

Selezionare solo i nodi inclusi in altri nodi
ul li{
color: green;
}
ul li p{
color: red;
}
<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
parentela
Luke io sono tuo padre!

Selezionare solo i nodi strettamente figli di qualcuno
ul > li{
color: red;
}
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;
}
<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;
}
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;
}
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;
}
La virgola separa più selettori

Creative Commons BY-NC-SA 4.0
https://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.

Css stuffs #2

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (19)

Plus de Diego La Monica

Plus de Diego La Monica (20)

Css stuffs #2