Faq per CSS

[Giorgiotave]

Introduzione

Cosa sono i CSS?
CSS sta per Cascading Style Sheet, cioè Foglio di Stile a Cascata. Sono uno strumento di formattazione dei documenti per il web attraverso i quali è possibile manipolare e definire ogni aspetto della presentazione di una pagina.

Perchè usare i CSS?
Il primo vantaggio che introducono i CSS è quello di separare completamente contenuto e presenzione. Il secondo grande vantaggio è l' accessibilità: con i CSS si possono definire presentazioni differenti per ogni tipo di lettore, dai browser testuali agli smartphone.
Essendo il foglio di stile messo in cache dai browser, ed essendo per sua natura separato dal contenuto della pagina, si accorciano i tempi di caricamento. Per ultima cosa, ma non in ordine di importanza, facilitano il posizionamento nei motori di ricerca.

Dove posso imparare?
Esistono molte valide guide in rete:
http://css.html.it/guide/leggi/2/guida-css-di-base/
http://www.webmasterpoint.org/css/
http://www.risorse.net/css/
E per ogni tuo dubbio c'è la sezione CSS del Forum GT

Regole, Sintassi e Proprietà

Che cos'è un selettore?
Il selettore identifica a quali parti del documento Xhtml applicare determinate proprietà.
La sintassi generica è la seguente:

 selettore {proprietà: valore;
        proprietà: valore;
        ...    }

Quanti e quali tipi di selettori esistono?

• selettori TAG
• selettore ID
• selettori di classe

Cosa sono i selettori di TAG? Come posso fare in modo che tutti gli elementi di un certo tipo, abbiamo determinate proprietà?
I selettori TAG usano come selettore, direttamente il nome del tag. In questo modo a tutte le istanze di quel tag all'interno del documeto Xhtml verranno applicate le proprietà definite.

• Esempio:

 p { color:#999;  font-size:11px;    } 

In questo esempio il testo di tutti i paragrafi (<p>) saranno di colore grigioscuro (#999) e di dimensione 11px

Cosa sono i selettori ID?
I selettori ID servono per selezionare un particolare elemento all'interno di un documento Xhtml, identificato appunto, da un identificativo univoco, specificato nell'attributo id=”nomeId”.
Esempio:
nell'Xhtml:

 <div id=”piedipagina”>
    <h4>Infomazioni utili.</h4>
</div>

nel css:

 #piedipagina{    background-color:#CC0066;}

in questo caso, il div piedipagina, avrà uno sfondo di colore rosa.

Posso avere due id con lo stesso nome?
No, l'id deve essere univoco all'interno del documento Xhtml;

Il nome dell'id può contenere sia lettere che numeri?
Il valore dell'attributo id può contenere lettere e numeri, ma non può cominciare per numero o contenere solo numeri.

Cosa sono i selettori di Classe?
I selettori di classe consentono di assegnare le stesse proprietà a uno o più elementi identificabili nel documento Xhtml dotati dell'attributo class=”nomeclasse”.
Esempio:
nell'Xhtml:

 <p class=”pippo”>Questa</p>
<p>prova</p>
<p class=”pippo”>funziona!</p>

nel css:

 .pippo{    font-weight:bold;}

in questo caso, il primo (“Questa”) e il terzo (“Funziona!”) paragrafo risulteranno in grassetto.

Quando mi conviene usare gli id? E quando le classi?
Dipende! Potenzialmente è possibile utilizzare indistintamente l'uno o l'altro tipo di selettore, tuttavia ci sono delle restrizioni, dovute alle loro proprietà intrinseche. Ad esempio la frequenza nel documento Xhtml: mentre l'Id deve essere univoco (quindi un solo elemento può avere quell'identificativo), la classe può essere usata su più elementi diversi.

I selettori possono essere combinati?
E' possibile combinare l'uso dei selettori, per raffinare i criteri di scelta dell'elemento Xhtml. Ad esempio poniamo il caso di avere due div che contengono rispettivamente un titolo e due paragrafi di testo.

 <div id="primo">
    <h2>Primo testo in (finto) latino </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. </p>
</div>
<div id="secondo">
    <h2>Secondo testo in (finto) latino </h2>
    <p class=”importante”>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>

se volessimo fare in modo che solo i paragrafi del div identificato come “primo” risultassero di colore rosso, possiamo scrivere nel foglio di stile:

 #primo p{    color:#FF0000;}

Posso utilizzare le stesse proprietà, per due selettori diversi?
Si! Se voglio attribuire le stesse proprietà a elementi che sono identificati da selettori differenti, è possibile farlo separando i selettori con una virgola:
selettore1, selettore2 { proprietà:valore; proprietà: valore} E' buona norma utilizzare questo tipo di scrittura, poiché scrittura presenta il vantaggio di rendere il codice facilmente modificabile.

Che cosa sono gli elementi block e in-line?
I tag contenuti nel body possono essere di due tipi: block o in-line. Genericamente il W3C identifica gli elementi in-line come elementi a livello di testo (possono contenere solo testo, o altri elementi in-line), mentre gli elementi block, possono contenere sia altri elementi block, sia diversi elementi in-line.
Per default, i browser visualizzano gli elementi block con un'interlinea dall'elemento li precede. Per questo è facile immaginare gli elementi block come aree rettangolari, mentre gli elementi in-line assumeranno la forma del testo o dei blocchi che li contengono.

Che differenza c'è tra <span> e <div>?
Div e span sono due tag che identificano due contenitori generici. Si differenziano fra loro, poiché il primo è un elemento in-line, il secondo è un elemento block.
Esempio:

 <div><p>Oggi splende il <span>sole</span>.</p></div>

Perché è importante sapere se un elemento è di tipo blocco, o di linea?
Lavorando con i CSS è importante conoscere se il selettore a cui attribuiamo determinate proprietà si riferisca ad un elemento in-line o di tipo block. Questo poiché determinate proprietà sono esclusive degli elementi block, e se applicate ad elementi in-line, non hanno alcun effetto!
Ad esempio in relazione al codice della domanda precedente(n.17):

 span {    border:1px solid red; height:150px;} 

La parola “sole” apparirà bordata di rosso (proprietà definita dal border), ma non sarà alta 150 px!

Un elemento in-line, può comportarsi come elemento block, o viceversa?
Attraverso la proprietà display, è possibile modificare la “natura” di un elemento da block a in-line o viceversa.

 span{    dispay:block; height:150px;}

In questo caso, la proprietà relativa all'altezza verrà considerata valida.

Cos'è l'ereditarietà?
L'ereditarietà è il meccanismo grazie al quale gli stile vengono applicati non solo ad uno specifico elemento, ma anche ai suoi figli. Se per esempio applichiamo un colore per il testo di un paragrafo, quel colore si applicherà anche per tutti gli elementi figli:

<p style="color: green">Questo testo è verde. <strong>molto</strong> <em>verde</em></p>

Tutte le propietà vengono ereditate?
No. Alcune proprietà non trarrebbero vantaggio dall'essere ereditate. È il caso di border, float, etc.. Fate sempre riferimento alle specifiche w3c.

Sviluppo, Testing & Debug

Perché la resa su Internet Explorer (specialmente la versione 6) è diversa da Mozilla?
Perché utilizzano diversi modi di visualizzazione dell'xhtml e delle loro proprietà e in generale Internet Explorer non implementa ancora tutti gli standard.

Su quali browser è necessario controllare la resa del foglio di stile in fase di sviluppo?
In linea teorica, il sito dovrebbe vedersi correttamente su TUTTI i browser. In realtà possiamo ridurre il campo di osservazione, testando le pagine su un numero ristretto di prodotti e, ragionevolmente, pensare che per induzione funzionino anche sugli altri prodotti simili. Ecco la lista dei browser che non devono mancare.

• Ms Internet explorer 6: è la vera bestia nera del web designer. E’ ancora molto diffuso, ed è condizione NECESSARIA testarvi i vostri lavori.
• Ms Internet explorer 7: è il nuovo nato di casa Ms. Non è ancora diffuso, ma sta lentamente sostituendo il precedente.
• Mozzilla Firefox: è il browser più diffuso della famiglia Mozzilla, è multi piattaforma (win, linux e mac) e offre una vasta gamma di componenti aggiuntivi molti dei quali studiati appositamente per lo sviluppo web.

Per i perfezionisti anche;

• Safari (per mac, in beta anche una versione per Wind.): se il sito si vede in maniera corretta Firefox per mac, le probabilità che funzioni nella stessa maniera anche su safari sono buone.
• Opera (win, linux e mac)

E' davvero importante controllare la resa su browser diversi da IE, infondo è il più diffuso!?!
Si, è davvero importante. Sia per una questione “etica” sull'accessibilità e fruibilità dei contenuti da parte di tutti i possibili utenti, sia per una questione di professionalità.

Non dispongo di una macchina Windows, come posso testare il sito su IE?
Si. Esistono diversi servizi on-line che danno la possibilità di avere degli screenshot del sito da parte di diverse versione di browser. Ne è un esempio il Total Validator che fornisce il servizio screenshot, oltre alla validazione delle pagine.
http://www.totalvalidator.com/validator/ValidatorForm

Come posso collegare un foglio di stile valido solo per IE?
E' possibile specificare un foglio di stile, le cui proprietà siano applicate agli elementi della pagina, solo nel momento in cui l'utente utilizza il browser Internet Explorer.
Basta aggiungere nell'head dell'html il seguente codice:

 <!--[if IE 6]> 
        <style type="text/css" media="screen">@import "ie6.css";</style>
        <![endif]-->
 <!--[if IE 7]>
        <style type="text/css" media="screen">@import "ie7.css";</style>
        <![endif]-->

dove ie6.css e ie7.css rappresentano rispettivamente i file di stile per il due browser.


Ci sono dei plugin per browser, utili in fase di sviluppo di fogli di stile?
Si. Ad esempio Firefox mette a disposizione una vasta gamma di addOn, validatori, visualizzatori per IE e molti altri. Fra le più utili per lo sviluppo web:

• Web Developer Tool che permette di agire direttamente sulla visualizzazione dello stile;
• CSS Validator: consente la convalida del foglio di stile, secondo le regole del W3C.
• IE view: permette di visualizzare una pagina con IE, dentro Mozilla Firefox

Note

Hanno contribuito a queste FAQ: Meryk, Laburno.
Ultima revisione: 10/09/2007

Hai trovato un errore? Vuoi proporci una FAQ o vuoi scriverne una tu? Contatta i moderatori: il contributo di tutti è sempre benvenuto.