Łączenie się ze sobą reguł CSS

W poprzedniej części kursu CSS poznaliśmy w jaki sposób przeglądarka internetowa radzi sobie z sytuacją, gdy zdefiniujemy te same właściwości CSS dla danego elementu HTML, w różnych miejscach do tego przeznaczonych.

W tej części kursu CSS zobaczymy, co się stanie, gdy kilka reguł CSS z różnymi właściwościami CSS będzie odnosiło się do tego samego elementu HTML bądź grupy takich elementów HTML. Poznamy również jak kolejność podawania reguł CSS oraz właściwości CSS ma wpływ na sam element HTML.

Wyobraźmy sobie, że kilka osób wydaje nam polecenia, które my musimy wykonać w jak najszybszym tempie, nie myląc się przy tym. Polecenia są wydawane w tym samym czasie i mogą się powtarzać. Byłoby to dla nas trudne zadanie, aby wykonać wszystkie polecenia na raz.

Natomiast przeglądarka internetowa radzi sobie z tego typu sytuacjami, które występują w języku CSS. Definiując styl wyglądu elementu HTML możemy wykonać to zadanie na różne sposoby, w różnych miejscach pliku HTML lub w pliku CSS.

W jaki sposób przeglądarka internetowa sobie z tym wszystkim radzi?

Na to pytanie odpowiada nam ta i następna część tego kursu CSS.


Przyjrzyjmy się następującym regułom CSS:

[title] {
  background-color:lightblue;
  border:1px solid black;
  color:#000;
}

.twoja_nazwa {
  background-color:lightgreen;
  border:none;
  text-decoration:underline;
}

Pierwsza reguła CSS, którą utworzyliśmy, odszuka wszystkie elementy HTML w danym dokumencie HTML, które będą zawierały w sobie atrybut title, następnie doda do nich właściwość background-color:lightblue; border:1px solid black; color:#000; czyli kolejno:

  • doda jasnoniebieski kolor tła
  • doda obramowanie, po każdej stronie elementu, o stylu solid, szerokości 1px i kolorze czarnym, czyli black
  • doda kolor tekstu o wartości #000 (jest to kolor czarny w zapisie heksadecymalnym, o tego typu zapisach powiemy sobie w innej części tego kursu CSS)

Druga reguła CSS, którą utworzyliśmy, odszuka wszystkie elementy HTML zawierające atrybut class o wartości twoja_nazwa i doda do nich właściwość background-color:lightgreen; border:none; text-decoration:underline; czyli kolejno:

  • doda jasnozielony kolor tła
  • usunie ewentualne istniejące obramowanie z elementu
  • doda dekorację do tekstu w postaci podkreślenia

Wiemy na jakie elementy HTML będą oddziaływać nasze przykładowe reguły CSS, jednak jak będzie wyglądał element HTML, który spełni warunki obu reguł CSS, czyli w tym wypadku będzie zawierał w sobie atrybut title, jak również atrybut class o wartości twoja_nazwa? Przecież obie reguły CSS określają kolor tła i obramowanie dla elementu HTML, a więc jak nasza przeglądarka internetowa to zinterpretuje?

Otóż w takim przypadku powtarzające się właściwości CSS, w regułach CSS, po prostu nadpiszą się, a właściwości CSS, które są osobne dla obu reguł, zostaną dodane do danego elementu HTML, tak jak to wykonuje się normalnie, w przypadku tylko jednej reguły CSS, która odnosi się do danego elementu HTML.

Można powiedzieć, że przeglądarka internetowa sama dokona selekcji właściwości CSS, które ostatecznie ma otrzymać dany element HTML, czyli w tym wypadku, element HTML, który zawiera w sobie atrybut title, jak również atrybut class o wartości twoja_nazwa, otrzyma następujące właściwości CSS:

{
  color:#000;
  background-color:lightgreen;
  border:none;
  text-decoration:underline;
}

Cały przykład został przedstawiony w dokumencie HTML, którego kod znajduje się pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      [title] {
        background-color:lightblue;
        border:1px solid black;
        color:#000;
      }
      .twoja_nazwa {
        background-color:lightgreen;
        border:none;
        text-decoration:underline;
      }
    </style>
  </head>

  <body>

    <p class="twoja_nazwa" title="przykładowy akapit">
      to jest element - p - wraz z atrybutem "title" oraz atrybutem "class" o wartości "twoja_nazwa"
    </p>

  </body>
</html>

A tak prezentuje się wspomniany element HTML, po wyświetleniu go w oknie przeglądarki internetowej:

to jest element - p - wraz z atrybutem "title" oraz atrybutem "class" o wartości "twoja_nazwa"

Oczywiście kolejność podawania samych reguł CSS, czy to w części head dokumentu HTML, czy w zewnętrznym pliku CSS, ma znaczenie. Jeżeli przestawimy kolejność naszych wcześniej utworzonych reguł CSS, to powtarzające się właściwości CSS w obu regułach CSS, nadpiszą się w odwrotny sposób.

Nasze reguły CSS zapisane w odwrotnej kolejności:

.twoja_nazwa {
  background-color:lightgreen;
  border:none;
  text-decoration:underline;
}

[title] {
  background-color:lightblue;
  border:1px solid black;
  color:#000;
}

Tym razem przeglądarka internetowa wybierze następujące właściwości CSS, dla elementu HTML spełniającego warunki obu reguł CSS:

{
  text-decoration:underline;
  background-color:lightblue;
  border:1px solid black;
  color:#000;
}

A nasz element HTML będzie wyglądał następująco:

to jest element - p - wraz z atrybutem "title" oraz atrybutem "class" o wartości "twoja_nazwa"

O ile sama kolejność podawania reguł CSS ma znaczenie, o tyle kolejność podawania właściwości CSS w regułach CSS nie ma w większości przypadków znaczenia. Zapis przedstawiony poniżej nie zmieni wyglądu elementu HTML, który został przedstawiony powyżej:

.twoja_nazwa {
  text-decoration:underline;
  background-color:lightgreen;
  border:none;
}

[title] {
  color:#000;
  background-color:lightblue;
  border:1px solid black;
}

Kolejność podawania właściwości CSS w regułach CSS będzie miała znaczenie, w przypadku gdy będziemy chcieli wykonać następującą czynność... Na sam początek utwórzmy regułę CSS dla wszystkich elementów p, która doda do nich obramowanie po każdej stronie:

p {
  border:1px solid black;
}

Po otrzymaniu tej reguły CSS, przykładowe elementy p będą wyglądać następująco:

to jest element - p - z obramowaniem po jego każdej stronie

to jest element - p - z obramowaniem po jego każdej stronie

to jest element - p - z obramowaniem po jego każdej stronie

Naszym drugim krokiem będzie utworzenie dodatkowej reguły CSS dla ostatniego elementu p, która ma sprawić, aby dany element posiadał tylko obramowanie po górnej stronie. Nasza reguła powinna pierw usuwać ewentualne istniejące obramowanie elementu (ponieważ nasza pierwsza reguła CSS dodaje obramowanie do każdego elementu p w danym dokumencie HTML), a następnie dodawać nowe górne obramowanie do danego elementu, czyli kolejność podania przez nas właściwości CSS, w tym wypadku, musi wyglądać następująco:

{
  border:none;
  border-top:1px solid black;
}

Dzięki tej kolejności przeglądarka internetowa pierw usunie obramowanie z elementu HTML (border:none;), a następnie doda do niego nowe górne obramowanie (border-top:1px solid black;).

Jeżeli nasz zapis wyglądałby następująco:

{
  border-top:1px solid black;
  border:none;
}

Przeglądarka internetowa w tym wypadku pierw doda/zmieni górne obramowanie danego elementu HTML (border-top:1px solid black;), a następnie usunie całe obramowanie z elementu (border:none;). Dlatego w takich wypadkach kolejność podawania właściwości CSS w regułach CSS ma znaczenie.

Cały poprawny zapis omawianego przykładu został przedstawiony pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p {
        border:1px solid black;
      }
      .tylko_gorne {
        border:none;
        border-top:1px solid black;
      }
    </style>
  </head>

  <body>

    <p>to jest element - p - z obramowaniem po każdej jego stronie</p>
    <p>to jest element - p - z obramowaniem po każdej jego stronie</p>
    <p class="tylko_gorne">to jest element - p - z obramowaniem po jego górnej stronie</p>

  </body>
</html>

Nasze elementy HTML będą prezentować się następująco:

to jest element - p - z obramowaniem po każdej jego stronie

to jest element - p - z obramowaniem po każdej jego stronie

to jest element - p - z obramowaniem po jego górnej stronie

Z tej części kursu CSS możemy wywnioskować, że reguły CSS odnoszące się do tego samego elementu HTML nadpisują się w takiej kolejności, w jakiej zostaną podane w kodzie HTML, czyli reguła CSS umieszczona "niżej" w kodzie HTML, nadpisze regułę CSS znajdującą się "wyżej" w kodzie HTML (w przypadku gdy obie reguły odnoszą się do tego samego elementu HTML). Ostatnie stwierdzenie jest prawdziwe, ale tylko w przypadku gdy wspomniane reguły CSS będą zawierały w sobie selektory o tym samym stopniu ważności oraz tej samej liczbie, dlatego w następnej części kursu CSS zajmiemy się rozpoznaniem stopnia ważności selektorów CSS.