regola di selezione dei nodi di un documento HTML di cui si vuole modificare lo stile
proprietà (dei nodi HTML selezionati) di cui si vuole cambiare il valore
01 | <html> |
02 | <head> |
03 | <title>example</title> |
04 | <style> |
05 | .warning { |
06 | background-color: red; |
07 | color: black; |
08 | font-size: 8pt; |
09 | } |
10 | </style> |
11 | </head> |
12 | <body> |
13 | <div id="sidebar"> |
14 | <a href="http://learn.alcacoop.it">Link text</a> |
15 | <span class="warning">warning message</span> |
16 | </div> |
17 | </body> |
18 | </html> |
01 | <html> |
02 | <head> |
03 | <title>example</title> |
04 | <link rel="stylesheet" type="text/css" href="test.css"> |
05 | </head> |
06 | <body> |
07 | <div id="sidebar"> |
08 | <a href="http://learn.alcacoop.it">Link text</a> |
09 | <span class="warning">warning message</span> |
10 | </div> |
11 | <div id="footer" class="warning">random text</div> |
12 | </body> |
13 | </html> |
1 | p {color: green;} |
consente di modificare lo stile di tutti i tag di quel tipo presenti nel documento
1 | #sidebar {...} |
l’id associato ad un nodo deve essere unico all’interno del documento… ma il browser non effettua nessun controllo sull’unicità di tale identificativo e quindi
la presenza di più nodi con il medesimo id può generare problemi di rendering o interazione
1 | .warning {...} |
consente di selezione un gruppo di nodi attraverso una delle classi associate
1 | #sidebar, #footer {...} |
consente di associare lo stesso corpo di configurazione CSS ad un insieme di selettori
1 | #sidebar a {...} |
consente di selezionare dei nodi sulla base della loro posizione all’interno della struttura ad albero di un documento HTML
1 | a:hover {...} |
ricoprono selezioni non rappresentabili altrimenti come la selezione dei link visitati (pseudo classes) o la selezione di elementi non rappresentati da elementi HTML veri e propri (pseudo elements), come ‘first-letter’ o ‘first-line’
