Użyj wielu arkuszy stylów CSS na tej samej stronie html.

Question

Jak korzystać z wielu arkuszy stylów CSS na tej samej stronie HTML, na której oba arkusze stylów mają na przykład klasę banerów. W jaki sposób określasz klasę, do której się odnosisz?

Answer 1

Nie można kontrolować, do czego się odwołujemy, z tym samym poziomem specificity w regule (np. Oba są po prostu .banner), a arkusz stylów uwzględniony jako ostatni wygrywa.

To per-nieruchomości, więc jeśli istnieje połączenie dzieje (na przykład jeden ma background, druga ma color) wtedy dostaniesz kombinacji ... Jeśli właściwość jest zdefiniowana w obu, cokolwiek to jest Ostatni raz pojawia się w wygranych kolejności stylów.

Answer 2

Arkusze stylów są, faktycznie, łączone w jeden arkusz stylów w kolejności, w jakiej pojawiają się w źródle HTML.

normal rules for applying rulesets następnie zastosować (to znaczy przez specificity z ostatniego zestawu reguł, który określa dana nieruchomość wygranej w przypadku remisu i !important wyrzucanie klucza do robót)

Answer 3

Nigdy nie odnoszą się do konkretnego arkusza stylów. Wszystkie reguły CSS w dokumencie są wewnętrznie połączone w jeden.

W przypadku reguł w obu arkuszach stylów, które dotyczą tego samego elementu o tej samej specyfice, arkusz stylów osadzony później zastąpi poprzedni.

Możesz użyć inspektora elementów, takiego jak Firebug, aby sprawdzić, które reguły obowiązują, a które są nadpisywane przez inne.

Answer 4

Ten, który należy jako ostatni, będzie używany. Pamiętaj jednak, że jeśli jakakolwiek reguła ma ważne znaczenie w pierwszym arkuszu stylów, będą one miały priorytet.

Answer 5

Pomyśl o tym jako o arkuszach stylów odnoszących się do ("zaznaczania") elementów na stronie HTML, a nie odwrotnie.

Answer 6

Nie możesz i nie możesz.

Zostaną zastosowane wszystkie reguły CSS na stronie (HTML "nic" nie wie o tym procesie), a poszczególne reguły o najwyższej specyficzności "będą się trzymać". Specyfika jest określana przez selektor i kolejność, w jakiej pojawiają się w dokumencie. W sumie chodzi o to, że jest to część kaskadowa. Powinieneś zapoznać się z jednym z wielu tutoriali CSS w sieci.

Answer 7

Tak, możesz dołączyć wiele arkuszy stylów, ale musisz oznaczyć je jako alternatywne arkusze stylów i dać użytkownikowi sposób aktywowania ich za pomocą JavaScript - być może klikając link.

Aby utworzyć alternatywny arkusz stylów:

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

Następny utworzyć metodę w pliku JavaScript, który będzie: 1. Włóż wszystkie arkusze stylów w tablicy 2. Przykład:

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; 
} 

Następnie przejdź przez tablicę za pomocą jakiegoś typu pętli if/else, który wyłącza arkusze stylów, których nie chcesz i włącza odpowiedni arkusz stylów. (Możesz napisać osobną metodę lub wstawić pętlę do powyższej metody.) Chciałbym użyć polecenia onload, aby załadować tablicę CSS ze stroną, a następnie wywołać metodę 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; 
    } 

Wreszcie tworzyć kod w dokumencie HTML, które użytkownik będzie aktywować JavaScript metody takie jak:

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

Answer 8

nie można. Ostatnim arkuszem stylów, który określisz, będzie jedna strona html. Pomyśl o tym jako o dużym pojedynczym dokumencie .css.