Se sei solo imparare i CSS, si può essere vittima di un errore comune CSS newbie - scrive in sostanza la stessa regola più e più volte per diversi selettori. In questo articolo vi mostrerà come consolidare regole CSS simili.

istruzione

1 Quando si inizia un foglio di stile è possibile creare una regola per ogni elemento HTML come lo si aggiunge a una pagina o decide che si desidera per lo stile di esso. Questo può portare a regole di stile che essenzialmente si ripetono più e più volte la stessa cosa. Per esempio:

h1 {font-family: Arial, Helvetica, sans-serif;}
h2 {font-family: Arial, Helvetica, sans-serif;}
p {font-family: Arial, Helvetica, sans-serif;}
li {font-family: Arial, Helvetica, sans-serif;}

2 Nel caso dell'esempio nella Fase 1, il modo più semplice per consolidare le regole font-family è quello di utilizzare il selettore di corpo come questo:

body {font-family: Arial, Helvetica, sans-serif;}

Ora tutto sarà il font-family si desidera (se non diversamente specificato per alcuni elementi).

3 Un'altra dichiarazione CSS comune che viene ripetuta spesso è di circa colore. Per esempio:

h1 {color: # 333;}
h2 {color: # 333;}
h3 {color: # 333;}
h4 {color: # 333;}

4 Il modo per consolidare regole come nell'esempio precedente è quello di utilizzare un elenco separato da virgole di selettori, in questo modo:

h1, h2, h3, h4 {color: # 333;}

5

A volte, troppo CSS viene aggiunto al codice HTML. L'immagine fornisce un esempio.

6


Nell'esempio in passaggio 5, la soluzione è di spostare la designazione classe a un livello superiore nella HTML. Utilizzando l'esempio lista, che potrebbe essere la lista tag principale stesso, come nell'immagine.

7 Un altro modo per consolidare è con selettori discendenti. Ad esempio, invece di applicare una classe denominata "bodytext" per ogni paragrafo nella sezione della pagina che si considera il corpo principale, utilizzare un selettore discendente. Supponiamo che la sezione del corpo principale della pagina è un div chiamato "contenuto". Nel foglio di stile, scrivere una regola per: contenuti p {qualche regola}

e che verrà automaticamente aggiunto ad ogni paragrafo che si desidera essere un certo stile di "bodytext."