Come utilizzare le classi CSS e ID

January 5

Come utilizzare le classi CSS e ID


L'uso corretto di ID CSS e le classi possono risparmiare tempo mantenere i suoi fogli di stile, risparmiare tempo agli utenti quando scaricano le pagine web più snella, e aiutare a scrivere stili in modo efficiente.

istruzione

Assegnazione di Nomi

1 Ci sono un paio di ID che sono usati molto comunemente nelle pagine web, ad esempio, il contenitore (o involucro), colpo di testa, il contenuto, la barra laterale, piè di pagina. Questi sono ottimi esempi di ID CSS, perché i nomi utilizzati sono auto-esplicativi. Essi descrivono lo scopo del div o elemento identificano.

2 Entrambi gli ID e le classi dovrebbero essere dati nomi autoesplicativi. Il trucco è quello di scegliere un nome che sarà auto-esplicativo nel corso del tempo.

Supponiamo, per esempio, che si dispone di un elemento della pagina che spiega le specialità del giorno. Si decide di rendere rosso. Si potrebbe o il nome "speciale", o si potrebbe chiamarlo "rosso".

Il nome "speciale" sarebbe una scelta migliore. Nel corso del tempo, la combinazione di colori potrebbe cambiare e un nome come "rosso" sarebbe fonte di confusione, ma un nome come "speciale" sarebbe ancora aiutare a riconoscere lo scopo della classe o ID.

3 Assicurarsi che i nomi selezionate verranno comunque dire qualcosa quando si ha bisogno di rivedere un foglio di stile non avete toccato per sei mesi o un anno. Coloro che saranno buone scelte.

Quando utilizzare classe o ID

4 Un ID può essere utilizzato solo una volta per pagina, per esempio, ci può essere un solo div in una pagina utilizzando il contenuto ID. Ma una classe può essere utilizzato più volte in una pagina. Ad esempio, si potrebbe avere diverse immagini su una pagina che utilizzano una classe chiamata "leftfloat," o forse "rightfloat."

5 Sulla base delle informazioni nella fase 1, si potrebbe pensare che si dovrebbe usare un sacco di classi e solo pochi ID. In realtà, è vero il contrario. Per markup più snella, che si desidera utilizzare le classi il meno possibile. Utilizzando un gran numero di classi ha anche un nome, come se fosse una malattia o qualcosa del genere. Si chiama classitis.

6 Le classi sono a volte necessarie. Ma a volte, dando un elemento di identità e quindi utilizzando un selettore discendente di indirizzare i figli di questo elemento crea molto meno codice che assegnare una classe per ogni elemento figlio avrebbe fatto.

7 Ad esempio, si supponga di avere alcuni collegamenti ipertestuali in un elenco. Si potrebbe stile i collegamenti assegnando una classe per ogni singolo anello della lista. Oppure si potrebbe assegnare un ID al contenitore lista (l'elemento UL o OL) e scrivere una regola mediante un selettore discendente. Supponiamo che si dà un UL un ID del tipo "subnav." Ecco un selettore discendente che lo stile del collegamento senza l'aggiunta di una classe al markup.

subnav ul a: link {} regola qui

8 Quando qualcosa si verifica ancora e ancora su una pagina in luoghi dove un selettore discendente non funziona, allora una classe è perfettamente bene per l'uso. Ho già citato l'esempio di utilizzo di una classe di galleggiare una immagine a sinistra oa destra in qualsiasi punto della pagina.

Supponiamo di avere diversi paragrafi per ogni articolo si descrive dal catalogo, ma si desidera uno dei paragrafi di essere in qualche modo diverso. Se fosse il paragrafo introduttivo è possibile assegnare ad una classe denominata "intro". Se fosse un paragrafo dare testimonianze degli utenti, è possibile assegnare ad una classe denominata "testimonial". Si potrebbe quindi creare uno stile per il .intro classe o la classe .testimonial che sarebbe distinguere tali punti particolari.

Consigli e avvertenze

  • I nomi delle classi e ID può essere sia scritto tutto in minuscolo (ad esempio, #subnav) o in caso di cammello (ad esempio, #subNav). Se si sceglie di utilizzare caso cammello, assicurati di digitare correttamente nel codice HTML, o un browser non riconosce la regola CSS.
  • Non ci possono essere spazi o una classe o un nome di ID. E 'bene usare una sottolineatura al posto di uno spazio.