CASCADING STYLE SHEET (CSS)
Fogli stile
Il CSS consente di associare regole stilistiche agli elementi del codice HTML come <p> o <a>. Queste regole definiscono l’aspetto rappresentativo degli elementi HTML a cui vengono applicati, come il colore o il carattere tipografico.
[D]
LE REGOLE CSS
I fogli di stile sono un insieme di regole, le quali istruiscono il browser su come rappresentare le diverse proprietà dei vari elementi del documento HTML. Una regola CSS è strutturata come rappresentato seguito :
selettore {
proprietà: valore;
proprietà: valore;
proprietà: valore;
}
Esempio: p { font-size: 1em; }
p = selettore
{ font-size: 1em; } = dichiarazione
font-size =proprietà
1em =valore
La parentesi graffa si inserisce tenendo premuto il tasto ALT e digitando sul tastierino numerico 123 "{" e 125 "}"
La regola sopra riportata è costituita da un selettore e una dichiarazione chiusa fra parentesi graffe "{ }". Il selettore specifica a quale elemento del do-cumento HTML deve essere applicata la regola. La dichiarazione è costituita da una proprietà, la quale specifica quale aspetto del selettore deve essere regolato, e un valore, separato dalla proprietà dal carattere ":", che specifica lo stile che deve essere assunto dalla proprietà a cui è associato. Ogni regola può essere associata a uno o più selettori separati da una virgola e può essere costituita da più dichiarazioni separate dal carattere ";".
RAGRUPPAMENTO
È molto utile e di uso comune assegnare una regola a più selettori senza dover replicare il codice CSS che la riguarda. Basta riportare, prima della graffa aperta, tutti i selettori coinvolti separati da una virgola. Esempio:
selettore1, selettore2, selettore3 {
proprietà: valore;
proprietà: valore;
proprietà: valore;
}
Se il raggruppamento totale ha degli indubbi vantaggi, il raggruppamento parziale è da usare con cautela e solo sotto alcune semplici condizioni, cioè nel caso in cui le proprietà in comune siano una maggioranza significativa e le proprietà differenti siano al massimo una o due, e vengano specificate nel foglio di stile immediatamente sotto la regola di raggruppamento. Ecco un esempio in cui il raggruppamento parziale è accettabile:
selettore1, selettore2 {
proprietà: valore;
proprietà: valore;
proprietà: valore;
proprietà: valore;
}
selettore1 {
proprietà-x: valore;
}
selettore2 {
proprietà-x: valore;
}
SELETTORE DI TIPO (type selector)
Ridefinizione dei tag HTML
Le regole specificate tramite selettori di tipo verranno applicate a tutti le istanze di elementi associati ad un dato tag. In sostanza attraverso i selettori di tipo è possibile attribuire una regola di presentazione per i tag HTML. La regola dell' esempio seguente consentirà di mostrare tutti i paragrafi di una pagina HTML con sfondo giallo e testo blu.
p {
background-color: yellow;
color: blue;
}
SELETTORE DI CLASSE (class selector)
Serve quando si ha la necessità di associare ad uno stesso tag HTML differenti stili.Nei CSS i selettori class utilizzano "." (il punto)
p.centrato {
text-align: center;
}
In questo caso il paragrafo di classe CENTRATO avrà il testo allineato al centro; per richiamarlo nel foglio HTML si inserirà :
<p class=”centrato”> son il testo centroto </p>
Altro esempio:
.contenitore {
color: rgb(158,0,0);
border: 1px solid Red;
padding: 3px;
margin-top: 05em;
background: #f9f5de;
}
<p class=”contenitore”> sono un testo dentro un contenitore </p>
SELETTORE ID (id selector)
I selettori di ID permettono di assegnare una regola CSS ad un unico elemento nella pagina HTML che è specificato attraverso l' attributo ID. Comunemente sono utilizzati per applicare uno stile a BOX specifici. Nei CSS i selettori ID utilizzano “ # “ (il cancelletto)
CODICE CSS
#colonna-sx {
float: left;
width: 20%;
}
CODICE HTML
<div id="colonna-sx">
<!-- eccetera -->
</div>
Si può specificare un selettore ID nei seguenti modi:
#menu {
proprietà: valore;
proprietà: valore;
}
oppure
div#menu {
proprietà: valore;
proprietà: valore;
}