Fogli di stile CSS può semplificare la progettazione Web separando design dalla struttura delle pagine HTML. Conoscere le differenze tra diversi selettori CSS può ulteriormente semplificare i fogli di stile e liberare larghezza di banda. Selettori classe e composti è possibile utilizzare le regole CSS per formattare il contenuto della tua pagina, ed è possibile utilizzarli insieme per migliorare le tue pagine Web.

Tipi di selettore CSS

Un selettore CSS applica le proprietà di stile, ad esempio lo stile di colore, posizionamento o un carattere, a un elemento HTML. Ci sono molti tipi di selettori, offrendo un controllo di elementi specifici come campi modulo e proiettili. È possibile utilizzare selettori di tag per applicare una formattazione specifica a qualsiasi testo all'interno di tag HTML specifici, o ID selettori per applicare la formattazione agli elementi HTML < div > unici. Alcuni selettori, come selettori di classe e tag, possono lavorare insieme, mentre altri come selettori ID ignorare altri selettori. In versione CSS 2 e versioni successive, selettori possono contenere istruzioni condizionali.

Selettori di classe

Un selettore di classe CSS utilizza un nome univoco che si inserisce il codice HTML e inizia con il nome della classe preceduto da un periodo. Ad esempio, un selettore di classe potrebbe essere come questo:

.MyClass {font-size: 90%; font-weight: bold;}

Viene applicata la classe aggiungendo il nome della classe per ogni elemento HTML che si desidera applicarlo. Ad esempio, è possibile applicare la classe di cui sopra a un paragrafo:

< classe p = "myclass" > questo è il testo in stile da questa classe. </p >

Se il tag < p > viene formattato utilizzando un selettore di tag, che la formattazione si applicano anche al paragrafo precedente.

Selettori di composti

Un selettore composto non è un tipo di selettore unico; invece si riferisce ad una combinazione di due o più selettori. Compound selettori combinare formattazione comune come il tipo di carattere utilizzato in tutti i tag di intestazione di una pagina:

H1, h2, h3 {font-family: verdana, sans-serif}

È quindi possibile formattare elementi quali la dimensione del carattere come selettori di tag distinti.

Un selettore composto consente inoltre di specifici elementi di stile all'interno di altri elementi. Ad esempio, il seguente foglio di stile si applicherebbe a qualsiasi tag < b > all'interno della classe "myclass":

.MyClass b {color: #333333;}

Mentre il termine "selettore composto" è usato dai progettisti e in HTML editor come Adobe Dreamweaver, la specifica di selettori W3C non fa riferimento ad per aggravare i selettori, invece riferendosi al "raggruppamento" e "discendenti."

Regole di selettore composto

Quando si utilizza un selettore composto ai tag di gruppo con elementi comuni, utilizzare sempre una virgola tra ciascun tag. Quando si utilizza un selettore composto per specificare la formattazione in elementi nidificati, includere l'elemento più ampio come una classe o un ID prima e quindi l'elemento per essere nidificato al suo interno, ad esempio un tag. È possibile utilizzare due tag, classi o due ID, ma ricordate che all'interno del codice HTML il secondo deve essere contenuto all'interno del primo per il selettore composto per fare il suo lavoro.