arrow_drop_up
arrow_drop_up
arrow_drop_up
arrow_drop_up
arrow_drop_up
arrow_drop_up

Zapoznaj się z artykułami na naszym blogu! |

home
Poznaj nas
info
Kursy programowania
people
Sylwetki wykładowców
location_on
Gdzie działamy?
create
Nasze artykuły
mail
Zapraszamy do kontaktu!

Artykuły.

Specyficzność (reguły kolizyjne CSS).

Na początku nauki CSS trzeba zaznajomić się z takimi zagadnienieniami jak specyficzność oraz kolizje znaczników. Zrozumienie tych pojęć jest kluczowe w nauce CSS. Wspomniane zagadnienia postaram się wyjaśnić na konkretnych przykładach.

Na wstępie przeanalizuj poniższy kod CSS:

body {

    color: navy;

}

 

p {

    color: green;

}

 

p {

    color: yellow;

}

Jak myślisz, jaki kolor ostatecznie przyjmie tekst zawarty w akapicie tekst?

Przyjmie kolor żółty ponieważ występuje tu tzw. kolizja znaczników (akapit "p" występuje podwójnie w powyższym kodzie). W tym momencie przeglądarka zastosuje kolor z ostatniego (najniżej położonego) znacznika p. Jeszcze raz podkreślmy, że w tym przypadku mamy do czynienia z konfliktem znaczników.

A jak się zachowa akapit w poniższym przykładzie?

p {

    color: green;

}

body {

    color: navy;

}

Czy w tym przypadku również ma zastosowanie kolejność zapisu znaczników? Oczywiście, że nie  ponieważ selektor "p" w tym przypadku jest bardziej specyficzny, tzn. bardziej dokładny, ponieważ odnosi się bezpośrednio do elementu p, a selektor body jest w tym przypadku bardziej ogólny. Tak więc w powyższym przykładzie kolejność nie ma żadnego znaczenia, może oprócz estetycznego ;) Budując arkusze CSS warto umieszczać definicje selektorów w kolejności zgodnej z ich występowaniem w dokumencie HTML.

Następne w kolejności zastosowania są:

1) Selektory klasy.

2) Selektory identyfikatora.

Tak naprawdę selektory mogą być o wiele bardziej złożone.

 

Jak więc wygląda wtedy ich specyficzność ?

Otóż można to wyliczyć. W poniższej tabeli przedstawiono wartości liczbowe dla poszczególnych selektorów:

 

Selektor identyfikatora

Selektor klasy

Selektor tagu

100 pkt

10 pkt

1 pkt

 

Przykłady obliczania punktacji:

div {color: navy;}

Suma punktów: 1.

div.footer {color: red;}

Suma punktów: 11.

#test .footer p {color:green;}

Suma punktów: 111.

Znajomość tej punktacji pozwala nam zrozumieć kolejność stosowania poszczególnych stylów przez przeglądarkę w sytuacji wystąpienia konfliktów (zastosowania tych samych selektorów w różnych miejscach arkusza CSS).

Lista artykułów Strona główna
menu
arrow_drop_up
Front-End (30.09.2023), Full-Stack (30.09.2023), Back-End (23.09.2023) [ szczegóły ]