Autor publikacji: Virtual Patriot - Administrator

Dołączanie zewnętrznego kaskadowego arkusza stylów do dokumentu HTML

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Do tej pory poznaliśmy dwa sposoby kontrolowania wyglądu elementów znajdujących się w kodzie dokumentu HTML.

Pierwszy ze wspomnianych sposobów polegał na dodaniu atrybutu style do znacznika elementu HTML. Atrybut style zawierał w sobie właściwości CSS i wartości, które odpowiadały za zmianę cech wyglądu danego elementu HTML.

Drugi ze sposobów, jakie do tej pory poznaliśmy, polegał na dodaniu reguł CSS do elementu style części head dokumentu HTML. Reguły CSS zawierały selektory CSS, właściwości CSS i wartości, dzięki którym każdy element HTML odszukany za pomocą danego selektora CSS otrzymywał dane właściwości CSS, które wpływały na jego wygląd.

W tej części kursu CSS poznamy trzeci ze sposobów na zmianę cech wyglądu elementów HTML. Tym sposobem będzie zewnętrzny kaskadowy arkusz stylów.

Wyobraźmy sobie, że mamy kartkę papieru, na której zapisujemy jak ma wyglądać dany przedmiot.

Kształt przedmiotu - kwadrat o rozmiarze 10cm × 10cm.
Kolor przedmiotu - niebieski.

Następnie wyobraźmy sobie, że po dołączeniu tej kartki do jakiegoś przedmiotu, zmieni on swój dotychczasowy wygląd na taki, jaki został zapisany na naszej kartce, czyli stanie się on kwadratem o rozmiarze 10cm × 10cm, koloru niebieskiego.

Oczywiście w świecie realnym jest to niemożliwie, jednak w świecie wirtualnym jest na odwrót, ponieważ właśnie w ten sposób działa zewnętrzny kaskadowy arkusz stylów. Zewnętrzny kaskadowy arkusz stylów zawiera reguły CSS, które określają wygląd różnych elementów HTML.

Pod spodem znajduje się kod HTML znany z poprzednich części tego kursu CSS.

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

    <style>
      div {
        background-color:lightblue;
      }

      p {
        border:1px solid black;
      }
    </style>
  </head>

  <body>

    <p>to jest element - p - umieszczony w elemencie - body</p>
    <div>to jest element - div - umieszczony w elemencie - body</div>

  </body>
</html>

W części przeznaczonej na przygotowanie się do tego kursu CSS utworzyliśmy plik arkusz.css, który umieściliśmy w jednym folderze www wraz z plikiem strona.html.

Plik arkusz.css jest kaskadowym arkuszem stylów, w którym należy umieścić reguły CSS odpowiadające za zmianę stylu wyglądu różnych elementów HTML.

Plik strona.html jest dokumentem HTML, w którym znajdują się różne elementy HTML tworzące wygląd strony internetowej.

Naszym celem w tej części kursu CSS będzie "powiązanie" tych dwóch plików ze sobą, dzięki czemu plik CSS będzie "oddziaływał" na plik HTML.

Pliki strona.html i arkusz.css otwieramy za pomocą Notepad++. Do pliku arkusz.css dodajemy wcześniej utworzone reguły CSS, które znajdowały się w elemencie style umieszczonym w części head dokumentu HTML, czyli:

div {
  background-color:lightblue;
}

p {
  border:1px solid black;
}

Następnie usuwamy z części head dokumentu HTML element style.

Tak sformatowany kod HTML dodajemy do pliku strona.html, czyli:

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

  <body>

    <p>to jest element - p - umieszczony w elemencie - body</p>
    <div>to jest element - div - umieszczony w elemencie - body</div>

  </body>
</html>

Następnie zapisujemy oba pliki.

Ostatnim naszym krokiem jest "powiązanie" tych dwóch plików ze sobą. Aby wykonać tą czynność należy dodać do części head dokumentu HTML następujący element wraz z atrybutami:

<link href="ścieżka do pliku css" rel="stylesheet" >

Atrybut rel wraz z wartością stylesheet informuje przeglądarkę internetową, że chcemy dołączyć zewnętrzny kaskadowy arkusz stylów, czyli plik CSS, do danego dokumentu HTML.

Najbardziej interesującym dla nas atrybutem jest atrybut href, ponieważ oczekuje on od nas podania ścieżki do pliku CSS, czyli naszym zadaniem jest wskazanie, gdzie znajduje się plik CSS względem danego dokumentu HTML, z którym ma być ten plik CSS "powiązany".

Jakakolwiek ścieżka do pliku umieszczona w dokumencie HTML jest dodatkową informacją dla przeglądarki internetowej, dzięki czemu przeglądarka wie gdzie szukać i jakich plików użyć do "zbudowania", a następnie wyświetlenia ostatecznego wyglądu danej strony internetowej.

Dzięki temu, że oba pliki znajdują się w tym samym folderze, to ścieżka do pliku CSS wygląda następująco: arkusz.css (po prostu podajemy nazwę i rozszerzenie pliku zwracając uwagę na wielkość liter).

Jednak należy również rozważyć inne przykłady. Załóżmy, że:

plik HTML - strona.html znajduje się w folderze www
w folderze www znajduje się folder arkusze, w którym znajduje się plik CSS - arkusz.css

W tym wypadku nasza ścieżka do pliku CSS wyglądałaby następująco: arkusze/arkusz.css

Możemy również założyć, że:

plik CSS - arkusz.css znajduje się w folderze arkusze, który z kolei znajduje się w folderze www
w folderze www znajduje się folder pliki, w którym znajduje się plik HTML - strona.html

W tym wypadku nasza ścieżka do pliku CSS wyglądałaby następująco: ../arkusze/arkusz.css

Analizując przykłady, które zostały przedstawione powyżej, można wywnioskować, że:

/ - oznacza "wejście" do folderu (przesunięcie się o jeden poziom "do przodu" w drzewie katalogów)
../ - oznacza "wyjście" z folderu (przesunięcie się o jeden poziom "do tyłu" w drzewie katalogów)

Wszystkie przykłady omówione powyżej (wraz z dodatkowym przykładem, prezentującym tworzenie ścieżek do plików w pliku CSS) możesz pobrać klikając w następujący odnośnik.

Wracamy do naszego pliku strona.html i jego części head, ponieważ należy w niej umieścić wcześniej przedstawiony element link, który "powiąże" ten dokument HTML z plikiem CSS - arkusz.css

Przypominam, że nasze pliki CSS i HTML znajdują się w tym samym folderze, dlatego ścieżka do naszego pliku CSS, to po prostu arkusz.css

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

    <!-- za pomocą elementu - link - "powiązaliśmy" ten dokument HTML z plikiem arkusz.css,
    w którym znajdują się reguły CSS mogące zmienić wygląd elementów w tym dokumencie HTML -->

    <link href="arkusz.css" rel="stylesheet" >
  </head>

  <body>

    <p>to jest element - p - umieszczony w elemencie - body</p>
    <div>to jest element - div - umieszczony w elemencie - body</div>

  </body>
</html>

W pliku CSS - arkusz.css powinny znajdować się następujące reguły CSS:

div {
  background-color:lightblue;
}

p {
  border:1px solid black;
}

Po otwarciu pliku strona.html w naszej przeglądarce internetowej powinniśmy zobaczyć następujący efekt:

to jest element - p - umieszczony w elemencie - body

to jest element - div - umieszczony w elemencie - body

Zalety stosowania zewnętrznego kaskadowego arkusza stylów:

dokument HTML jest pozbawiony kodu CSS, dzięki czemu jego kod HTML jest bardziej przejrzysty i czytelny
jeden plik CSS z regułami CSS, czyli zewnętrzny kaskadowy arkusz stylów, możemy powiązać z nieograniczoną liczbą dokumentów HTML, dzięki czemu możemy mieć wpływ na wygląd wszystkich elementów HTML, które znajdują się w tych dokumentach HTML

Wady stosowania zewnętrznego kaskadowego arkusza stylów:

wymagana znajomość różnych typów selektorów CSS, lecz bez ich znajomości nie mamy co marzyć o skutecznym wykorzystaniu "mocy" języka CSS

W następnej części kursu CSS przyjrzymy się bliżej właściwościom CSS, które służą do formatowania wyglądu elementów HTML.