Selettori CSS

Sintassi

Tutti gli stili CSS sono composte da 3 parti: un selettore, una proprietà e un valore. Per mantenere in linea con le regole di formattazione XHTML tutto il codice CSS devono essere scritte in minuscolo.

CSS sintassi

• Selettore: definisce quali tag HTML stanno per ricevere le regole CSS. Per cambiare lo stile di tutti i paragrafi che si può scrivere p {property:value} .
• Immobile: Questo è lo stile CSS si desidera applicare. Per cambiare il colore del testo di tutti i punti si può scrivere p {color:value} .
• Valore: il valore della proprietà. Per rendere tutto il testo punto rosso si può scrivere p {color:red} .

Istruzioni CSS possono avere più di una proprietà: coppia di valori separandoli con una virgola ; .

Proprietà multiple: coppie di valori

Proprietà desidera è possibile fornire almeno un valore, ma a volte può più accettare. Valori multipli possono essere separati da spazi che significa che tutti i valori sono utilizzati per la proprietà. Oppure possono essere separati da virgole il che significa che una serie di valori è stato suggerito e il primo caso viene utilizzato.

Space-separated values

Dichiarazione di cui sopra CSS utilizza tutti e 3 i valori per rendere punti con un 5 pixel ampio bordo rosso.

Valori separati da virgole

Dichiarazione di cui sopra CSS propone 3 caratteri da utilizzare per punti, da sinistra a destra. Nel caso in cui non Verdana è disponibile sul sistema dell'utente cercherà di utilizzare Arial e se quello non riesce, anche, si farà ricorso ad un generico sans-serif.

Multiple selettori

Invece di scrivere la regola CSS stessa per ogni tag HTML che whish di applicarlo, è possibile raggruppare i selettori e separarli da virgole. Questo rende il codice CSS estremamente compatto e efficiente.

Lo stesso stile per ogni selettore (cattivo)

Selettori raggruppati (buono)

Contestuale selettori

Se si applicano gli stili ad un selettore di punto, tutti i paragrafi saranno interessate. Che cosa succede se si desidera modificare solo i paragrafi all'interno di elementi di una lista? In tal caso è necessario selettori contestuali che si applicano solamente una regola CSS, se si verifica un tag in un certo contesto. Un selettore contestuale viene creato l'elenco dei tag nell'ordine nidificato in cui dovrebbe comparire nel documento.

Contestuale selettori

Nel precedente esempio, elementi punto solo <p> interno elementi di una lista <li> ottenere un testo rosso e solo testo enfatizzato <em> in <h1> rubriche ottiene uno sfondo grigio.

Commenti

A volte può essere utile per mettere i commenti CSS accanto ad alcune dichiarazioni per spiegare che cosa stanno facendo. Questi commenti vengono ignorati dai browser web, ma aggiungere ancora fino alle dimensioni del file (a differenza di linguaggi di programmazione come PHP, dove i commenti non sono parte del risultato finale).

CSS commento

Compatibilità Browser

Tutti gli attuali browser web più importanti il supporto di entrambi i tipi di selettori quindi potete tranquillamente usarli. Ci sono alcune più avanzate selettori CSS che non sono tutti supportati dai browser come Internet Explorer (si veda un modello qui?). Essi saranno trattati nel CSS avanzato tutorial.