Kolejność otrzymywania właściwości CSS przez element HTML

Do tej pory poznaliśmy kilka sposobów formatowania wyglądu elementu HTML za pomocą reguł CSS, w których to regułach umieszczaliśmy różne właściwości CSS zmieniające daną cechę wyglądu elementu HTML. Czas abyśmy zapoznali się z kolejnością, z jaką dane miejsca, w których możemy definiować właściwości CSS, oddziałują na poszczególny element HTML. Inaczej mówiąc, czas abyśmy zapoznali się z kaskadowością występującą w CSS.

Pod spodem został umieszczony kod dokumentu HTML, jak również kod dwóch plików CSS, które zostały dołączone do tego dokumentu HTML.

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

    <link href="arkusz1.css" rel="stylesheet" >
    <link href="arkusz2.css" rel="stylesheet" >
	
    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
      p {
        color:red;
      }
    </style>
  </head>

  <body>

    <p style="color:black;">to jest przykładowy element - p</p>

  </body>
</html>

Kod pliku arkusz1.css

p {
  color:gold;
}

Kod pliku arkusz2.css

p {
  color:blue;
}

Analizując to co zostało przedstawione w kodzie dokumentu HTML i w dwóch plikach CSS, które zostały do tego dokumentu HTML dołączone, możemy dostrzec, że dokument HTML zawiera jeden element p, do którego jest dodawana, na różne sposoby i z różnymi wartościami, właściwość color.

Pytanie brzmi: właściwość color z którą wartością ostatecznie zostanie dodana do naszego przykładowego elementu p? Czy może nasza przeglądarka internetowa pogubi się?

Na szczęście nasza przeglądarka internetowa poradzi sobie z tą sytuacją, ponieważ nasza przeglądarka internetowa wie jak zachować się w przypadku wystąpienia takiej sytuacji, zna pewne zasady, które i my musimy poznać.

Pierwszeństwo w takiej sytuacji będzie miała ta właściwość color, która została użyta w atrybucie style, w znaczniku danego elementu HTML, czyli w tym wypadku nasz kolor tekstu będzie czarny, za co odpowiada właściwość color:black;

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

    <link href="arkusz1.css" rel="stylesheet" >
    <link href="arkusz2.css" rel="stylesheet" >
	
    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
      p {
        color:red;
      }
    </style>
  </head>

  <body>

    <p style="color:black;">to jest przykładowy element - p</p>

  </body>
</html>

Dokument HTML, po wyświetleniu w oknie przeglądarki internetowej, prezentuje się następująco:

to jest przykładowy element - p

W momencie gdy usuniemy wspomnianą właściwość color:black; z atrybutu style, to pierwszeństwo będzie miała właściwość color umieszczona w części head dokumentu HTML, w elemencie style, który został umieszczony po ewentualnych, dołączonych do danego dokumentu HTML, plikach CSS, czyli w tym wypadku nasz kolor tekstu będzie czerwony, za co odpowiada właściwość color:red;

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

    <link href="arkusz1.css" rel="stylesheet" >
    <link href="arkusz2.css" rel="stylesheet" >
	
    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
      p {
        color:red;
      }
    </style>
  </head>

  <body>

    <p>to jest przykładowy element - p</p>

  </body>
</html>

Dokument HTML, po wyświetleniu w oknie przeglądarki internetowej, prezentuje się następująco:

to jest przykładowy element - p

Jeżeli w następnym kroku usuniemy wspomnianą właściwość color:red; z elementu style, który został umieszczony w części head dokumentu HTML, to pierwszeństwo będzie miała właściwość color umieszczona w ostatnim dołączonym pliku CSS, do danego dokumentu HTML, czyli w tym wypadku tym plikiem będzie arkusz2.css, w którym występuje właściwość color:blue; czyli kolor tekstu w omawianym elemencie p będzie niebieski.

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

    <link href="arkusz1.css" rel="stylesheet" >
    <link href="arkusz2.css" rel="stylesheet" >
	
    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
    </style>
  </head>

  <body>

    <p>to jest przykładowy element - p</p>

  </body>
</html>

Dokument HTML, po wyświetleniu w oknie przeglądarki internetowej, prezentuje się następująco:

to jest przykładowy element - p

Jeżeli w następnym kroku usuniemy linijkę kodu odpowiadająca za dołączenie pliku CSS - arkusz2.css, to pierwszeństwo będzie miała właściwość color umieszczona w ostatnim dołączonym pliku CSS, do danego dokumentu HTML, czyli w tym wypadku tym plikiem będzie arkusz1.css, w którym występuje właściwość color:gold; czyli kolor tekstu w naszym elemencie p będzie złoty.

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

    <link href="arkusz1.css" rel="stylesheet" >
	
    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
    </style>
  </head>

  <body>

    <p>to jest przykładowy element - p</p>

  </body>
</html>

Dokument HTML, po wyświetleniu w oknie przeglądarki internetowej, prezentuje się następująco:

to jest przykładowy element - p

Analizując to co zostało do tej pory omówione w tej części kursu CSS, możemy dostrzec, że kolejność miejsc, z których przeglądarka internetowa pobiera właściwości CSS, dla danego elementu HTML, prezentuje się następująco (licząc od końca):

  • ewentualny dołączony do danego dokumentu HTML zewnętrzny plik CSS
  • kolejny ewentualny dołączony do danego dokumentu HTML zewnętrzny plik CSS
  • element style umieszczone w części head dokumentu HTML, który został umieszczony po ewentualnych, dołączonych do danego dokumentu HTML, plikach CSS
  • atrybut style danego elementu HTML

Należy pamiętać, że element style możemy umieszczać w różnej kolejności w części head dokumentu HTML wraz z innym dołączanymi plikami CSS, co również będzie miało wpływ na kolejność pobierania właściwości CSS dla danych elementów HTML przez naszą przeglądarkę internetową.

Należy również pamiętać, że dany element HTML pozbawiony jakichkolwiek reguł CSS i właściwości CSS, może dziedziczyć niektóre właściwości CSS od swojego elementu "rodzica" lub "przodka", co zostało zaprezentowane w części przeznaczonej na omówienie dziedziczenia właściwości CSS.

W następnej części kursu CSS poznamy na czym polega nadpisywanie się, czyli łączenie się ze sobą istniejących reguł CSS, ponieważ ten proces również ma wpływ na to, jakie właściwości zostaną ostatecznie dodane do danego elementu HTML.