Eredita proprietà css

Question

Ho solo una conoscenza di base di CSS, è possibile ereditare una proprietà da uno stile in un altro stile. Quindi, ad esempio, potrei ereditare la dimensione del carattere specificata nelle mie impostazioni predefinite dei tag di paragrafo nei miei tag hyperlink.

Il motivo per cui voglio farlo è rendere più semplice il mantenimento di più stili.

Answer 1

Puoi definire stili comuni per due elementi contemporaneamente in questo modo:

p, a {
    font-size: 1em;
}

E poi estendi ognuno con le loro proprietà individuali come vuoi:

p {
   color: red;
}

a {
   font-weight: bold;
}

Ricorda: gli stili definiti in seguito in un foglio di stile generalmente sostituiscono le proprietà definite in precedenza.

Extra: se non l'hai già fatto, ti consiglio di ottenere Firebug estensione Firefox in modo da poter vedere quali stili ricevono gli elementi sulla tua pagina e dove sono ereditati da.

Answer 2

Nessun CSS non ha alcun modo di ereditare gli stili. Esistono diversi modi per condividere gli stili. Ecco alcuni esempi:

Uso di più classi

<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>

p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

Usa l'operatore virgola nei tuoi stili

<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>

p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

Uso degli elementi contenitore

<div class="container">
  <p class="first">Some text</p>
  <p class="middle">More text</p>
  <p class="last">Yet more text</p>
</div>

div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

Nessuno di questi è esattamente ciò che stai cercando, ma l'utilizzo di queste tecniche ti aiuterà a ridurre al minimo la duplicazione CSS.

Se si desidera utilizzare il codice lato server per preelaborare il CSS, è possibile ottenere il tipo di eredità CSS che si sta cercando.

• http://wiki.framwurk.org/documents:csspp/
• http://mail.python.org/pipermail /python-list/2006-August/397266.html
• http://www.shauninman.com/archive/2008/05 / 30 / check_out_css_cacheer

Answer 3

Sì.

Dovresti capire come funziona la cascata nei CSS e anche come funziona l'ereditarietà. Alcuni stili erediteranno (come la faccia del carattere) e alcuni stili (come il bordo). Tuttavia, puoi anche dire agli stili di ereditare dai loro elementi principali all'interno del DOM.

Di aiuto qui è la conoscenza di come vengono specificate le regole di stile. Questo sito sulle CSS Specifity Wars potrebbe aiutare (Nota: questo sito è attualmente inattivo, ma si spera che tornerà presto).

Inoltre, trovo che a volte aiuti a sovraccaricare stili come questo:

h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...

Answer 4

" ... è possibile ereditare una proprietà da uno stile in un altro stile. Quindi, ad esempio, potrei ereditare la dimensione del carattere specificata nelle impostazioni predefinite dei tag di paragrafo nei miei tag hyperlink. & Quot;

I tag di collegamento utilizzeranno automaticamente i caratteri del paragrafo, se, e solo se, sono all'interno di un paragrafo. Se sono al di fuori di un paragrafo (diciamo in un elenco) non useranno lo stesso carattere, ecc.

Ad esempio questo css:

* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }

genererà collegamenti e paragrafi con dimensioni di .75em. Ma mostrerà collegamenti all'interno di paragrafi a circa .56em (.75 ??* .75).

Oltre al riferimento alla specificità citato da Jonathan Arkell, raccomando il Tutorial CSS presso W3Schools.

Answer 5

I CSS erediteranno automaticamente dallo stile principale. Ad esempio, se dici nel tuo stile di corpo che tutto il testo dovrebbe essere #EEE e il tuo sfondo dovrebbe essere # 000 allora tutto il testo, sia esso in un div o in un intervallo sarà sempre #EEE .

Si è parlato un po 'dell'aggiunta dell'ereditarietà nel modo in cui descrivi in ??CSS3, ma quella specifica non è ancora stata pubblicata, quindi al momento siamo bloccati a ripeterci un bel po'.