Includere i css
Con questa lezione iniziamo a vedere un po’ di codice. In particolare vedremo come inserire i css nelle nostre pagine.
Esistono 4 metodi per utilizzare i css:
- richiamarli direttamente nelle pagine come stile dell’elemento usando l’attributo style
- utilizzare l’elemento <style> nell’head dei nostri documenti XHTML
- richiamando una pagina di stili esterna attraverso l’elemento <link>
- utilizzando la direttiva @import in <style>.
Tutti e 4 i metodi permettono di fare la stessa cosa anche se con alcune differenze. Il vantaggio di utilizzare fogli di stili esterni è comunque notevole: nel caso in cui volessimo cambiare look ad un documento ci basterà modificare il foglio di stile.
Molto simile è il comportamento della direttiva @import che in più esclude alcuni vecchi browser che non hanno implementato i css in modo corretto.
Personalmente è il metodo che preferisco.
Gli altri due metodi ci possono esser utili per provare al volo ciò che abbiamo pensato: son molto veloci e pratici per tale motivo ma non mi sento di consigliarveli se non in casi particolarissimi che approfondiremo in seguito.
Altro punto importante che iniziamo ad accennare è l’ereditarietà e la priorità delle regole impostate dai css: se diamo due stesse regole allo stesso elemento, magari una nel foglio di stile esterno ed una nell’elemento <style> il motore interpreterà quello a maggior priorità.
In tal caso la regola inserita in <style> andrà a sovrascrivere quella del css esterno. Non preoccupatevi comunque anche questo argomento sarà richiamato successivamente.
Ritorniamo all’argomento principale di questa lezione e vediamo come inserire praticamente i nostri stili.
1. Richiamare i css nelle pagine utilizzando l’attributo style.
L’uso in tal caso è molto semplice.
Supponiamo di voler colorare di rosso un paragrafo. Con questo metodo basta dichiarlo direttamente nell’elemento <p>:
<p style=’color:red’>Hello World!</p>
ed il gioco è fatto.
2. Utilizzare l’elemento <style> nell’head dei nostri documenti XHTML.
Con questo metodo è sufficiente inserire le proprietà direttamente nell’ head:
<html>
<head>
<style type=’text/css’ media=’all’>
p {color:red; }
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Style può avere due attributi:
type obbligatorio, che ha la funzione di specificare il tipo; in pratica sarà però sempre e solo text/css e media che serve a specificare a quale piattaforma applicare un foglio di stile (ci torneremo in seguito).
3. richiamare una pagina di stili esterna attraverso l’elemento <link>.
<link rel=’stylesheet’ type=’text/css’ href=’css.css’ media=’all’>
Questo metodo prevede 4 possibili attributi:
type e media con la stessa funzione appena vista, href che serve a specificare i percorso del foglio di stile (obbligatorio) e rel che specifica la relazione tra il foglio di stile ed il documento html. Può assumere due valori: stylesheet e alternate stylesheet.
4. utilizzare la direttiva @import in <style>
Questo metodo, il mio preferito, prevede di indicare il percorso del foglio di testo entro parentesi tonde nell’elemento style nella forma
<style>
@import url(http://miosito.ext/css.css);
</style>
Maggiori approfondimenti potrete trovarli per questo metodo nel prossimo articolo.
Abbiamo imparato come inserire i css nelle nostre pagine: prossimamente vedremo come sfruttare i css nel massimo della loro potenza. Prima però occorrerà iniziere a capire la classificazione degli elementi di un documento. Tutto questo lo vedremo in una delle prossime lezioni.
[…] Come si inserisce il foglio di stile esterno? O usando il tag <link> o usando <style> con la direttiva @import. Qui trovi un mio articolo che cerca di spiegarlo[…]
22 ottobre, 2007 - 4:54 am[Permalink]
[…] Per i css vi rimando a questo articolo che vi spiegherà 4 metodi diversi per la loro inclusione. […]
1 novembre, 2007 - 11:33 pm[Permalink]