Jednym z najlepszych sposobów nauczenia się kodowania stron internetowych jest przyjrzenie się kody źródłowe innych witryn. Ta praktyka pokazuje, jak wielu profesjonalistów internetowych nauczyło się swojego rzemiosła, zwłaszcza w czasach, zanim było tak wiele opcji dla projektowanie stron kursy, książki i witryny szkoleniowe online.
Jeśli spróbujesz tej praktyki i spojrzysz na kaskadowe arkusze stylów witryny, jedną z rzeczy, które możesz zobaczyć w tym kodzie, jest wiersz, który mówi !ważny. Ten termin zmienia priorytet przetwarzania w arkuszu stylów.
Kaskada CSS
Kaskadowe arkusze stylów rzeczywiście? kaskada, co oznacza, że są umieszczone w określonej kolejności. Ogólnie style są stosowane w kolejności, w jakiej są odczytywane przez przeglądarkę. Stosowany jest pierwszy styl, potem drugi i tak dalej.
W rezultacie, jeśli styl pojawi się na górze arkusza stylów, a następnie zostanie zmieniony w dolnej części dokumentu, drugie wystąpienie tego stylu zostanie zastosowane w kolejnych wystąpieniach, a nie pierwsze. Zasadniczo, jeśli dwa style mówią to samo (co oznacza, że mają ten sam poziom szczegółowości), zostanie użyty ostatni z wymienionych.
Na przykład wyobraźmy sobie, że w arkuszu stylów znajdują się następujące style. Tekst akapitu byłby renderowany na czarno, mimo że pierwsza zastosowana właściwość stylu jest czerwona. Dzieje się tak, ponieważ „czarna” wartość jest wymieniona jako druga. Ponieważ CSS jest czytany od góry do dołu, ostatecznym stylem jest „czarny” i dlatego wygrywa.
p { kolor: czerwony; }
p { kolor: czarny; }
Jak !ważne zmiany priorytetu
!ważny Dyrektywa wpływa na sposób, w jaki Twoje kaskady CSS są zgodne z zasadami, które uważasz za najważniejsze i powinny być stosowane. Reguła, która ma tę dyrektywę, jest zawsze stosowana bez względu na to, gdzie ta reguła pojawia się w dokumencie CSS.
Aby tekst akapitu był zawsze czerwony, z poprzedniego przykładu zmień styl w następujący sposób:
p { kolor: czerwony !ważne; }
p { kolor: czarny; }
Teraz cały tekst pojawi się na czerwono, nawet jeśli „czarna” wartość jest wymieniona jako druga. Dyrektywa !important zastępuje normalne zasady kaskady i nadaje temu stylowi bardzo wysoką szczegółowość.
Jeśli absolutnie potrzebujesz, aby akapity były czerwone, ten styl wystarczy, ale to nie znaczy, że jest to dobra praktyka.
Kiedy używać !ważne
Dyrektywa !important jest pomocna podczas testowania i debugowania witryny internetowej. Jeśli nie masz pewności, dlaczego styl nie jest stosowany i uważasz, że może to być konflikt specyficzności, dodaj deklarację !important do swojego stylu, aby sprawdzić, czy to naprawi — a jeśli tak, zmień kolejność selektorów i usuń dyrektywy !ważne ze swojej produkcji kod.
Jeśli zbyt mocno opierasz się na deklaracji !important, aby osiągnąć pożądane style, w końcu arkusz stylów będzie zaśmiecony !importantami. Zasadniczo zmienisz sposób przetwarzania CSS strony. Jest to leniwa praktyka, która nie jest dobra z punktu widzenia długoterminowego zarządzania.
Użyj !ważne do testowania lub, w niektórych przypadkach, gdy koniecznie musisz przesłonić styl wbudowany, który jest częścią struktury motywu lub szablonu. Nawet w takich przypadkach używaj tego podejścia oszczędnie i zamiast tego pisz czyste arkusze stylów, które honorują kaskada.
Arkusze stylów użytkownika
Dyrektywa ta została również wprowadzona, aby pomóc użytkownikom stron internetowych radzić sobie z arkuszami stylów, które utrudniają im używanie lub czytanie stron.
Gdy ktoś definiuje arkusz stylów aby wyświetlić strony internetowe, arkusz stylów jest zastępowany przez arkusz stylów autora strony. Jeśli użytkownik oznaczy styl jako !ważny, ten styl ma pierwszeństwo przed arkuszem stylów autora strony internetowej, nawet jeśli autor oznaczy regułę jako !ważny.
Ta hierarchia jest przydatna dla użytkowników, którzy muszą ustawić style w określony sposób. Na przykład czytelnik niedowidzący może potrzebować zwiększyć domyślne rozmiary czcionek na wszystkich używanych przez siebie stronach internetowych. Używając oszczędnie swojej !ważnej dyrektywy na stronach, które tworzysz, dostosowujesz się do unikalnych potrzeb swoich czytelników.