W tym rozdziale dowiesz się...

Sposoby wstawiania stylów na stronach WWW.

• 
  Wstęp

  Jakie są sposoby wstawiania (osadzania) stylów CSS na stronach WWW?

• 
  Styl lokalny <... style>

  W jaki sposób bezpośrednio przypisać styl do dowolnego znacznika?

• 
  Rozciąganie stylu <span style>

  W jaki sposób objąć stylem kilka elementów tekstowych?

• 
  Wydzielone bloki <div style>

  W jaki sposób objąć stylem grupę elementów blokowych?

• 
  Wewnętrzny arkusz stylów <style>

  Jak osadzić arkusz stylów CSS bezpośrednio w dokumencie?

• 
  Zewnętrzny arkusz stylów <link "stylesheet"> @charset

  Jak dołączyć arkusz stylów CSS z zewnętrznego pliku?

• 
  Alternatywny arkusz stylów <link "alternate stylesheet">

  W jaki sposób dać użytkownikowi możliwość wyboru jednego z przygotowanych arkuszy CSS, czyli wyglądu strony?

• 
  Import arkusza stylów @import

  Jak zaimportować arkusz stylów z zewnętrznego dokumentu?

• 
  Kaskadowość stylów

  Co to jest kaskadowość stylów CSS? W jaki sposób złamać zasadę kaskadowości?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

Wstęp

Jakie są sposoby wstawiania (osadzania) stylów CSS na stronach WWW?

Kaskadowe Arkusze Stylów CSS nie mogą funkcjonować samodzielnie, ponieważ definiują jedynie sposób formatowania (wygląd) elementów dokumentu, ale same ich nie tworzą. Elementy muszą zostać wstawione do dokumentu w postaci struktury znaczników np. za pomocą języka XHTML lub HTML. Dlatego aby poznać ogrom dodatkowych możliwości, jakie dają style CSS, konieczna jest wcześniejsza znajomość zasad języka HTML.

Zapamiętaj zatem prostą zasadę: za pomocą języka HTML wstawia się znaczniki do kodu źródłowego strony, a następnie dzięki CSS można nadać im potem określony sposób wyświetlania.

Sposoby wstawiania stylów do gotowych dokumentów są różne. Nie znaczy to, że jedne są lepsze od drugich. Każdy sposób jest przydatny w innych sytuacjach. Większość witryn stosuje jednocześnie wszystkie z przedstawionych metod osadzania CSS - w zależności od konkretnej potrzeby.

Styl lokalny <... style>

W jaki sposób bezpośrednio przypisać styl do dowolnego znacznika?

<element style="cecha: wartość; cecha2: wartość2...">...</element>

Styl lokalny pozwala na nadanie formatowania konkretnemu pojedynczemu elementowi strony. Dlatego właśnie styl tego rodzaju nazywa się także styl inline (ang. "w linii"), ponieważ jest wstawiany w tej samej linii, w której znajduje się element formatowany. O tym który to będzie element, decyduje słowo kluczowe "element" (widoczny powyżej, w deklaracji stylu).

Zwróć uwagę, że jednemu elementowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Przykład <... style>

Po wpisaniu w edytorze:

<p style="color: red">To jest jakiś tekst</p>

Otrzymamy:

To jest jakiś tekst

Rozciąganie stylu <span style>

W jaki sposób objąć stylem kilka elementów tekstowych?

<span style="cecha: wartość; cecha2: wartość2...">...</span>

Znacznik <span>...</span> pozwala na objęcie pewnego większego fragmentu dokumentu. Pojedynczym znacznikiem <span>...</span> możemy objąć kilka różnych elementów, które są wyświetlane w linii (sam element SPAN tak właśnie jest wyświetlany), np. wytłuszczenie tekstu oraz kursywę. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać.

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Przykład <span style>

Po wpisaniu w edytorze:

<span style="color: red">
	<b>To jest pogrubienie (element wyświetlany w linii) w ramach SPAN</b>,
	a to jest zwykły tekst - również wewnątrz span.
</span>

Otrzymamy:

To jest pogrubienie (element wyświetlany w linii) w ramach SPAN, a to jest zwykły tekst - również wewnątrz SPAN.

Pytania i odpowiedzi <span style>

Do czego służy znacznik SPAN?

Znacznik <span> w HTML służy do wyróżniania lub stylizacji konkretnego fragmentu tekstu lub zawartości bez zmiany struktury dokumentu. Może być używany do zastosowań takich jak zmiana koloru, dodanie efektu podkreślenia lub nadania specjalnego formatowania wybranym słowom lub literom.

Czym się różni SPAN od DIV?

Zarówno znacznik <span> jak i <div> są znacznikami kontenerowymi w HTML, jednak różnią się głównie zastosowaniem i wpływem na strukturę dokumentu. <span> jest używany do stylizacji lub wyróżnienia fragmentów tekstu wewnątrz linii tekstu, podczas gdy <div> jest używany do tworzenia bloków kontenerowych, które mogą zawierać inne elementy HTML i służą do grupowania i układania zawartości strony.

Wydzielone bloki <div style>

W jaki sposób objąć stylem grupę elementów blokowych?

<div style="cecha: wartość; cecha2: wartość2...">...</div>

Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać. Metoda ta jest bardzo podobna do SPAN, lecz obejmuje zwykle większe fragmenty dokumentu (może zawierać w sobie różne znaczniki jak również inne bloki). Dodatkowo DIV domyślnie jest wyświetlany:

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

natomiast SPAN:

XXXXXXXXXXXXXXXXXXXXXXXXw liniiXXXXXXXXXXXXXXXXXXXXXXXX

Generalnie element blokowy (DIV) może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur. Natomiast elementy wyświetlanie w linii (SPAN) nie mogą zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst. Wewnątrz DIV można oczywiście wpisać również SPAN [Aby dowiedzieć się więcej, zobacz: Wyświetlanie].

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Przykład <div style>

Po wpisaniu w edytorze:

<div style="background-color: yellow">
	<span style="color: red">
		<b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone na żółtym tle</b>,
		a to jest zwykły tekst - również wewnątrz DIV i SPAN.
	</span>
	To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony, ale ma żółte tło.
	<p>A to jest akapit (element blokowy) w ramach DIV.</p>
</div>

Otrzymamy:

Pytania i odpowiedzi <div style>

Jak podzielić stronę na bloki HTML?

Stronę HTML można podzielić na bloki za pomocą znacznika <div>, który tworzy kontenerowy blok bez żadnych domyślnych stylów lub efektów wizualnych. Poprzez nadawanie stylów CSS możemy nadal nadzorować wygląd i układ tych bloków oraz grupować w nich powiązane elementy.

Co daje DIV HTML?

Znacznik <div> w HTML jest elementem blokowym, który pozwala tworzyć kontenerowe bloki na stronie. Dzięki niemu można grupować inne elementy, tworzyć układy strony, stosować style CSS oraz manipulować zawartością za pomocą skryptów JavaScript, co umożliwia bardziej elastyczną i kontrolowaną strukturę strony internetowej.

Wewnętrzny arkusz stylów <style>

Jak osadzić arkusz stylów CSS bezpośrednio w dokumencie?

<head>
	(...)
<style>
selektor { cecha: wartość; cecha2: wartość2... }
selektor2 { cecha: wartość; cecha2: wartość2... }
(...)
</style>
	(...)
</head>

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie.

Komentarze w arkuszu stylów pisze się używając znaków: /* (otworzenie komentarza) oraz */ (zamknięcie komentarza), np.: /*12345*/. Wszystko pomiędzy tymi znakami jest ignorowane przez przeglądarkę. Komentarzy takich nie można zagnieżdżać, tzn. niedozwolony jest zapis: /*123/*000*/456*/. Komentarz może składać się z wielu linii, np.:

/* Ten tekst zostanie zignorowany przez przeglądarkę,
ale może zawierać informacje cenne dla projektanta arkusza CSS */

Ponadto w języku HTML całą zawartość arkusza stylów, tzn. wnętrze znacznika <style>...</style> można ująć w komentarz HTML:

<style>
<!--
/* To jest arkusz stylów kompatybilny wstecz */
-->
</style>

Dzięki nim treść arkusza nie będzie widoczna na ekranie starszych przeglądarek, które nie obsługują stylów. Aktualnie jednak trudno znaleźć przeglądarkę, która nie potrafiłaby zinterpretować znacznika STYLE. Oczywiście znaki <!-- oraz --> znajdujące się na początku i na końcu arkusza, nie są znakami komentarza stylów lecz HTML i nie można ich używać wewnątrz arkusza w innych miejscach niż podane!

W języku XHTML ukrywanie arkusza CSS w komentarzach <!-- ... --> jest niezalecane. XHTML jest zgodny z XML, gdzie panuje zasada, że przed etapem właściwego parsowania dokumentu, można z niego usunąć wszystkie komentarze. Oznaczałoby to, że tego typu skrypty i arkusze w ogóle nie byłyby brane pod uwagę przy renderowaniu strony!

Znacznik STYLE może znajdować się tylko i wyłącznie w nagłówku dokumentu.

Przykład <style>

Jeśli w treści nagłówkowej strony zostałby umieszczony następujący wewnętrzny arkusz stylów:

<style>
h6 { color: red }
</style>

to po wpisaniu w dowolnym miejscu strony po prostu:

<h6>To jest tytuł rzędu 6</h6>

otrzymalibyśmy tytuł rzędu szóstego koloru czerwonego (color: red) i to niezależnie od tego, ile będzie na stronie takich tytułów. Wygodne, prawda? :-)

Pytania i odpowiedzi <style>

W jakim elemencie powinien być umieszczony wewnętrzny arkusz stylów?

Wewnętrzny arkusz stylów CSS powinien być umieszczony wewnątrz znacznika <style> w sekcji <head> dokumentu HTML.

Jak zrobić arkusz stylów CSS?

Aby stworzyć arkusz stylów CSS, należy użyć znacznika <style> w sekcji <head> dokumentu HTML lub umieścić styl w zewnętrznym pliku CSS i dołączyć go za pomocą znacznika LINK.

Do czego służą arkusze stylów CSS?

Arkusze stylów CSS służą do definiowania wyglądu i formatowania elementów HTML, umożliwiając kontrolę nad kolorami tekstu oraz tła, rozmiarami czcionek, marginesami i innymi aspektami prezentacji strony.

Który znacznik pozwala na wewnętrzne dodawanie stylów CSS w kodzie HTML?

Znacznik <style> pozwala na wewnętrzne dodawanie stylów CSS w kodzie HTML.

Jakie są zastosowania osadzonego arkusza stylów?

Osadzony arkusz stylów (wewnętrzny) jest przydatny, gdy chcemy dostosować styl konkretnego dokumentu lub strony internetowej, unikając zmian globalnych. Jest szczególnie użyteczny przy tworzeniu pojedynczych stron lub dokumentów o specyficznym wyglądzie.

Zewnętrzny arkusz stylów <link "stylesheet"> @charset

Jak dołączyć arkusz stylów CSS z zewnętrznego pliku?

Zewnętrzny arkusz stylów <link "stylesheet">

<head>
	(...)
	<link rel="stylesheet" href="style.css">
	(...)
</head>

Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. Dodatkowo jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Pozwala to zaoszczędzić mnóstwo czasu (zwłaszcza niezdecydowanym ;-)).

Wstawienie takiego zewnętrznego arkusza stylów jest bardzo proste. Wystarczy wpisać w treści nagłówkowej każdego z dokumentów (pomiędzy znacznikami <head> a </head>), przedstawioną powyżej linijkę. Deklaracje stylów zawarte w zewnętrznym arkuszu, zostaną automatycznie przeniesione do podanej strony (podczas jej wyświetlania). Wszystkie podstrony serwisu z osadzonym w swoim nagłówku takim poleceniem, uzyskają wygląd, określony w załączonym arkuszu stylów.

W pojedynczym dokumencie HTML można dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element <link rel="stylesheet">. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później. Zwykle tworzy się pojedynczy zewnętrzny arkusz i załącza go w całym serwisie, czyli na wszystkich podstronach. Czasami jednak dodatkowo poza nim projektuje się osobne arkusze, ustalające wygląd np. odrębnych kategorii tematycznych serwisu. Mamy wtedy sytuację, gdy na stronie głównej jest dołączony tylko jeden arkusz stylów, a na podstronach kategorii tematycznych - po dwa.

A teraz kilka słów o tym, jak napisać taki zewnętrzny arkusz stylów. Jest on po prostu zwykłym plikiem tekstowym. Aby go utworzyć, wystarczy zwykły edytor tekstu, w którym piszemy takie same deklaracje stylów selektor { cecha: wartość }, jak w przypadku wewnętrznego arkusza stylów. Oczywiście można się posłużyć specjalnym edytorem CSS. Należy jedynie pamiętać, że plik będący zewnętrznym arkuszem stylów musi mieć rozszerzenie *.css!

Wstawienie białych znaków (spacje, tabulacje, znaki nowej linii) w arkuszu CSS nie ma wpływu na jego działanie. Dlatego możesz ułożyć wpisywane reguły CSS w taki sposób, aby były bardziej czytelne.

Znacznik LINK może znajdować się tylko i wyłącznie w nagłówku dokumentu.

W MSIE 8.0 i starszych można osadzić tylko 31 zewnętrznych arkuszy CSS - deklaracje z następnych plików zostaną pominięte!

Przykład <link "stylesheet">

A oto przykładowy zewnętrzny arkusz stylów:

/* SELEKTORY: */
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #003868;
	background-color: #80B8E8;
	margin: 6mm;
}

p {
	text-align: justify;
}

pre, code {
	font-size: 8pt;
}

Ciekawostka
Przeglądarki zwykle umożliwiają formatowanie wszystkich oglądanych stron (bez względu na ich pochodzenie), przy użyciu arkusza stylów dostarczonego przez użytkownika. Pozwala to np. określić odpowiadającą nam wielkość czcionki, jej rodzaj, kolor tła oraz tekstu itd. Przykładowo, aby zaimplementować taką funkcję w przeglądarce Microsoft Internet Explorer, należy wybrać polecenie z menu programu: Narzędzia/Opcje internetowe... i kliknąć przycisk: Dostępność.... Następnie w otwartym oknie dialogowym należy zaznaczyć: Formatuj dokumenty używając mojego arkusza stylów, a poniżej wpisać ścieżkę do pliku arkusza (można również użyć przycisku Przeglądaj...).

Strona kodowa @charset

Jeżeli arkusz stylów zawiera narodowe znaki diakrytyczne, konieczne może być określenie strony kodowej. Można to zrobić umieszczając na samym początku arkusza stylów deklarację:

@charset "strona kodowa";

Przed deklaracją strony kodowej w arkuszu stylów nie mogą się znajdować żadne znaki - nawet spacje, tabulatory ani puste linijki.

Ostateczna strona kodowa zewnętrznego arkusza stylów, nawet jeśli nie określimy jej w sposób jawny, zostanie wyznaczona zgodnie z następującymi priorytetami:

1. Deklaracja charset wysłana przez serwer wraz z plikiem arkusza stylów
2. Znacznik BOM lub/i deklaracja @charset wstawione na początku arkusza stylów
3. Atrybut charset="..." znacznika LINK, który osadza zewnętrzny arkusz stylów
4. Deklaracja strony kodowej dokumentu HTML, w którym arkusz stylów został osadzony albo innego arkusza, w którym został zaimportowany
5. Jeżeli w żaden sposób nie udało się wyznaczyć strony kodowej, przyjmij UTF-8.

Pytania i odpowiedzi <link "stylesheet">

Jak dodać zewnętrzny arkusz stylów CSS?

Aby dodać zewnętrzny arkusz stylów CSS, należy stworzyć oddzielny plik CSS zawierający reguły stylów, a następnie użyć znacznika <link> w sekcji <head> dokumentu HTML, aby dołączyć ten plik do strony. Przykład: <link rel="stylesheet" href="nazwa_pliku.css">.

Jak podłączyć style CSS do HTML?

Aby podłączyć style CSS do HTML, można użyć znacznika <link> umieszczając go w sekcji <head> dokumentu HTML. Znacznik <link> powinien zawierać atrybut rel="stylesheet" oraz atrybut href wskazujący na ścieżkę do pliku CSS zawierającego style.

Jak zapisać plik CSS?

Plik CSS można zapisać jako zwykły plik tekstowy z rozszerzeniem *.css. W edytorze tekstu należy utworzyć nowy plik, wpisać w nim reguły stylów, a następnie zapisać go z odpowiednią nazwą i rozszerzeniem, na przykład: "style.css".

Alternatywny arkusz stylów <link "alternate stylesheet">

W jaki sposób dać użytkownikowi możliwość wyboru jednego z przygotowanych arkuszy CSS, czyli wyglądu strony?

<head>
	<link rel="stylesheet" href="style.css" title="Nazwa domyślna">
	<link rel="alternate stylesheet" href="style1.css" title="Nazwa 1">
	<link rel="alternate stylesheet" href="style2.css" title="Nazwa 2">
	<link rel="alternate stylesheet" href="style3.css" title="Nazwa 3">
	(...)
</head>

Alternatywny arkusz stylów pozwala udostępnić użytkownikowi kilka wersji wyglądu strony do wyboru. Projektuje się wtedy kilka zewnętrznych arkuszy CSS, a następnie osadza w specjalny sposób, dzięki czemu w przeglądarce użytkownika pojawi się możliwość wyboru jednego spośród przygotowanych wyglądów. Jest to namacalny dowód potęgi języka CSS. Nie trzeba tworzyć, a potem aktualizować kilku wersji witryny, aby zapewnić użytkownikom możliwość dopasowania jej do własnych oczekiwań. Aby dodać nowy wygląd, wystarczy tylko przygotować dodatkowy plik *.css, a zmiana treści serwisu nie będzie wymagała żadnych modyfikacji wyglądu poszczególnych stylów.

Jeśli chcemy, aby niektóre arkusze nie były dostępne do podmiany przez użytkownika, wystarczy osadzić je w tradycyjny sposób, tzn. jako arkusze domyślne bez podania atrybutu title="...". Taki arkusz domyślny, nawet po wyborze przez użytkownika arkusza alternatywnego, nadal będzie wpływał na wygląd strony, a alternatywny zostanie do niego dopisany.

Niestety współczesne popularne przeglądarki nie obsługują alternatywnych arkuszy stylów, jednak osadzenie ich w podany sposób nie powoduje błędów w wyświetlaniu strony. Dodatkowym rozwiązaniem może być skrypt Skórki, który ponadto zapamiętuje wybór dokonany przez użytkownika przy przechodzeniu pomiędzy stronami.

Import arkusza stylów @import

Jak zaimportować arkusz stylów z zewnętrznego dokumentu?

<style>
@import url(adres zewnętrznego arkusza stylów);
</style>

Polecenie można wstawić zarówno w wewnętrznym jak i zewnętrznym arkuszu stylów. Pozwala wczytać zewnętrzny arkusz stylów, przy czym może się on znajdować na tym samym serwerze (wtedy można podać względną ścieżkę dostępu) lub w dowolnym miejscu w obrębie całego Internetu (wtedy podajemy adres internetowy). Po wczytaniu, zostanie on automatycznie dołączony do strony.

Oprócz importu arkusza, możesz umieścić pomiędzy znacznikami <style> a </style> dodatkowo własne reguły stylów, a nawet polecenie importu drugiego arkusza (ich działania zostaną połączone, a w przypadku konfliktów pierwszeństwo będzie miała ostatnia w kolejności deklaracja importu).

Import arkusza stylów działa bardzo podobnie jak dołączenie zewnętrznego arkusza - w obu przypadkach reguły CSS są zapisane w osobnym pliku *.css. Różnica w działaniu jest subtelna, ale ważna. Mianowicie importowany arkusz stylów ma taki sam priorytet kaskadowości (ważności), jak arkusz do którego został zaimportowany. Innymi słowy, jeśli chcemy, aby określony arkusz CSS był ważniejszy od wszystkich pozostałych zewnętrznych arkuszy, możemy go dołączyć poniżej innych odwołań do arkuszy lub zaimportować w wewnętrznym arkuszu. Import arkuszy może również być przydatny, jeśli chcemy oszczędzić wstawiania dodatkowych znaczników <link rel="Stylesheet">. W takim przypadku dołącza się tylko jeden zewnętrzny plik *.css, a w nim importuje pozostałe arkusze.

Jeżeli polecenie importu znajduje się w zewnętrznym arkuszu stylów, to relatywną ścieżkę dostępu do arkusza importowanego należy konstruować względem położenia arkusza CSS, w którym jest wstawione polecenie @import, a nie względem dokumentu HTML!

UWAGA!
Wszystkie polecenia importu (może ich być kilka) muszą się znajdować zaraz na początku arkusza stylów, tzn. przed właściwymi regułami CSS, znajdującymi się w arkuszu, do którego następuje import!

W MSIE 8.0 i starszych można zagnieżdżać importowane arkusze CSS tylko do trzeciego poziomu, tzn. importowany na najwyższym poziomie arkusz może sam zaimportować nowy plik CSS, a ten z kolei jeszcze tylko jeden dodatkowy - deklaracje z następnych zagnieżdżonych plików zostaną pominięte!

Kaskadowość stylów

Co to jest kaskadowość stylów CSS? W jaki sposób złamać zasadę kaskadowości?

Kaskadowość stylów

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. Na przykład: na naszej stronie używamy zewnętrznego arkusza stylów, deklaracji stylów w nagłówku strony, a także stylów typu inline, przy czym dotyczą one formatowania dokładnie tego samego elementu (np. kroju czcionki). Co się stanie w takim przypadku? Czy nie powstaną konflikty? A może komputer się "zawiesi"? Nic z tych rzeczy! A to właśnie ze względu na kaskadowość. To od niej wzięły swoją nazwę style: CSS - (ang. Cascading Style Sheets) Kaskadowe Arkusze Stylów.

Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się "bliżej" formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to z kolei może być zmieniane przez style zdefiniowane bezpośrednio w ciele dokumentu (inline). Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak:

1. Styl lokalny (inline)
2. Rozciąganie stylu (SPAN)
3. Wydzielone bloki (DIV)
4. Wewnętrzny arkusz stylów
5. Import stylów do wewnętrznego arkusza
6. Zewnętrzny arkusz stylów
7. Import stylów do zewnętrznego arkusza
8. (Atrybuty prezentacyjne HTML - np. align="...", bgcolor="...", color="...", height="...", width="..." i inne)

Style o wyższym priorytecie ważności (na początku listy) mają pierwszeństwo w modyfikowaniu elementów dokumentu. Style niżej w hierarchii mogą zmienić formatowanie jakiegoś elementu, tylko jeśli style o wyższym priorytecie nie dotyczą tego konkretnego elementu. Na szczególną uwagę zasługuje również fakt, że style CSS z dowolnego źródła zawsze są ważniejsze niż atrybuty prezentacyjne przypisane elementom bezpośrednio w kodzie HTML, mimo iż wydawać by się mogło, że powinna tutaj zachodzić zasada taka jak w przypadku stylu lokalnego.

Kaskadowość stylów pozwala zatem pracować z kilkoma źródłami stylów, bez obawy o wystąpienie konfliktów. Takie rozwiązanie jest bardzo wygodne, ponieważ możemy np. zdefiniować ogólny wygląd naszego serwisu w zewnętrznym arkuszu i dodatkowo zmienić nieco wybrane strony poprzez wewnętrzny arkusz, a jeśli zajdzie konieczność zmodyfikować pojedyncze elementy za pomocą stylu lokalnego.

UWAGA! Polecenie dołączenia zewnętrznego arkusza powinno znajdować się w dokumencie wcześniej niż wewnętrzny arkusz. Odwrotna kolejność złamie zasady kaskadowości!

Jeżeli natomiast chodzi o zasady kaskadowości wewnątrz tego samego arkusza CSS, tzn. w przypadku, kiedy znajduje się w nim kilka osobnych reguł CSS o jednakowej szczegółowości (ważności), odnoszących się do tej samej cechy tego samego elementu, to ostateczny wpływ na formatowanie będą miały reguły umieszczone na końcu.

Łamanie kaskadowości !important

Można świadomie zmienić zasady kaskadowości. Służy do tego polecenie !important. Jeżeli pojawi się ono w deklaracji stylu po wartości cechy, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet. Natomiast inne cechy takiej deklaracji będą interpretowane normalnie, chyba że również przy nich postawimy !important. Nie należy jednak przesadzać ze stosowaniem tej metody, ponieważ jawnie łamie ona zasadę kaskadowości i po jakimś czasie może Ci znacznie utrudnić analizę sposobu formatowania elementów.

Przykład !important

Gdyby w arkuszu stylów tej strony została umieszczona następująca reguła:

h6 { color: blue !important; background-color: green }

to pomimo wpisania następującego stylu inline (który ma pierwszeństwo przed arkuszami stylów)

<h6 style="color: red; background-color: yellow">
	Ten tytuł nie jest napisany czcionką koloru czerwonego, lecz niebieskiego, mimo wstawienia stylu inline.
	Natomiast tło pozostaje żółte.
</h6>

otrzymalibyśmy tytuł koloru niebieskiego (blue) jednak nadal na żółtym (yellow) tle.

Pytania i odpowiedzi

Na czym polega kaskadowość w CSS?

Kaskadowość w CSS oznacza, że wiele reguł stylów może dotyczyć tego samego elementu HTML. Styl określony bliżej elementu (np. wewnętrzny arkusz stylów lub styl osadzony) ma wyższy priorytet niż styl zdefiniowany dalej (np. zewnętrzny arkusz stylów). Konflikty w stylach rozstrzyga tzw. mechanizm dziedziczenia oraz specyficzność selektorów CSS.

Który styl CSS ma najwyższy priorytet?

Najwyższy priorytet ma styl zdefiniowany w sposób inline, czyli bezpośrednio w elemencie HTML za pomocą atrybutu style. Na przykład: <p style="color: red">Tekst czerwony</p>. Styl zdefiniowany w ten sposób ma pierwszeństwo nad stylami wewnętrznymi (osadzonymi) i zewnętrznymi.

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

W jaki sposób bezpośrednio przypisać styl do dowolnego znacznika?

<element style="cecha: wartość; cecha2: wartość2...">...</element>

Zobacz więcej...

W jaki sposób objąć stylem kilka elementów tekstowych?

<span style="cecha: wartość; cecha2: wartość2...">...</span>

Zobacz więcej...

W jaki sposób objąć stylem grupę elementów blokowych?

<div style="cecha: wartość; cecha2: wartość2...">...</div>

Zobacz więcej...

Jak osadzić arkusz stylów CSS bezpośrednio w dokumencie?

<head>
	(...)
<style>
selektor { cecha: wartość; cecha2: wartość2... }
selektor2 { cecha: wartość; cecha2: wartość2... }
(...)
</style>
	(...)
</head>

Zobacz więcej...

Jak dołączyć arkusz stylów CSS z zewnętrznego pliku?

<head>
	(...)
	<link rel="stylesheet" href="style.css">
	(...)
</head>

@charset "strona kodowa";

Zobacz więcej...

W jaki sposób dać użytkownikowi możliwość wyboru jednego z przygotowanych arkuszy CSS, czyli wyglądu strony?

<head>
	<link rel="stylesheet" href="style.css" title="Nazwa domyślna">
	<link rel="alternate stylesheet" href="style1.css" title="Nazwa 1">
	<link rel="alternate stylesheet" href="style2.css" title="Nazwa 2">
	<link rel="alternate stylesheet" href="style3.css" title="Nazwa 3">
	(...)
</head>

Zobacz więcej...

Jak zaimportować arkusz stylów z zewnętrznego dokumentu?

<style>
@import url(adres zewnętrznego arkusza stylów);
</style>

Zobacz więcej...