Przejdź do treści

Tło

W tym rozdziale dowiesz się...

Kolor

selektor { background-color: kolor }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "kolor" należy podać definicję koloru. Wpisanie "transparent" ustali tło przezroczyste.

Polecenie umożliwia wstawienie tła o określonym kolorze pod danym elementem (tekstem).

Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tła strony), można użyć selektora BODY lub HTML.

Przykład:

Tło koloru czerwonego (red)

Tło koloru żółtego (yellow)

Tło koloru #D08AFF

Tło koloru systemowego Menu

Tło obrazkowe

selektor { background-image: url(ścieżka dostępu do obrazka) }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie obrazek.

Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML!

Polecenie pozwala wstawić dowolny obrazek jako tło pod elementem. Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie.

Wspólnie z tą własnością często podaje się dodatkowo kolor tła. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem.

Jeśli kolor tekstu elementu z tłem obrazkowym jest zbliżony do domyślnego koloru tła strony, wskazane jest podanie dodatkowo takiego koloru tła dla tego elementu, aby tekst był na nim czytelny. Jeżeli tego nie zrobimy, a obrazek nie zostanie wyświetlony, może wystąpić sytuacja typu: "biały tekst na białym tle".

Może się to zdarzyć np. gdy obrazek w tle strony jest dość ciemny. Wtedy określa się zwykle jasny kolor tekstu, zapominając podać równocześnie deklarację ciemnego koloru tła - jako zabezpieczenie. Dopóki obrazek jest widoczny, wszystko jest w porządku, lecz jeśli nie zostanie on wyświetlony, tło przyjmie najczęściej kolor biały (jako domyślny) i w ten sposób otrzymamy stronę, której nie można przeczytać :-(

Przykład:

To jest akapit z tłem obrazkowym. Jak już pisałem, użycie zbyt jaskrawego tła, może znacznie utrudnić czytanie tekstu...

Sztuczka, pozwalająca ustalić rozmiary obrazka w tle...

Wielokrotne tło obrazkowe

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-image: url(ścieżka dostępu do obrazka 1), url(ścieżka dostępu do obrazka 2),... }

Dzięki powyższej składni możliwe jest wstawienie pod jednym elementem wielu obrazków w tle. Będą ona ułożone jeden pod drugim - na wierzchu wyświetli się pierwsza z wymienionych grafik.

MSIE 8 w takim przypadku nie wyświetli żadnego obrazka w tle - nawet pierwszego z kolei!

Przykład:

To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek... To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek... To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek...

Powtarzanie

selektor { background-repeat: powtarzanie }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "powtarzanie" należy wpisać:
  • repeat - powtarzanie tła w obu kierunkach (domyślnie)
  • repeat-x - powtarzanie tła tylko w kierunku poziomym
  • repeat-y - powtarzanie tła tylko w kierunku pionowym
  • no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
  • space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera)
  • round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera)

Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są ustawiane obok siebie tak, że zajmują cały obszar tła. Ale możliwe jest również zdefiniowanie powtarzania w poziomie czy w pionie lub całkowite zablokowanie.

W CSS 3 wprowadzono dodatkowo możliwość oddzielnego określenia sposobu powtarzania tła w poziomie i w pionie. Na przykład "repeat no-repeat" jest równoznaczne z "repeat-x", a "no-repeat repeat" - "repeat-y". Taki rozszerzony sposób staje się bardziej przydatny w przypadku dodatkowych wartości - "space round" i "round space". Dzięki temu możemy precyzyjnie dopasować sposób powielania grafiki w poziomie i w pionie, w zależności od jej wymiarów w stosunku do wymiarów elementu, pod którym wstawiamy tło.

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe.

W przeglądarce Chrome 15 ustawienie trybów powtarzania dostępnych w CSS 3 jest równoznaczne z wartością "no-repeat"!

Przykład:

repeat
repeat-x
repeat-y
no-repeat
space
round
space round

Wielokrotne powtarzanie

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-repeat: powtarzanie obrazka 1, powtarzanie obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób powtarzania. Jeżeli pominiemy ustawienie sposobu powtarzania następnych obrazków, przejmą one ustawienia z pierwszego.

W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "repeat"!

Przykład:

repeat-y, repeat-x

Pozycja

selektor { background-position: pozycja }
Selektorem może być znacznik wyświetlany w bloku albo zastępowany [zobacz: Wstawianie stylów].

Natomiast jako "pozycja" należy wpisać:
  1. Jedną wartość:
    • center - obrazek na środku (w centrum)
    • left - obrazek po lewej
    • right - po prawej
    • top - na górze
    • bottom - na dole
    • jednostka długości - odległość od lewej krawędzi
  2. Dwie wartości (oddzielone spacją):
    • left top - lewy-górny róg
    • left bottom - lewy-dolny róg
    • right top - prawy-górny róg
    • right bottom - prawy-dolny róg
    • dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej

Pozwala ustalić pozycję obrazka w tle.

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe oraz ograniczymy jego powtarzanie (no-repeat, repeat-x lub repeat-y).

Przykład:

repeat-x; center
repeat-y; center
no-repeat; center
no-repeat; top
no-repeat; right top
no-repeat; right
no-repeat; right bottom
no-repeat; bottom
no-repeat; left bottom
no-repeat; left
no-repeat; left top
no-repeat; 1cm
no-repeat; 25% 50%
no-repeat; 1cm 5mm

Wielokrotna pozycja

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-position: pozycja obrazka 1, pozycja obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inną pozycję. Jeżeli pominiemy pozycję następnych obrazków, przejmą one ustawienia z pierwszego.

W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "left top"!

Przykład:

no-repeat; left top, right bottom

Zaczepienie

selektor { background-attachment: zaczepienie }
Jako "zaczepienie" należy wpisać:
  • scroll - przewijanie tła (domyślnie)
  • fixed - tło nieruchome względem okna przeglądarki
  • local - tło nieruchome względem elementu (jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3 - MSIE 8, ale nie 9.0; Firefox)
[Zobacz także: Wstawianie stylów]

Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia:

body { background-image: url(obrazek.jpg); background-attachment: fixed }

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe.

Ponadto należy zwrócić uwagę, że MSIE 6 obsługuje wartość fixed tylko dla elementów przewijalnych (w MSIE 7.0 wszystko jest w porządku).

Różnica pomiędzy wartościami "fixed" a "local" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku kiedy przewijamy całą stronę albo kiedy sam element nie ma suwaków, wartość ta działa identycznie jak "scroll".

Przykład:

To jest akapit z nieruchomym tłem obrazkowym (obsługuje Firefox, Opera, MSIE 7.0). Przewiń stronę, obserwując grafikę w tle tego akapitu...

To jest akapit z nieruchomym tłem obrazkowym (obsługuje Firefox, Opera, MSIE 7.0). Przewiń stronę, obserwując grafikę w tle tego akapitu...

To jest akapit z nieruchomym tłem obrazkowym (obsługuje Firefox, Opera, MSIE 7.0). Przewiń stronę, obserwując grafikę w tle tego akapitu...

Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...

Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...

Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...

To jest akapit z lokalnie nieruchomym tłem obrazkowym (obsługuje MSIE 8, Firefox). Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...

To jest akapit z lokalnie nieruchomym tłem obrazkowym (obsługuje MSIE 8, Firefox). Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...

To jest akapit z lokalnie nieruchomym tłem obrazkowym (obsługuje MSIE 8, Firefox). Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...

Strona z użyciem background-attachment: scroll - Przykład 1

Strona z użyciem background-attachment: fixed - Przykład 2

Strona z użyciem background-attachment: fixed (oraz no-repeat i center) - Przykład 3

Wielokrotne zaczepienie

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-attachment: zaczepienie obrazka 1, zaczepienie obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób zaczepienia. Jeżeli pominiemy ustawienie sposobu zaczepienia następnych obrazków, przejmą one ustawienia z pierwszego.

W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "scroll"!

Przycinanie

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

selektor { background-clip: przycinanie }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "przycinanie" należy wpisać:
  • border-box - tło wyświetli się pod obramowaniem, marginesem wewnętrznym i właściwą zawartością elementu (domyślnie) [Zobacz: Model pudełkowy]
  • padding-box - tło wyświetli się pod marginesem wewnętrznych i właściwą zawartością elementu
  • content-box - tło wyświetli się tylko pod właściwą zawartością elementu

Możliwe jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka 2,... }

Przykład:

border-box
padding-box
content-box

Pozycja początkowa

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

selektor { background-origin: początek }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "początek" należy wpisać:
  • border-box - pozycja tła będzie liczona względem krawędzi obramowania [Zobacz: Model pudełkowy]
  • padding-box - pozycja tła będzie liczona względem krawędzi marginesu wewnętrznego (domyślnie)
  • content-box - pozycja tła będzie liczona względem krawędzi właściwej zawartości elementu

Zgodnie z komputerowym układem współrzędnych punkt zerowy znajduje się zawsze w lewym-górnym narożniku. W przypadku modelu pudełkowego możemy mieć jednak aż trzy takie narożniki - dla różnych obszarów wewnątrz elementu. Ustalenie położenia początkowego okazuje się szczególnie przydatne, jeśli korzystamy również z przycinania tła.

Możliwe jest również określenie kilku wartości pozycji początkowej - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-origin: początek obrazka 1, początek obrazka 2,... }

Przykład:

no-repeat; left top; border-box
no-repeat; left top; padding-box
no-repeat; left top; content-box

Rozmiary

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

selektor { background-size: rozmiary }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "rozmiary" należy wpisać:
  • contain - skaluje obrazek, zachowując proporcje, tak aby w całości zmieścił się w tle
  • cover - skaluje obrazek, zachowując proporcje, tak aby pokrył cały obszar tła (część grafiki może być niewidoczna)
  • auto - zachowanie domyślne
  • długość - obrazek zostanie przeskalowany do podanego wymiaru
  • wartość procentową - obrazek zostanie przeskalowany względem obszaru pozycjonowania tła
Podanie dwóch z powyższych wartości (np. "150px 100px") pozwala określić osobno szerokość i wysokość obrazka (skalowanie bez zachowania proporcji - rozciąganie grafiki). Aby przeskalować do wysokości, zachowując jego proporcje, jako szerokość należy podać wartość "auto" (np. "auto 100px").

Często zależy nam na wstawieniu w tle strony tylko jednego egzemplarza obrazka (bez jego powielania), ale w taki sposób aby idealnie dopasował się do rozmiarów okna przeglądarki - niezależnie od używanej rozdzielczości ekranu. Powyższe polecenie pozwala uzyskać taki efekt i to bez żadnych sztuczek ani obejść. Trzeba jednak pamiętać, że rozciąganie obrazka nie tylko zniekształca jego proporcje, ale również w przypadku powiększania wpłynie na utratę jakości grafiki. Pamiętaj również, aby nie wstawiać w tle zdjęć o przesadnie dużych wymiarach, ponieważ będą wydłużały czas wczytywania strony.

Możliwe jest również określenie kilku wartości rozmiary tła - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-size: rozmiary obrazka 1, rozmiary obrazka 2,... }

Przykład:

contain
cover
75px 100px
100% 100%

Atrybuty mieszane

selektor { background: wartości atrybutów }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać konkretne wartości atrybutów, dotyczących tła, które będą oddzielone od siebie spacjami (przy czym można niektóre pominąć). Są to:

Wartość rozmiarów tła (background-size) musi być poprzedzona znakiem ukośnika i musi się znajdować bezpośrednio po wartości pozycji (background-position), np.: "left top / contain". Nie można podać rozmiarów tła bez określenia pozycji, ale można samą pozycję bez rozmiarów.

Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty tła. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Wartością może być np.: url(obrazek) (background-image), no-repeat (background-repeat) czy left (background-position). Wszystkie wartości muszą być oddzielone od siebie spacjami. Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi tła koloru czerwonego (red), ponieważ nie zostało to określone w deklaracji background, która tutaj unieważnia background-color:

p { background-color: red; background: url(tlo.gif) }

Zgodnie z zasadą kaskadowości, oczekiwany skutek (czerwone tło) odniesiemy, podając deklaracje w odwrotnej kolejności:

p { background: url(tlo.gif); background-color: red }

albo przenosząc wartość background-color (red) do zbiorczej deklaracji background:

p { background: red url(tlo.gif) }

W przeglądarce MSIE 8, Firefox i Chrome wstawienie do atrybutów mieszanych wartości własności dostępnych dopiero od CSS 3 skutkuje zupełnym brakiem tła! Dlatego w ich wypadku bezpieczniej jest stosować standardową, a nie skróconą składnię.

Przykład:

Po wpisaniu:
<p style="color: red; background: url(obrazek.jpg) no-repeat left">
	To jest akapit z obrazkiem w tle. obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie.
</p>
otrzymamy na ekranie:

To jest akapit z obrazkiem w tle. Obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie.


Warto tutaj jeszcze wspomnieć o możliwości dodawania obrazków do dowolnego tekstu. Można w ten sposób stworzyć tekst, obok którego znajduje się jakaś grafika (np. po lewej stronie). Nie trzeba w takim wypadku dodawać znacznika <img />, odpowiadającego za wstawienie rysunku, ale wystarczy np. zadeklarować odpowiednią klasę w zewnętrznym arkuszu stylów, a grafika zostanie dodana jako tło (bez powtarzania). Dodatkowo tekst będzie przesunięty w prawo, aby nie zasłaniał obrazka.

Sposób taki ma tą zaletę, że w każdej chwili możemy usunąć obrazek lub zmienić jego pozycję, bez potrzeby modyfikacji każdej strony, na której występuje taki element. Ma to duże znaczenie, jeśli powtarza się on na wielu stronach. Niestety podczas drukowania strony, obrazek taki zostanie pominęty. Również jeśli przeglądarka nie interpretuje stylów, obrazek nie pojawi się na ekranie. Jeśli nam to przeszkadza, należy stosować tradycyjny sposób (znacznik IMG).

Po wpisaniu w arkuszu stylów:
*.obrazek { background: url(obrazek.jpg) no-repeat left top; padding-left: 110px }
a następnie na stronie:
<p class="obrazek">Po lewej stronie tego tekstu znajduje się obrazek, który... (itd.)</p>
otrzymamy:

Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie...

Uwaga: Pogrubiona wartość 110 w deklaracji klasy powyżej, odpowiada za przesunięcie tekstu w prawo i nie powinna być ona mniejsza od szerokości obrazka (w pikselach), aby nie był on zasłonięty!

Wielokrotne atrybuty mieszane

(CSS 3 - interpretuje Firefox, Opera, Chrome)

selektor { background: wartości atrybutów obrazka 1, wartości atrybutów obrazka 2... }

Korzystając z rozszerzonej składni atrybutów mieszanych, możemy wstawić w tle elementu kilka obrazków i od razu określić dla nich dodatkowe własności, takie jak np. sposób powtarzania, zaczepienie, pozycja / rozmiary, przycinanie czy pozycja początkowa. Trzeba jednak pamiętać, że o ile w tle jednego elementu może być wstawionych kilka obrazków, to ustawienie więcej niż jednego jednolitego koloru tła nie ma sensu. Dlatego podanie jednolitego koloru tła jest dozwolone tylko jeden raz - na samym końcu, tzn. dla ostatniego elementu listy atrybutów mieszanych:

div { background: url(obrazek1.jpg), url(obrazek2.jpg), url(obrazek3.jpg) red }

MSIE 8 w takim przypadku nie wyświetli żadnego tła - ani obrazkowego ani jednolitego koloru!

Usunięcie tła

selektor { background: none }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Polecenie umożliwia wykasowanie zdefiniowanego wcześniej tła. Okazuje się ono przydatne, częściej niż można by sądzić. Na przykład wyobraźmy sobie, że w zewnętrznym arkuszu stylów określamy ogólne własności dla wszystkich stron naszego serwisu. Załóżmy, że znajduje się tam m.in. deklaracja tła obrazkowego stron. Jeśli teraz zechcemy tylko na jednej ze stron zastosować zwykłe tło, a jednocześnie na innych pozostawić nadal obrazkowe, może to uczynić na dwa sposoby:

  1. Nie dołączać zewnętrznego arkusza do wybranej strony. Takie rozwiązanie nie jest jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron), to po jakimś czasie możemy po prostu zapomnieć o tej dodatkowej modyfikacji, co sprawi, że strona taka będzie różniła się wyglądem od innych.
  2. W wewnętrznym arkuszu wybranej strony lub w stylu inline można umieścić przedstawione powyżej polecenie. Możemy wtedy bez przeszkód dołączyć zewnętrzny arkusz i nie musimy za każdym razem oddzielnie modyfikować takiej strony.

Jak widać drugi sposób jest znacznie korzystniejszy. Dodatkowo istnieją sytuacje, gdy pierwsza metoda jest wręcz niemożliwa do zastosowania, np. w przeglądarkach odsyłacze są zwykle domyślnie podkreślane. Jeśli chcemy z tego zrezygnować, musimy usunąć dekorację tekstu:

a:link, a:visited { text-decoration: none }

Dla wielu innych własności stylów istnieją analogicznie działające wartości - zwykle są to: none, normal, auto, transparent itp.

Polecenie background: ;none usuwa wszystkie własności dotyczące tła. Można również usunąć tylko wybrane, stosując odpowiednie polecenia dla każdej własności, którą chcemy usunąć (np. background-color: transparent; background-image: ;none; itd.). Pozwala to np. usunąć tło obrazkowe, lecz pozostawić kolor tła. Działają one oczywiście nie tylko z zewnętrznym arkuszem, ale również z wewnętrznym - zgodnie z zasadami kaskadowości.

Przykład:

Gdyby arkuszu stylów tej strony [zobacz: Wstawianie stylów], została umieszczona taka linijka:
h4 { background-color: red }
to wszystkie tytuły rzędu czwartego miałyby automatycznie przypisane tło koloru czerwonego. Ale jeśli chcemy zrezygnować z tła dla wybranych elementów, wystarczy wpisać background-color: transparent w definicji inline:
<h4 style="background-color: transparent">To również jest tytuł rzędu czwartego, lecz mimo to nie ma już tła</h4>