Mam stronę internetową z różnymi częściami, które wymagają różnych arkuszy stylów CSS do zastosowania w każdym z nich. Chciałbym wiedzieć, jak określić, który arkusz stylów CSS ma być użyty dla każdej innej części strony. jeśli zostawiam je wszystkie razem, komponenty nie zostaną poprawnie wyświetlone.Zastosuj różne arkusze stylów CSS dla różnych części tej samej strony internetowej
Nie można zastosować różnych arkuszy stylów do różnych części strony. Masz kilka opcji:
najlepiej jest owinąć różne części strony w div z nazwami klas:
<div class='part1'>
....
</div>
<div class='part2'>
....
</div>
Następnie w part1 CSS poprzedzić każdą regułę CSS z „.part1” i w swoim CS2 części, przedrostek każdej reguły CSS z ".part2". Zauważ, że korzystając z klas, możesz użyć wielu różnych elementów div "part1" lub "part2", aby elastycznie rozgraniczać, na które części strony wpływają reguły CSS.
6 lat później ... :(nadal nie ma wyznaczonego zakresu znaków, Dlaczego przeglądarki wciąż nie obsługują tej funkcji? – Spirit
Użyj innej klasy dla każdej części strony i dostosuj kod CSS dla każdej klasy.
To się nazywa kaskadowych arkuszy stylów (CSS) dla jakiegoś powodu ..
korzystają z specificity reguły CSS kierować każdą sekcję ..
tj ..
#section1 a{color:red}
#section2 a{color:blue}
dzięki temu wszystkie linki wewnątrz elementu o identyfikatorze section1 będą czerwone, a wszystkie łącza wewnątrz elementu o identyfikatorze section2 będą niebieskie ..
<div id="section1">
<a href="#">i will be red</a>
</div>
<div id="section2">
<a href="#">i will be blue</a>
</div>
To nie pomaga podczas ładowania bootstrap.css lub jakiegokolwiek innego zewnętrznego css – oriadam
Konieczność publikowania tutaj z powodu zamknięcia pytania, co również uważam za błąd. W moim przypadku mam konflikty między bibliotekami CSS w różnych częściach strony (ui kątowe osadzone w interfejsie użytkownika opartym na bootstrapie z django). Podejście, które zamierzam wypróbować, to umieszczenie go w elemencie iframe. – Chris
Nowsze wersje bootstrap zapewniają .less lub.format scss, który można łatwo opakować za pomocą niestandardowego opakowania, aby uzyskać scoping. na przykład: } section1 { } – Shawn
Zewnętrzny arkusz stylów jest stosowany do całej strony html. W celu zastosowania różnych stylów różnych porcjach pierwsze, stronę html musi być podzielony na sekcje przy pomocy znacznika html (z każdym div html być przypisany unikalny identyfikator lub klasa) drugie arkusz stylów zewnętrznych, które należy stosować do każdego div musi być zaprojektowany zgodnie z id/klasa przypisana do niego
przykład jak wyjaśniono powyżej przez Gaby aka G. Petrioli ...
Co oznacza, że użytkownik jest to, że ma wiele **. Pliki css są wywoływane na jednej stronie internetowej, ale strona ta nie jest poprawnie wyświetlana z powodu (oczywistych) konfliktów. Sądzę, że pliki css mają divy/sekcje o tych samych nazwach, które powodują konflikt. Właśnie o to pyta, a odpowiedź poniżej przedstawiona przez Neda wydaje się być doskonałą odpowiedzią. –
Jest oczywiste, o co pyta to pytanie, więc wydaje mi się jasne, że jest to "prawdziwe pytanie". –
To pytanie jest jasne i ma dla mnie sens. Gardzę, gdy moderatorzy zamykają tutaj pytania. –