I fogli di stile (Cascadin Style Sheets) servono per gestire il layout di una pagina, cioè la sua presentazione - i colori dello sfondo e dei testi, le immagini di sfondo, il posizionamento delle colonne e di altri elementi sulla pagina, ecc.
Come si creano?
Per gestire il layout con i fogli di stile non scriviamo tutto nello stesso file, ma dobbiamo creare uno nuovo, che poi colleghiamo con il file html a cui si riferisce.
Se usiamo il programma Coffeecup HTML Editor, a seconda della versione
o apriamo Nuovo foglio di stile, o New blank page e cancelliamo tutto, dopo di
che lo nominiamo con .css.
Come collegarli al file html?
Siccome noi usiamo fogli di stile esterni, per farli riconoscere dal file .html, nella <head> dobbiamo inserire la seguente informazione:
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<head> <link href="stile.css" rel="stylesheet" type="text/css"> </head>
In tale modo il file .html riconosce il proprio file .css
Selettori di base dentro i fogli di stile:
Dentro i fogli di stile si può lavorare su tre
tipi di selettori:
1. tag semplice (selettore di elementi) - è il più semplice dei selettori. È costituito dal nome di uno specifico
elemento HTML. Serve a selezionare tutti gli elementi di quel tipo
presenti in un documento.
-
sintassi - selettore{attributo: valore;}
esempio:
p {background-color: yellow;} - che serve per fare lo sfondo dei paragrafi gialloÈ possibile nei CSS raggruppare diversi selettori al fine di semplificare il codice. I selettori raggruppati vanno separati da una virgola:
h1, h2, h3 {background: white;} - cosi tutti e tre gli elementi hanno uno sfondo bianco
2. id – ha la sintassi abbastanza semplice - basta far precedere il nome dal simbolo di cancelletto #:
Se, per esempio, nel file html abbiamo presente il seguente elemento :
<h1 id="titolo">...</h1>
Gli assegnamo il colore blu con la regola:
#titolo {color: blue;}
3.classi
