2015-07-12 16 views
5

Avevo studiato in precedenza che il css incorporato sovrascrive i css esterni. Ma ho scoperto che, a seconda di cosa si verifica per ultimo nel codice, prevalgono questi stili.Il css incorporato sovrascrive sempre i css esterni?

Si prega di consultare il seguente codice: (Considerando che ho usato il colore: verde; in CSS esterno per H3)

<head> 
<link rel=stylesheet href="style.css"> 
<style> 
h3{ 
color:red; 
} 
</style> 
</head> 

uscita del codice di cui sopra mi mostrerà qualsiasi testo che scrivo dentro h3 in colore rosso .

Ma se scrivo il codice precedente in questo modo: -

<head> 
    <style> 
h3{ 
color:red; 
} 
</style> 
<link rel=stylesheet href="style.css"> 
</head> 

Nel caso di cui sopra, ottengo il colore del testo all'interno h3 come "verde" (da quando ha assunto ho dato "verde" come carattere -colore in css esterno).

Questo perché ho scritto il tag "link" dopo il tag "style".

Quindi, ciò significa che il css esterno non è sempre sovrascritto da css incorporato.

Oppure è una regola scrivere il tag "link" sempre prima del tag "style" in "head".

Spiegare questo punto.

+1

Dove e come hai studiato che "il css incorporato sovrascrive i css esterni"? –

+1

Sono sicuro che ciò che ha letto come "incorporato" si riferiva agli stili in linea tramite l'attributo *** di stile universale *** e lo confondeva con lo stile *** tag ***. – connexo

+0

@torazaburo, l'ho letto qui: http://www.boogiejack.com/CSS_2.html –

risposta

7

Non importa se il foglio di stile è compreso tra <style> -tags o esternamente e collegato a <link />. L'ultimo ha sempre la precedenza, potrebbero anche essere nello stesso file esterno, in realtà solo l'ordine dei selettori e la loro materia specificities.

Tuttavia, linea CSS utilizzando l'attributo style=".." ha sempre la precedenza, perché è più specifico. Per sovrascriverlo, è necessario utilizzare !important. Le proprietà in style=".." utilizzando !important non possono essere sovrascritte.

+3

I CSS incorporati hanno la precedenza solo perché è più specifico, non a causa dell'ordine. In HTML5 puoi avere tag 'style' all'interno del corpo in alcuni casi, ma posizionarlo dopo l'elemento a cui si applica non gli dà la precedenza sui CSS in linea. – Guffa

+0

@kelunik,. "Non importa se il tuo foglio di stile è in linea o esterno" -> al posto di "in linea" dovrebbe essere "incorporato". "Tuttavia, CSS incorporato che utilizza lo stile =" .. "" Al posto di "incorporato" dovrebbe essere "in linea" –

0

Dopo tutte le regole del css, se ci sono 2 con la stessa specificità, l'ultimo definito prenderà il sopravvento.

Ad esempio, scrivendo:

div { 
    background: green; 
} 


div { 
    background: red; 
} 

si accende di rosso indipendentemente dalla fonte.

+0

"precedence" -> "specificity" – steveax

+0

Grazie, la parola mi ha eluso – PiniH

3

Le regole CSS applicate dipendono dalla specificità della regola CSS, in cui viene inserita tale regola e dalla presenza di !important. Se vengono poste due regole contraddittorie, la regola dichiarata in seguito sovrascriverà la regola precedente. Se due regole contraddittorie vengono dichiarate con selettori di varia specificità, gli stili più specifici vinceranno, indipendentemente dal posizionamento. Se una regola è contrassegnata come !important ad es.

la regola !important vincerà sempre.

Per riferimento l'elenco delle specificità dei selettori CSS va come questo (da più specifica alla meno):

  1. attributi di stile
  2. ID
  3. Class, classe di pseudo, attribuire
  4. Elementi
+0

Certo, ma questa domanda non riguardava né specificità né importanza. –

+0

Ma si trattava della gerarchia CSS; quali regole hanno la precedenza sugli altri. Stavo solo cercando di estendere la mia risposta per essere una spiegazione completa di quali fattori vengono considerati quando vengono dichiarate regole CSS contraddittorie. – Tim

+0

Ma non hai detto nulla sulla priorità css embedded ed esterna che era la domanda principale –

1

Non importa se è incorporato o meno. gli stili sono applicati in base a Cascading order