progettisti di siti che desiderano conformarsi alle linee guida rigorose XHTML specificati dal World Wide Consortium internet di solito aggiungere Cascading Style Sheets al loro codice. Poiché le linee guida del W3C vietano in linea attributi come carattere e colore, è necessario utilizzare i CSS per personalizzare gli elementi Web. CSS consiste di ID, classe e altri tipi di selettori. I browser li applicano a elementi della pagina in base a una gerarchia specifica.

Classe Selector

Un selettore di classe consente di creare una classe denominata come BigBox. Definire attributi della classe, come mostrato nel seguente esempio:

.bigBox {background-color: red; border-color: blue}

Ogni elemento della pagina fa riferimento la classe BigBox acquista uno sfondo rosso e un bordo blu. L'elemento div mostrato di seguito fa riferimento alla classe BigBox:

<Div class = "bigBOX"> </ div>

selettori di classe compaiono tra una apertura tag <style> e di chiusura </ style> tag in un documento HTML. Aggiungere il numero di classi che vuoi al documento.

ID Selettore

progettisti di siti spesso aggiungono attributi ID di elementi della pagina. Un ID rende possibile per il supporto JavaScript per accedere e manipolare un elemento. L'elemento div mostrato di seguito ha un ID il cui valore è ID1.

<Div id = "div1">

linee guida del W3C richiedono nomi degli attributi, quali ID, ad apparire in minuscolo. Una funzione JavaScript potrebbe accedere a questo div eseguendo la seguente dichiarazione.

var divObject = document.getElementById ( "div1").

Hai anche la possibilità di utilizzare il nome ID di un elemento come selettore CSS. Un selettore di ID può definire attributi nello stesso modo che una classe li definisce. Posizionare un cancelletto davanti ad un ID quando si utilizza come un selettore CSS.

ID e Classe Gerarchia

Molti progettisti di siti spesso aggiungono i nomi delle classi e gli ID di elementi della pagina Web. A volte gli ID associati elementi hanno attributi CSS e altre volte non lo fanno. Se il vostro elemento ha riferimenti una classe CSS e un ID che ha gli attributi CSS, un conflitto può verificarsi, come mostrato nell'esempio seguente:

.bigBox {background-color: red; border-color: blue}

div1 {background-color: verde; border-color: Bianco}

Entrambi i selettori di impostare i colori di un elemento, ma quei colori sono diversi. A meno che non si capisce la gerarchia di ID e classe, non si può sapere come un browser potrebbe risolvere questo conflitto.

Risoluzione gerarchia

Quando un elemento del browser fa riferimento a un ID e una classe i cui attributi non il conflitto, il browser utilizza tutti gli attributi per lo stile dell'elemento. Ad esempio, se un ID definisce un bordo rosso e una classe definisce un font Arial, il browser applica entrambi gli stili all'elemento. Se ID e la classe definiscono la stessa proprietà, gli stili del browser l'elemento con valore di attributo della ID e ignora quello definito nel selettore di classe. progettisti di siti fanno riferimento a questa decisione del browser gerarchica processo di produzione come specificità.