Usa più fogli di stile css nella stessa pagina html

Question

Come utilizzerei più fogli di stile CSS nella stessa pagina HTML in cui entrambi i fogli di stile hanno una classe banner, ad esempio. Come specifichi a quale classe ti stai riferendo?

Answer 1

Non è possibile controllare a quale referenziato, dato lo stesso livello di specificity nella regola (ad esempio, entrambi sono semplicemente .banner) il foglio di stile incluso per ultimo vince.

E 'per-proprietà, quindi se c'è una combinazione in corso (ad esempio si ha background, l'altra ha color), allora si otterrà la combinazione ... se una proprietà è definita in entrambi, qualunque essa sia la l'ultima volta che appare in un foglio di stile vince.

Answer 2

I fogli di stile sono, in effetti, concatenati in un singolo foglio di stile nell'ordine in cui appaiono nel codice sorgente HTML.

Il normal rules for applying rulesets quindi applicare (vale a dire dal specificity con l'ultimo set di regole che definisce una data proprietà vincente in caso di parità e !important gettando una chiave nelle opere)

Answer 3

Non si può mai fare riferimento a un foglio di stile specifico. Tutte le regole CSS in un documento sono fuse internamente in una.

Nel caso di regole in entrambi i fogli di stile che si applicano allo stesso elemento con la stessa specificità, il foglio di stile incorporato più avanti sostituirà quello precedente.

È possibile utilizzare un elemento di ispezione come Firebug per vedere quali regole si applicano e quali sono sovrascritte da altri.

Answer 4

Quello che si include per ultimo sarà quello che viene utilizzato. Si noti tuttavia che se alcune regole sono importanti nel primo foglio di stile avranno la priorità.

Answer 5

Pensa a come i tuoi fogli di stile si riferiscono a ("selezionare") elementi nella tua pagina HTML, non viceversa.

Answer 6

Non puoi e non farlo.

Verranno applicate tutte le regole CSS sulla pagina (l'HTML "non sa" nulla di questo processo) e le singole regole con la massima specificità verranno "incollate". La specificità è determinata dal selettore e dall'ordine in cui appaiono nel documento. Tutto sommato il punto è che questo fa parte della cascata . Dovresti fare riferimento a uno dei tanti tutorial CSS sulla rete.

Answer 7

Sì, è possibile includere più fogli di stile, ma è necessario etichettarli come fogli di stile alternativi e consentire all'utente di attivarli utilizzando JavaScript, magari facendo clic su un collegamento.

Per creare un foglio di stile alternativo:

<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" /> 

successivo creare un metodo nel file JavaScript che: 1. Caricare tutti i fogli di stile in un array 2. Esempio:

function getCSSArray() 
{ 
var links = document.getElementsByTagName("link"); 
var link; 
for(var i = 0; i < links.length; i++) 
{ 
    link = links[i]; 
    if(/stylesheet/.test(link.rel)) 
    { 
     sheets.push(link); 
    } 
} 

    return sheets; 
} 

Quindi passa attraverso l'array usando un tipo di ciclo if/else che disabilita i fogli di stile che non vuoi e abilita il foglio di stile che desideri. (È possibile scrivere un metodo separato o inserire il ciclo nel metodo sopra. Mi piace utilizzare il comando onload per caricare l'array CSS con la pagina, quindi chiamare il metodo printView.)

function printView() 
{ 
var sheet; 
var title1 = "printVersion"; 
for(i = 0; i < sheets.length; i++) 
{ 
    sheet = sheets[i]; 
      if(sheet.title == title1) 
    { 
     sheet.disabled = false; 
    } 
    else 
    { 
     sheet.disabled = true; 
    } 

Infine, creare il codice nel documento HTML che l'utente attiverà il metodo JavaScript come ad esempio:

<a href="#" onClick ="methodName();">Link Name</a> 

Answer 8

Non è possibile. L'ultimo foglio di stile che specifichi sarà l'unica pagina HTML da utilizzare. Pensalo come un grande singolo documento .css.