Wiedza o tym, że kolejność deklaracji ma znaczenie może zaoszczędzić dużo czasu osobom, które są na początkowym etapie poznawania CSS3. Jednak nie dotyczy to tylko osób początkujących w CSS3, podobny problem może pojawić się również używając framework Bootstrap. Osoba używająca framework oraz dodająca własne style CSS np. w osobnym pliku STYLE.CSS, może być niezwykle zdziwiona kiedy okaże się że jej strona ostylowana jest według domyślnych ustawień Bootstrap zamiast indywidualnie przygotowanego kodu.

Przykładowo dla stylu:

<STYLE>
.klasa1 {color: red;}
.klasa2 {color: blue;}
.klasa3 {color: yellow;}
</STYLE>
<div  class="klasa1 klasa2 klasa3">TEST</div>

Otrzymamy napis TEST w kolorze żółtym.

Istnieje tu jednak pułapka bo kolejność jest ważna, ale w miejscu, w którym pojawiła się deklaracja. Dlatego w kolejnym przykładzie pomimo, że część HTML nie zmieniła się i kolejność deklaracji klas jest taka jaka była jako rezultat otrzymamy napis TEST, ale w kolorze niebieskim.

Przyjrzyj się szczegółowo grafice:

BOOTSTRAP i CSS# kolejność deklaracji


HIERARCHIA:

  1. Style bezpośrednio w HTML
  2. Wewnętrzne i zewnętrzne style (wskazane w sekcji HEAD)
    1. ID – Identyfikator
    2. CLASS – Klasa
    3. <TAG> – tag
  3. Style przeglądarki

 


Żeby uniknąć tego problemy należy przestrzegać kilku zasad:

  • Deklaruj swój plik CSS3 poniżej deklaracji Bootstrapa, np.:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css" type="text/css"/>
  • Używaj identyfikatorów. Identyfikator jest ważniejszy od klasy i gdy zachodzi potrzeba ostylowanie części witryny w specyficzny sposób lepiej unikać mnożenia klas, które mogą kolidować z klasami Bootstrapa
  • Styl wpisany bezpośrednio w HTML ma największą wagę.

 

Na poniższym przykładzie widać, że pomimo 3 klas oraz użytego identyfikatora, to styl użyty bezpośrednio w DIV ostylował tekst (czyli otrzymał kolor: grey).

 

BOOTSTRAP i CSS# kolejność deklaracji

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij