12. Dołączanie CSS do strony

Dołączanie CSS do strony to bardzo ważna kwestia, ponieważ od sposobu dodania arkuszy stylów do dokumentu uzależnionych jest kilka kwestii rzutujących na dalszą pracę. Istnieje kilka metod dołączania arkuszy stylów do stron internetowych, z których dwie poznaliśmy już w poprzednim rozdziale. Są to: metoda śródliniowa i metoda polegająca na użyciu elementu style.

Ponadto arkusze stylów można importować do innych arkuszy stylów oraz przede wszystkim arkusze stylów można dołączać do stron z zewnętrznych plików .css.

Ostatnia z wymienionych metod jest najważniejsza i najczęściej stosowana, więc poświęcimy jej najwięcej miejsca. Pozostałe metody też mają swoje zastosowania, ale ich znaczenie jest mniejsze ze względów, o których dowiesz się w dalszej części tego rozdziału.

Od sposobu dołączenia arkusza stylów i jego pochodzenia zależy sposób jego traktowania przez przeglądarkę. Na przykład reguły zawarte w elemencie style są „traktowane” odrobinę inaczej niż reguły dołączone z zewnętrznego pliku.

Podsumowując, w tym rozdziale poznasz następujące metody dołączania arkuszy stylów do stron internetowych:

• Przez dołączenie do dokumentu zewnętrznego pliku .css.
• Importowanie arkuszy CSS do innych arkuszy CSS za pomocą reguły @import.
• Przez dodanie arkusza stylów w elemencie style w nagłówku dokumentu.
• Przez definiowanie arkuszy stylów w atrybucie style elementów HTML.

Ponadto ze sposobem dołączania arkuszy stylów do dokumentu wiążą się pewne bardzo ważne pojęcia dotyczące CSS: kaskada i dziedziczenie. Zatem w tym rozdziale w końcu dowiesz się, co znaczy słowo kaskadowe w nazwie Kaskadowe arkusze stylów, oraz dowiesz się, dlaczego niektórych własności nie trzeba definiować wszystkim elementom z osobna.

Zewnętrzny CSS

W dawnych przedpotopowych czasach, czyli na początku lat 90. XX wieku, nie było jeszcze Kaskadowych arkuszy stylów, a język HTML dość mocno różnił się od dzisiejszego. Główna różnica polegała na tym, że aż do wersji 4.01 język HTML zawierał tzw. elementy prezentacyjne.

Elementy prezentacyjne HTML umożliwiały określanie wyglądu treści na stronie. Na przykład, jak zmienić kolor i inne właściwości pisma akapitów bez użycia CSS? W HTML 4 służył do tego element font, którego w HTML5 już nie ma.

Dlatego w tamtych czasach w kodzie stron internetowych można było napotkać takie fragmenty:

<p><font color="green" face="Verdana, sans-serif" size="4">Tekst akapitu…</font></p>

Ta metoda definiowania właściwości prezentacyjnych miała bardzo poważną wadę: bardzo utrudniała wprowadzanie zmian i wymagała dodawania bardzo wielu znaczników, przez co kod stron internetowych stawał się bardzo rozbudowany.

Wyobraź sobie na przykład, że masz witrynę zawierającą tysiąc stron i na każdej z nich akapity są zdefiniowane w taki sposób, jak powyżej. Jeśli zechcesz cokolwiek zmienić w wyglądzie akapitów, to musisz przejrzeć tysiąc stron i zmodyfikować na nich każdy akapit z osobna.

Te problemy rozwiązują właśnie zewnętrze Kaskadowe arkusze stylów. Po pierwsze umożliwiają zdefiniowanie formatowania dla wybranych grup elementów, np. akapitów, tylko w jednym miejscu, a po drugie uwalniają nas od konieczności wpisywania dodatkowych elementów prezentacyjnych w kodzie strony.

Dzięki zewnętrznym arkuszom stylów wystarczy, że wpiszemy poniższą regułę CSS do pliku z rozszerzeniem .css, np. style.css, a następnie dołączymy go za pomocą specjalnego znacznika do wszystkich naszych stron.

…
p {color: green; font-face: "Verdana, sans-serif"; font-size: 16px;}
…
<p>Tekst akapitu…</p>

Zewnętrzne arkusze stylów dołącza się do dokumentów HTML za pomocą elementu link. Określa on ścieżkę do pliku arkusza stylów i umieszcza się go w sekcji nagłówkowej dokumentu (w elemencie head). Spójrz na poniższy przykład:

<link rel="stylesheet" href="style.css">

Ten element link dołącza do strony arkusz stylów o nazwie style.css, znajdujący się w tym samym folderze, co ta strona. Plik CSS to po prostu zbiór reguł CSS, więc w tym przypadku wystarczy w nim wpisać naszą powyższą regułę, dodać powyższy element link do strony (ewentualnie dostosowując ścieżkę) i gotowe – akapity będą miały zielony tekst drukowany czcionką Verdana o rozmiarze 16 pikseli.

Element link nie służy tylko do dołączania arkuszy stylów do strony, ale w tym celu jest używany zdecydowanie najczęściej. Jego składnia w takim przypadku jest bardzo prosta. Należy zdefiniować atrybut rel o wartości stylesheet i podać ścieżkę do pliku z rozszerzeniem CSS.

Reguła @import

Do plików CSS można dołączać zawartość innych plików CSS. Służy do tego reguła @import. Jest to specjalna konstrukcja służąca do importowania arkuszy stylów do innych arkuszy stylów.

Reguł @import można użyć kilka, jeśli chcemy zaimportować kilka arkuszy stylów, i wszystkie one powinny znajdować się na samym początku zawartości pliku .css. Dostępne są dwa rodzaje składni tej konstrukcji:

@import "ścieżka_do_pliku.css";
@import url("ścieżka_do_pliku.css");

Ścieżkę do pliku można wpisać bezpośrednio jako łańcuch znaków w cudzysłowie (pierwszy przykład) lub w formie funkcji url (drugi przykład). Obie wersje są równoważne.

Przeglądarka szuka pliku wskazywanego przez regułę @import, pobiera jego zawartość i wstawia ją w miejscu tej reguły, tworząc w ten sposób jeden większy arkusz stylów.

Zewnętrzne arkusze stylów dają najlepsze możliwości w zakresie zarządzania całą witryną i można powiedzieć, że są praktycznie jedynym właściwym sposobem dołączania arkuszy stylów do gotowych stron przeznaczonych do normalnego użytku przez zwykłych użytkowników.

Zanim jednak serwis internetowy trafi na serwer i zostanie udostępniony publicznie w internecie, trzeba nad nim popracować i go przetestować. Podczas testów bardzo często stosuje się inne metody dodawania CSS do strony, które umożliwiają szybkie sprawdzenie różnych pomysłów.

Pierwsza z tych metod to wstawianie arkuszy stylów w nagłówku dokumentu za pomocą elementu style, a druga – dodawanie CSS bezpośrednio do elementów za pomocą atrybutu style. Przyjrzymy się im teraz dokładniej.

Wewnętrzny CSS

Wewnętrzny CSS dodajemy, jak sama nazwa wskazuje, wewnątrz wybranej strony. Tej metodzie brakuje wszechstronności charakterystycznej dla stylów zewnętrznych, ponieważ reguły dodane do strony w ten sposób działają tylko na tej jednej stronie. Z tego względu ta metoda jest stosowana tylko w bardzo prostych serwisach składających się z jednej strony oraz do celów testowych.

Z rzadka można spotkać wewnętrzny arkusz stylów w większym serwisie, kiedy zawiera on jakąś wyjątkową stronę wymagającą specjalnego formatowania, ale to marginalne zjawisko.

Do dodawania wewnętrznych arkuszy stylów do stron internetowych służy element style, który powinien znajdować się w nagłówku dokumentu (w elemencie head). Jest to prosty element parzysty, nie wymagający żadnych atrybutów.

Aby na przykład zmienić kolor tekstu wszystkich akapitów na zielony na wybranej stronie, wystarczy w nagłówku tego dokumentu wpisać taki kod:

<style>
    p {color: green}
</style>

Teraz wszystkie akapity na naszej stronie będą miały zielony kolor tekstu.

Poza tym, co zostało napisane powyżej, w elemencie HTML style obowiązują takie same zasady, jak w plikach CSS, tzn. można umieszczać w nim tylko kod CSS itd.

W tym kursie często używamy wewnętrznych arkuszy stylów, bo podczas nauki i testowania to bardzo wygodne, kiedy zarówno kod HTML, jak i CSS znajdują się w jednym pliku.

Śródliniowy CSS

Ostatnia metoda dodawania arkuszy stylów do stron internetowych to tzw. style śródliniowe (ang. inline style). Jest najmniej elastyczna i najrzadziej stosowana. Nie poleca się jej z prostego powodu: praktycznie cofa użytkownika do czasów znaczników prezentacyjnych, których pozbyto się w HTML5.

Śródliniowy arkusz stylów to reguły CSS zdefiniowane wprost w znaczniku HTML za pomocą atrybutu style, np.:

<p style="color: green">Tekst…</p>

Czasami ta metoda znajduje zastosowanie podczas testów, kiedy na przykład pracujemy w narzędziach dla webmasterów przeglądarki i chcemy szybko sprawdzić efekt dodania jakichś deklaracji.

Dodawanie wielu arkuszy stylów do strony

Do strony internetowej można dodać dowolną liczbę arkuszy stylów z różnych źródeł. W elemencie head można umieścić kilka elementów link i style, w każdym pliku .css może znajdować się wiele reguł @import i każdy element w sekcji body dokumentu może mieć zdefiniowany atrybut style.

Na przykład poniższy dokument jest jak najbardziej prawidłowy pod względem składni:

<!doctype html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Richard Feynman</title>
    <style>
      p {
        margin: 10px;
      }
    </style>
    <style>
      h1 {
        color: green;
      }
    </style>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="jeszczeinnestyle.css">
  </head>
  <body>
    <h1 style="color: red">Richard Feynman</h1>
    <p>Richard Phillips Feynman to amerykański fizyk teoretyk.</p>
  </body>
</html>

Skoro arkusze stylów mogą pochodzić z wielu różnych źródeł, konieczne było opracowanie szczegółowych zasad ich traktowania w zależności od pochodzenia. Jeśli przyjrzysz się uważnie powyższemu dokumentowi, to zauważysz, że zawiera on dwie definicje koloru tekstu elementu h1. Pierwsza ustawia kolor zielony, a druga – czerwony. Jak myślisz, jaki ostatecznie kolor przyjmie ten nagłówek?

Odpowiedź na to pytanie tkwi w samej nazwie używanej przez nas technologii. Jak już wiesz, skrót CSS pochodzi od angielskich słów Cascading Style Sheets oznaczających Kaskadowe arkusze stylów. W jednym z poprzednich rozdziałów obiecaliśmy, że wyjaśnimy, co znaczy słowo „Kaskadowe” w tej nazwie. Teraz spełniamy tę obietnicę.

Kaskada CSS

Słowo „Kaskadowe” w nazwie Kaskadowe arkusze stylów odnosi się do kolejności stosowania arkuszy stylów do elementów HTML zależnie od ich pochodzenia. Ten proces porównuje się właśnie z kaskadą, która „spływa” po dokumencie HTML niczym woda z wodospadu.

Jeśli do strony są dołączone arkusze stylów pochodzące z różnych źródeł, to ich kolejność pod względem ważności jest następująca:

1. Arkusze śródliniowe
2. Arkusze wewnętrzne i zewnętrzne
3. Domyślne arkusze przeglądarki

Co znaczy „kolejność pod względem ważności”? Jeśli w dwóch różnych miejscach zostanie zdefiniowana ta sama własność, ale o różnej wartości, to przeglądarka musi wybrać jedną z nich. Decyzję tę podejmuje właśnie według powyższych zasad, tzn. za najważniejszą uzna definicję z arkusza śródliniowego. Powiedzmy na przykład, że mamy następujący dokument HTML i dołączony do niego arkusz stylów style.css o zawartości pokazanej niżej.

Dokument HTML:

<!doctype html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Richard Feynman</title>
    <style>
      p {
        color: red;
      }
    </style>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Richard Feynman</h1>
    <p style="color: green;">Richard Phillips Feynman to amerykański fizyk teoretyk.</p>
  </body>
</html>

Zawartość pliku style.css:

p {color: blue;}

Domyślny arkusz stylów przeglądarki nadaje tekstowi akapitów kolor czarny. Jednak na naszej stronie akapity nie będą czarne, ponieważ w elemencie style zmieniliśmy ich kolor na czerwony. Ten nie zostanie jednak ostatecznie zastosowany, ponieważ za elementem style znajduje się element link dołączający arkusz stylów, który zmienia kolor tekstu akapitów na niebieski. Mimo tego, tekst akapitów nie będzie niebieski, tylko zielony, ponieważ takie jest ustawienie zdefiniowane w śródliniowym arkuszu stylów (style="color: green;").

W tym przypadku kolejność arkuszy wewnętrznego i zewnętrznego nie ma znaczenia, ponieważ i tak ostatecznie „wygra” arkusz śródliniowy.

Gdyby jednak nie było arkusza śródliniowego, to tekst akapitów miałby kolor niebieski, ponieważ przeglądarka zastosowałaby arkusze wewnętrzny i śródliniowy w kolejności ich dołączenia do strony. W przedstawionym przykładzie zewnętrzny arkusz stylów jest dołączony później, więc jego reguły przesłoniłyby reguły arkusza wewnętrznego.

Możemy też zamienić arkusze wewnętrzny i zewnętrzny miejscami:

…
<link rel="stylesheet" href="style.css">
<style>
  p {
    color: red;
  }
</style>
…

Teraz tekst akapitów byłby czerwony, ponieważ arkusz wewnętrzny jest dołączony później niż zewnętrzny. Krótko mówiąc, arkusze wewnętrzny i zewnętrzny są tak samo ważne, więc w przypadku konfliktu ustawień między nimi decydujące znaczenie ma ich kolejność.

Precyzja selektorów

Kolejność i pochodzenie arkuszy stylów to niejedyne czynniki decydujące o randze reguł CSS. Na bardziej szczegółowym poziomie znaczenie mają także selektory.

Ogólna zasada jest bardzo prosta – im selektor ma większą specyficzność lub precyzję (ang. selector specificity), tym wyższą rangę nadaje swojej regule (oczywiście przy założeniu, że pochodzenie jeszcze nie rozstrzygnęło tej kwestii).

Wrócimy do poprzedniego przykładu, w którym zmienialiśmy kolejność dołączania arkuszy stylów, aby zmienić kolor tekstu akapitów na czerwony lub niebieski. Jeśli zwiększymy precyzję selektora w jednym ze źródeł, to zyska on większą rangę i będzie przeważał bez względu na kolejność dołączenia arkuszy.

O precyzji selektora decyduje to, jak szczegółowo określa on element, do którego się odnosi. Najmniej precyzyjny jest selektor uniwersalny *, który odnosi się do wszystkich elementów. Nieco bardziej precyzyjny jest selektor typu, np. p. Jeszcze bardziej precyzyjny jest selektor potomka, np. body p itd. W uproszczeniu można powiedzieć, że im więcej elementów zawiera w swoim składzie selektor, tym ma wyższą rangę.

Zgodnie z tymi zasadami po dodaniu poniższego arkusza stylów do strony tekst akapitów w naszym przykładowym dokumencie pokazanym powyżej miałby kolor zielony:

html body p {color: green;}
body p {color: yellow;}
p {color: red;}

As z rękawa, czyli deklaracja !important

Jeśli bardzo chcemy, aby wybrana przez nas deklaracja CSS została zastosowana bez względu na wszystko, to możemy wyjąć asa z rękawa w postaci deklaracji !important. Jej dodatek sprawia, że dana deklaracja zyskuje najwyższą rangę bez względu na pochodzenie arkusza stylów i inne czynniki.

Takie narzędzie jest bardzo przydatne w przypadku bardziej skomplikowanych serwisów internetowych opartych na systemach zarządzania treścią (ang. Content Management System — CMS), takich jak WordPress.

W systemach tych często instaluje się różne wtyczki utworzone przez innych programistów. Wtyczki te dodają do witryny własne arkusze stylów zawierające różne ustawienia. Jeśli któreś z tych ustawień nam nie odpowiada i chcemy mieć absolutną pewność, że nasz styl będzie traktowany priorytetowo, możemy dodać deklarację !important do naszego kodu.

Deklarację !important dodaje się do indywidualnych deklaracji, w których stanowi ona ostatni element, umieszczony za wartością i oddzielony od niej spacją, np.: p {color: green !important;}. W poniższym przykładzie tekst akapitów będzie zielony nawet mimo tego, że w stylu śródliniowym ustawiono kolor czerwony.

…
    <style>
      p {color: green !important;}
      p {color: yellow;}
    </style>
  </head>
  <body>
    <p style="color: red;">Richard Phillips Feynman to amerykański fizyk teoretyk.</p>
  </body>
…

Dziedziczenie CSS

Pojęcie dziedziczenia w CSS ściśle wiąże się z pojęciem drzewa dokumentu HTML i relacji występujących między elementami HTML, które omówiliśmy w rozdziale Składnia i rodzaje elementów HTML.

Zapewne pamiętasz, że wszystkie elementy na stronie znajdują się w elemencie głównym html. Całą treść wyświetlaną w oknie przeglądarki obejmuje element body. Elementy reprezentujące akapity (p) mogą zawierać między innymi skróty reprezentowane przez element abbr itd.

Charakterystyczną cechą Kaskadowych arkuszy stylów jest to, że elementy potomne dokumentu HTML dziedziczą niektóre właściwości swoich przodków. Jeśli na przykład ustawimy zielony kolor tekstu elementowi body, to zostanie on odziedziczony przez wszystkie pozostałe elementy zawierające tekst na stronie, chyba że celowo to zmienimy za pomocą odpowiednich reguł CSS. Przeanalizuj poniższy przykład kodu i zastanów się, jaki kolor będzie miał tekst nagłówka h1 i h2, akapitów oraz skrótu.

<!doctype html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Richard Feynman</title>
    <style>
      body {color: green;}
      h1 {color: red;}
      abbr {color: blue;}
    </style>
  </head>
  <body>
    <h1>Richard Feynman</h1>
    <p>Richard Phillips Feynman studiował na <abbr>MIT</abbr>.</p>
    <h2>Ciekawostki</h2>
    <p>Richard Feynman brał udział w projekcie Manhattan.</p>
  </body>
</html>

W tym przypadku tekst nagłówka h1 będzie czerwony (h1 {color: red;}), tekst akapitów (z wyjątkiem skrótu znajdującego się w pierwszym z nich) i nagłówka h2 będzie zielony (odziedziczą go po elemencie body – body {color: green;}), a tekst skrótu będzie niebieski (abbr {color: blue;}).

Wszystkie elementy na stronie odziedziczyły zielony kolor tekstu po elemencie body, ale w niektórych przypadkach zmieniliśmy go za pomocą dodatkowych reguł, które przeważyły nad tym ogólnym ustawieniem dzięki zasadom kaskadowości.

To wszystko, jeśli chodzi o podstawy technologii CSS. Teraz pozostaje Ci tylko poznać jej wszystkie własności oraz rozszerzyć wiedzę na niektóre tematy, np. na temat selektorów. W kolejnych rozdziałach będziesz stopniowo poznawać najczęściej używane elementy technologii CSS. A zaczniesz od nauki definiowania dopełnienia, obramowania i rozmiaru czcionki nowych elementów HTML, służących do reprezentowania cytatów i ich źródeł.

Podsumowanie

• Arkusze stylów można dołączać do strony z plików zewnętrznych, w nagłówku dokumentu w elemencie style lub w atrybucie style indywidualnych elementów HTML.
• Zewnętrzny plik arkuszy stylów musi mieć rozszerzenie .css i dołącza się go do strony za pomocą elementu link.
• Za pomocą reguły @import można importować jedne arkusze zewnętrzne do innych arkuszy zewnętrznych.
• Do strony można dołączyć dowolną liczbę arkuszy stylów każdego typu.
• Kaskada określa kolejność stosowania arkuszy stylów do elementów HTML.
• O ważności reguły CSS decyduje także precyzja jej selektora.
• Za pomocą deklaracji !important można wymusić zastosowanie wybranej deklaracji CSS bez względu na inne czynniki.
• Niektóre własności CSS są dziedziczone przez elementy potomne HTML.

Ćwiczenia

1. Skopiuj poniższy kod dokumentu do edytora kodu i dodaj do niego arkusze stylów według podanych poniżej instrukcji.

   <!doctype html>
   <html lang="pl">
     <head>
       <meta charset="utf-8">
       <title>Richard Feynman</title>
     </head>
     <body>
       <h1>Richard Feynman</h1>
       <p>Richard Phillips Feynman studiował na <abbr>MIT</abbr>.</p>
       <h2>Ciekawostki</h2>
       <p>Richard Feynman brał udział w projekcie Manhattan.</p>
     </body>
   </html>

   1. Dołącz zewnętrzny arkusz stylów o nazwie style.css i umieść w nim regułę zmieniającą kolor tekstu elementu h1 na żółty.
   2. Dołącz wewnętrzny arkusz stylów i umieść w nim regułę zmieniającą kolor akapitów na zielony.
   3. Za pomocą stylu śródliniowego zmień kolor tekstu drugiego akapitu na niebieski.
   4. Dodaj komentarze opisujące działanie znajdujących się w nich reguł do arkusza zewnętrznego i wewnętrznego.