Jakie jest znaczenie „kaskadowania” w CSS?

Jakie jest dokładne znaczenie terminu „kaskadowanie” w CSS? Otrzymuję różne poglądy, więc pytam tutaj. Przykład mógłby pomóc.

„Kaskadowanie” w tym kontekście oznacza, że ​​ponieważ więcej niż jedna deklaracja arkusza stylów może dotyczyć określonego fragmentu HTML, musi istnieć znany sposób określania, która reguła arkusza stylów ma zastosowanie do którego fragmentu HTML.

Stosowaną regułę wybiera się, przechodząc od bardziej ogólnych deklaracji do wymaganej reguły. Wybrano najbardziej szczegółową deklarację.

Kiedy uczę CSS, zawsze mówię studentom, że „kaskadowe arkusze stylów” oznacza coś w rodzaju „ arkuszy stylów walki ”.

Jedna reguła mówi, że tag H3 ma być czerwony, inna reguła mówi, że jest zielony - zasady są ze sobą sprzeczne, kto wygra !? Deathmatch w arkuszu stylów!

OK, może to lekka przesada, ale jest to znacznie bardziej podatne na niekodujące, nie programujące osoby, które dopiero zaczynają, niż jakiekolwiek pojęcie kaskady lub dziedziczenia.

Oczywiście mówię im, że to nie problem, że arkusze stylów walczą ze sobą, tak zaprojektowano język.

Håkon Wium Lie (współtwórca CSS) definiuje „kaskadę” w swojej pracy doktorskiej na temat CSS jako „Proces łączenia kilku arkuszy stylów i rozwiązywania konfliktów między nimi” https://www.wiumlie.no/2006/phd/

Poniższy artykuł doskonale odpowiada na Twoje pytanie.

Jest to kolejność, w jakiej właściwości są stosowane do określonego elementu (elementów).

http://www.blooberry.com/indexdot/css/topics/cascade.htm

Musisz myśleć o tym z zewnątrz. Jeśli masz regułę, która jest na tagu body, będzie ona „kaskadowo” przechodzić przez każdy tag podrzędny. Jeśli umieścisz regułę na dowolnym tagu w treści, zostanie ona przyjęta i tak dalej. Zatem reguła przechodzi kaskadowo przez całą zawartość, chyba że zostanie przerwana przez regułę z osadzonego tagu.

Przetwarzanie CSS można traktować jako kaskadę zawierającą kilka kaskad. Oto te kaskady w kolejności od góry do dołu: (Niższa może nadpisać tę samą właściwość w wyższej).

1. deklaracje klienta użytkownika
2. normalne deklaracje użytkownika
3. autor normalnych deklaracji
4. autor ważnych deklaracji
5. ważne deklaracje użytkownika

Zobacz więcej w specyfikacji

Kaskadowy jest, aby wybrać odpowiednią wartość z wielu źródeł. Ale różni się od sortowania . Tylko coś, czego nie trzeba sortować. Ale w CSS te początki mają ustalone pierwszeństwo. I tak pseudokod mógłby wyglądać następująco:

1. zainicjalizuj tablicę wartości;
2. zastosuj wartości z 1. pochodzenia;
3. zastosuj wartości z drugiego źródła, zastąp, jeśli wartość istnieje;
4. ...
5. zastosuj wartości z N-tego pochodzenia, zastąp, jeśli wartości istnieją;

Z pseudo-kodu widać, że wygląda to całkiem jak wodospad kilku kaskad.

Jedno wyjaśnienie, które może pomóc. Jeśli dołączysz dwa arkusze stylów i w każdym z nich znajduje się reguła o tej samej specyfice, wygrywa ta, która zawierała ostatnie. IE największy wpływ ma ostatnia w kaskadzie.

(To tylko odmiana posiadania dwóch zasad na tym samym arkuszu - ostatnia wygrywa, jeśli wszystkie inne rzeczy są równe).

Np. Podane

body {
    background:blue;
}

body {
    background:green;
}

wtedy tło będzie zielone.

Ta odpowiedź jest dla absolutnie początkujących. Jeśli chcesz uzyskać przegląd tej odpowiedzi, przeczytaj moją drugą odpowiedź.

Kaskadowanie to proces łączenia różnych arkuszy stylów i rozwiązywania konfliktów między różnymi regułami CSS i deklaracjami, gdy więcej niż jedna reguła ma zastosowanie do określonego elementu . Ponieważ, jak zapewne już wiesz, deklaracja określonej właściwości stylu, takiej jak rozmiar czcionki, może pojawić się w kilku arkuszach stylów, a także kilka razy w jednym arkuszu stylów.

Aby zrozumieć kaskadowanie, musisz zacząć od fazy analizy CSS, ponieważ w fazie analizowania pierwszym krokiem jest rozwiązanie sprzecznych deklaracji CSS, a drugim krokiem jest przetworzenie końcowych wartości CSS.

Teraz CSS może również pochodzić z różnych źródeł. Najpopularniejszym jest CSS, który piszemy my programiści. Te deklaracje, które umieszczamy w naszych arkuszach stylów, nazywane są deklaracjami autorów. Innym źródłem mogą być deklaracje użytkownika, czyli CSS pochodzące od użytkownika. Na przykład, gdy użytkownik zmieni domyślny rozmiar czcionki w przeglądarce, to jest to CSS użytkownika, a na koniec istnieją deklaracje domyślnej przeglądarki.

Na przykład, jeśli umieścimy tag kotwicy w naszym kodzie HTML dla łącza, a następnie w ogóle go nie stylizujemy, zwykle będzie on renderowany niebieskim tekstem i podkreślony, prawda. Nazywa się to CSS klienta użytkownika, ponieważ jest ustawiany przez przeglądarkę. Zatem kaskada łączy deklaracje CSS pochodzące z tych wszystkich różnych źródeł, ale w jaki sposób kaskada faktycznie rozwiązuje konflikty, gdy ma zastosowanie więcej niż jedna reguła?

Cóż, to, co robi, to przyjrzenie się ważności, specyficzności selektora i kolejności źródła sprzecznych deklaracji, aby określić, która z nich ma pierwszeństwo, a oto jak to działa. Po pierwsze, kaskada zaczyna się od podania sprzecznych deklaracji o różnej wadze w zależności od tego, gdzie zostały zadeklarowane w ich źródle. Najważniejsze deklaracje to deklaracje użytkownika oznaczone słowem kluczowym important.

Drugą najważniejszą deklaracją są deklaracje autorskie oznaczone jako ważne. Po trzecie, zwykłe deklaracje autora, potem zwykłe deklaracje użytkownika, a na końcu te najmniej istotne to deklaracje domyślnej przeglądarki, co właściwie ma sens, że możemy łatwo nadpisać te deklaracje przychodzące domyślnie z przeglądarki.

Teraz wiele razy będziemy mieć kilka sprzecznych reguł w naszych autorskich arkuszach stylów bez żadnego ważnego słowa kluczowego. To jest właściwie najbardziej powszechny scenariusz iw tym przypadku wszystkie deklaracje mają dokładnie to samo znaczenie. Co się dzieje w tym przypadku? W takim przypadku kaskada oblicza i porównuje specyfikę selektorów deklaracji i tak to działa.

Style wbudowane mają najwyższą specyficzność, po których następują identyfikatory, następnie klasy, pseudoklasy i selektory atrybutów, a na końcu najmniej określony element i selektor pseudoelementów. Tak więc, gdy mamy sprzeczne deklaracje o takiej samej wadze, jak widzieliśmy na ostatnim slajdzie, obliczamy specyficzność ich selektora na podstawie priorytetów, które właśnie pokazałem, ale zobaczmy, jak właściwie obliczamy specyfikacje na małym przykładzie, to zawsze jest najlepsze, prawda.

Z powyższego przykładu, wszystkie te deklaracje mają takie samo znaczenie, ponieważ wszystkie są deklaracjami autora. Obliczmy więc ich specyfikę selektora, aby dowiedzieć się, czy kolor tła będzie niebieski, zielony, fioletowy czy żółty, i tak to robimy. Specyfika to nie tylko jedna liczba, ale jedna liczba dla każdej z czterech kategorii, które pokazałem wcześniej. Style w wierszu, identyfikatory, klasy, pseudoelementy i atrybuty, a na końcu elementy i dla każdego z nich zliczamy liczbę wystąpień w selektorze.

Więc tutaj, w selektorze pierwszym, nie mamy oczywiście żadnych stylów wbudowanych, ponieważ styl wbudowany musi być napisany w HTML, co nie ma miejsca w tym przypadku, więc jest to zero. Nie mamy tutaj również identyfikatorów, więc znowu jest to zero, ale mamy jedną klasę, klasę przycisku. Tak więc dla kategorii klas mamy jedynkę i wreszcie nie ma tu selektora elementu, więc dla tej również zero, i to wszystko. Specyficzność selektora wynosi zero, zero, jeden, zero.

Teraz porównajmy to z innymi. Następny również nie jest stylem wbudowanym, więc zero dla pierwszego. Teraz mamy tutaj selektor ID dla identyfikatora nawigacyjnego, tak, więc jest to jeden dla ID. Mamy również dwie klasy, pociągnij w prawo i przycisk, więc jest to dwoje dla kategorii klas, a na koniec są tu również dwa selektory elementów. Element nav i element div, co oznacza, że ​​jest to również dwa dla kategorii elementów. Ostatecznie specyficzność selektora wynosi zero, jeden, dwa, dwa, co jest właściwie bardzo specyficznym selektorem.

Selektor numer trzy jest bardzo prosty. To tylko selektor elementu, więc specyficzność wynosi zero, zero, zero, jeden.

Teraz ostatni, selektor numer cztery. Najpierw znowu mamy identyfikator nawigacyjny, więc jest to jeden dla identyfikatora. Następnie mamy klasę, klasę przycisku, a także pseudoklasę, czyli najechanie kursorem, co daje w sumie dwie dla kategorii klas. Ponieważ istnieje również jeden selektor elementu, końcowa specyficzność wynosi zero, jeden, dwa, jeden.

Teraz zobaczmy, jak właściwie używamy tych liczb, aby dowiedzieć się, który z selektorów ma zastosowanie. Zaczynamy przyglądać się liczbom od lewej do prawej, zaczynając od najbardziej szczegółowej kategorii, stylów wbudowanych. Jeśli istnieje selektor z jednym dla stylów wbudowanych, wygrywa z wszystkimi innymi selektorami, ponieważ jest to najbardziej szczegółowa kategoria. Cóż, tak nie jest w tym przypadku, więc przejdźmy do identyfikatorów. Widzimy, że selektory dwa i cztery mają tutaj jedynkę, podczas gdy inne mają zero, więc te z zerem są poza grą, ponieważ są mniej szczegółowe niż selektory dwa i cztery te z identyfikatorami.

Teraz, ponieważ oba selektory mają po jednym w kategorii IDs, musimy przejść dalej i sprawdzić klasy. Obaj mają dwójkę w tej kategorii nadal remisują między nimi, a na koniec w kategorii elementów selektor dwa ma dwa, podczas gdy selektor czwarty ma tylko jeden, więc mamy tutaj zwycięzcę. Selektor numer dwa jest najbardziej szczegółowym selektorem ze wszystkich, więc nada naszemu przyciskowi zielone tło.34 Wartość deklaracji wygrywającej nazywana jest wartością kaskadową, ponieważ jest wynikiem kaskady.

Zaczynamy więc od zestawu zadeklarowanych wartości, w tym przypadku niebieski, zielony, fioletowy i żółty jedna z nich wygrywa i staje się wartością kaskadową, która w naszym przykładzie jest zielona.

Teraz wyobraź sobie, że sektor czwarty również miał dwa elementy, wtedy oba selektory, drugi i czwarty, miałyby dokładnie taką samą specyfikę, prawda. Więc co się dzieje w tym przypadku i obiecuję, że to już prawie koniec, dobrze. Cóż, jeśli w tym momencie nadal występuje remis, to ostatnia deklaracja CSS zapisana w kodzie będzie miała zastosowanie. Więc znowu, jeśli wszystko jest równe, jeśli wszystkie selektory deklaracji mają tę samą specyfikę, to jest to po prostu ostatnia deklaracja, która zostanie użyta do nadania stylu wybranemu elementowi.

Jest to proces używany do rozwiązywania konfliktów w specyfikacji arkusza stylów.

Jest to przede wszystkim proces rozwiązywania konfliktów wykonany zgodnie ze wzmianką o pierwszeństwie w CSS.

CSS to skrót od Cascading Style Sheet. Ze względu na swoją naturę style znajdujące się niżej, kaskadowy arkusz stylów zastępuje równoważne style na wyższych poziomach (chyba że style z wyższych poziomów są bardziej szczegółowe). Dlatego możemy ustawić style bazowe na początku arkusza stylów, mające zastosowanie do wszystkich wersji naszego projektu, a następnie zastąpić odpowiednie sekcje zapytaniami o media w dalszej części dokumentu.

Kaskadowanie oznacza zlewanie stopniowe lub dodawanie stopniowe. Arkusze stylów zawierają kody do stylizacji elementu html. A sposób, w jaki kody są zapisywane w arkuszu stylów, jest kaskadowy. Lub po prostu, z powrotem do tyłu kody w warstwach dla każdego elementu html strony html w arkuszu stylów tworzą kaskadowy arkusz stylów.

Kaskadowanie to algorytm, który przypisuje wagę każdej regule stylu. W przypadku kilku zasad pierwszeństwo ma ta o największej wadze.

Kiedy jeden lub więcej stylów jest zastosowanych do tego samego elementu, CSS wykonuje zestaw reguł zwanych kaskadowaniem, które oceniają siłę Specyfika dwóch zastosowanych stylów i określają zwycięzcę, tj. Wygrywa reguła stylu, która ma większą wagę. ta sama waga, wtedy reguła stosowana jako ostatnie wygrywa.

Kaskada i specyficzność, co musisz wiedzieć:

1. Deklaracja CSS oznaczona! Ważne ma najwyższy priorytet.

2. Ale używaj tylko! Important jako ostatniego zasobu. Lepiej jest używać poprawnej specyfikacji - łatwiejszego w utrzymaniu kodu!

3. Style wbudowane zawsze będą miały pierwszeństwo przed stylami w zewnętrznych arkuszach stylów.

4. Selektor zawierający 1 identyfikator jest bardziej szczegółowy niż selektor zawierający 1000 klas.

5. Selektor zawierający 1 klasę jest bardziej szczegółowy niż ten z 1000 elementów.

6. Selektor uniwersalny * nie ma wartości specyficzności (0,0,0)

7. Polegaj bardziej na specyficzności niż na kolejności selektorów.

8. Ale polegaj na kolejności, gdy używasz arkuszy stylów innych firm - zawsze umieszczaj arkusz stylów autora na końcu.

Wybierając style CSS, które mają być zastosowane do elementu HTML, specyfika zastępuje ogólność zgodnie z kaskadowym zestawem reguł, które rozstrzygają konflikty między stylami:

1. Bez CSS kod HTML będzie wyświetlany zgodnie z domyślnymi stylami przeglądarki.
2. Selektory tagów CSS (pasujące do znacznika HTML) zastępują ustawienia domyślne przeglądarki.
3. Selektory klas CSS (z.) Przesłaniają odwołania do tagów.
4. Selektory CSS ID (z #) przesłaniają odwołania do klas.
5. Wbudowany kod CSS zakodowany w tagu HTML zastępuje identyfikator, klasę i tag CSS.
6. Dodanie ! Important wartości do stylu CSS nadpisuje wszystko inne.
7. Jeśli selektory CSS są identyczne, przeglądarka łączy ich właściwości. Jeśli wynikowe właściwości CSS są sprzeczne, przeglądarka wybiera wartość właściwości, która pojawiła się później lub ostatnio w kodzie.

Priorytet ma selektor CSS, który pasuje do bardziej szczegółowej kombinacji tagów, klas i / lub identyfikatorów. Z poniższych przykładów pierwszy będzie miał pierwszeństwo przed drugim, niezależnie od kolejności ich występowania w CSS:

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

wyrenderowałoby p przy czcionce 14pt, ponieważ jest „bliżej” rzeczywistego elementu (zewnętrzne arkusze stylów ładują się od góry do dołu pliku). Jeśli użyjesz połączonego arkusza stylów, a następnie umieścisz CSS w nagłówku dokumentu po połączeniu z zewnętrznym dokumentem CSS, deklaracja „w nagłówku” wygrywa, ponieważ jest jeszcze bliżej zdefiniowanego elementu. Dotyczy to tylko selektorów jednakowo ważonych. Sprawdź http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html, aby uzyskać dobry opis wagi danego selektora.

Wszystko to powiedziawszy, można również rozważyć „dziedziczenie” jako część kaskady - ze wszystkich praktycznych powodów. Z elementów zawierających elementy „kaskadowo” spada.