Metody podpięcia arkusza CSS do pliku HTML

MIROSŁAW ZELENT

Istnieją trzy główne sposoby zainkludowania zapisów CSS do dokumentu HTML. W związku z tym istnieje także hierarchia ważności stylów. W przypadku powtarzających się selektorów to miejsce podpięcia zdecyduje o tym, który styl obowiązuje - zasada ogólna jest taka, iż to najpóźniej zdefiniowany w kodzie styl jest uważany za obowiązujący, gdyż "przesłania" poprzednie zapisy. Ale po kolei - najpierw poznajmy trzy sposoby inkludowania stylów.

1. Zewnętrzny arkusz CSS (osobny plik)

Zewnętrzny arkusz CSS dołączamy do dokumentu HTML znacznikiem znajdującym się w sekcji <head> podstrony (wartość atrybutu href musi wskazywać rzeczywisty, istniejący plik):

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

To zdecydowanie najpopularniejszy sposób dołączania stylów CSS do dokumentów HTML, gdyż jest wygodny i pozwala na rozdzielenie treści witryny (tagów) od warstwy jej wyglądu (CSS). Oczywiście w tym miejscu nasz dociekliwy umysł zada sobie pytanie: skąd wzięła się ta (dziwaczna na pozór) idea rozdzielenia zawartości witryny od jej wyglądu?

Otóż ma to duży sens praktyczny – odczujemy to na przykład w momencie, gdy jednym wpisem w arkuszu CSS uda nam się zmienić kolor wszystkich przycisków w witrynie. Stało się to możliwe, gdyż wszystkie podstrony w serwisie używały tego samego arkusza stylów, podpiętego do każdej z nich. To potężny i genialny w swojej prostocie mechanizm, naturalna ewolucja od czasów gdy wygląd określało się w HTML, na przykład z wielokrotnym użyciem tagów <font>. Na szczęście te czasy bezpowrotnie minęły!

2. Znaczniki <style> w sekcji head

Kod CSS można osadzić pomiędzy tagami <style></style>, koniecznie umieszczonymi wewnątrz sekcji <head>:

<style>

  #container
  {
     color: red;
  }

</style>

Jeśli już stosujemy tagi <style></style> to zazwyczaj w celu przesłonięcia w tym konkretnym dokumencie wybranych stylów z arkusza zewnętrznego (lub ewentualnie chcemy dodać style, których tam zabrakło).

3. Style inline (wewnątrz atrybutu znacznika)

Stylizowanie inline (ang. w linii), oznacza zapisanie CSS jako wartości atrybutu style wybranego tagu HTML, znajdującego się w sekcji <body>:

<div id="container" style="color:blue;"> 
   Kocham Jolkę!
</div>

Takie stylizowanie stosujemy tylko doraźnie (w razie potrzeby), gdyż słabo rozdzielamy tutaj treść witryny od jej wyglądu (kod CSS został "wmieszany" w tag HTML).

Hierarchia ważności metod

Hierarchia ważności poszczególnych sposobów to: 3 > 2 > 1. Style inline przesłaniają te spomiędzy tagów <style>, zaś one przesłaniają właściwości zdefiniowane w zewnętrznym arkuszu (o ile podpięcie pliku tagiem <link> znalazło się przed tagami <style>). Jest to logiczne - style inline występują węwnątrz tagów, stąd siłą rzeczy zawsze znajdą się poniżej sekcji <head> (tagi "siedzą" przecież w <body>). I dlatego style inline są najważniejsze w hierarchii - występują najpóźniej, a więc obowiązują.

Złamanie hierarchii

Uwaga - możemy wymusić obowiązywanie jakiegoś stylu, niejako "wyjąć" jakąś właściwość CSS z tej kaskady i powiedzieć: "ta jest najważniejsza!". Dokonujemy tego stosując po spacji (a przed średnikiem) klauzulę !important (ang. ważny):

#container
 {
    color: red !important; /* wymuszenie koloru czerwonego */
 }

Zwróćmy uwagę: teraz przeglądarka powie sobie: "Aha! Mam pominąć naturalną hierarchię i to ma być czerwone, choćby nie wiem co!". Oczywiście żeby uniknąć nawarstwiania się chaosu, nie należy przesadzać z wyróżnianiem niektórych właściwości. Czasem się to przydaje, jednak należy zachować umiar!

Poprzedni wpis

Następny wpis

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Książka: Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!