Ho una pagina Web con parti diverse che richiedono fogli di stile CSS diversi da applicare a ciascuno. Quello che vorrei sapere è come specificare quale foglio di stile CSS utilizzare per ogni parte diversa della pagina web. se li lascio tutti insieme, i componenti non vengono visualizzati correttamente.Applicare foglio di stile CSS diverso per parti diverse della stessa pagina Web
Non è possibile applicare fogli di stile diversi a parti diverse di una pagina. Hai alcune opzioni:
La cosa migliore è di avvolgere le diverse parti della pagina in div con nomi di classe:
<div class='part1'>
....
</div>
<div class='part2'>
....
</div>
Poi nel CSS part1, prefisso ogni regola CSS con ".part1" e nella tua parte2 CSS, prefisso ogni regola CSS con ".part2". Nota che usando le classi, puoi usare un numero di div diverse "part1" o "part2", per delimitare in modo flessibile quali parti della pagina sono influenzate da quali regole CSS.
6 anni dopo ... :(non esiste ancora il css con scope Perché i browser non supportano ancora questa funzione? – Spirit
Utilizzare classi diverse per ogni parte della pagina Web e personalizzare il codice CSS per ogni classe.
Si chiama cascata fogli di stile (CSS) per un motivo ..
all'utente le specificity regole CSS per indirizzare ogni sezione ..
cioè ..
#section1 a{color:red}
#section2 a{color:blue}
questo farà sì che tutti i collegamenti all'interno di un elemento con ID section1 siano rossi e tutti i collegamenti all'interno di un elemento con ID section2 siano blu ..
<div id="section1">
<a href="#">i will be red</a>
</div>
<div id="section2">
<a href="#">i will be blue</a>
</div>
Questo non aiuta quando si carica bootstrap.css o qualsiasi altro css esterno – oriadam
Dovendo postare qui a causa della chiusura della domanda, che anch'io ritengo un errore. Nel mio caso ho conflitti tra le librerie CSS in diverse parti di una pagina (un ui angolare incorporato in un ui di bootstrap basato su django). L'approccio che sto per provare è incorporarne uno in un iframe. – Chris
Le versioni più recenti di bootstrap forniscono .less o.formato scss, che può essere facilmente avvolto dal wrapper personalizzato per raggiungere l'ambito. come: # section1 { } – Shawn
Un foglio di stile esterno viene applicato a tutta la pagina html. Per applicare diversi fogli di stile a porzioni differenti, Innanzitutto, pagina html deve essere diviso in diverse sezioni utilizzando il tag html (con ogni div html assegnare un ID univoco o una classe) secondo luogo, la foglio di stile esterno da applicare a ciascun div deve essere progettato secondo l'id/classe assegnata
Esempio come spiegato sopra di Gaby alias G. Petrioli ...
Nei significa che l'utente è che ha multiplo **. I file css vengono chiamati in una pagina Web ma quella pagina non viene visualizzata correttamente a causa di (ovvi) conflitti. Immagino che i file css abbiano div/sezioni con lo stesso nome che sta causando il conflitto. Questo è ciò che sta chiedendo e la risposta che segue di Ned sembra essere una risposta eccellente. –
È ovvio che cosa si stia ponendo questa domanda, quindi mi sembra chiaro che si tratta di una "vera domanda". –
Questa domanda è chiara e ha senso per me. Disprezzo quando i moderatori chiudono le domande qui. –