Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają określać rozmiar i kolor czcionki, definiować odstępy i rozmieszczenie tekstu oraz obrazów na stronie, a pełna lista ich możliwości jest znacznie dłuższa.
Znaczniki HTML zostały pierwotnie zaprojektowane jako narzędzia definiowania zawartości dokumentu. I tak znacznik nagłówka określał: „To jest nagłówek”, znacznik akapitu stwierdzał: „To jest akapit tekstu”, znacznik tabeli informował: „To jest tabela”, a o układzie strony decydowała przeglądarka.
Wraz z rozbudową możliwości przeglądarek zaczęły pojawiać się coraz to nowe znaczniki i atrybuty. Tworzenie stron WWW, których zawartość byłaby dobrze odseparowana od układu dokumentu, stawało się coraz trudniejsze.
Z tego właśnie powodu konsorcjum W3C powołało do życia kaskadowe arkusze stylów – wprowadzono je do specyfikacji HTML 4.0. Obecnie są one standardem i zarówno Netscape 4, jak i Internet Explorer 4 je obsługują.
Podstawowe zalety stylów CSS to możliwość szybkiej i prostej modyfikacji stylu oraz błyskawiczna wręcz aktualizacja postaci dokumentu w przypadku takich zmian. One naprawdę zaoszczędzą Twój czas! Wyobraź sobie, że w rozbudowanej witrynie trzeba zmienić sposób formatowania dziesiątków nagłówków czy połączeń! To wiele godzin pracy, jeśli będziesz ręcznie wyszukiwał elementy i zmieniał ich atrybuty, lub kilka chwil, jeśli zastosujesz w dokumencie arkusze CSS – wówczas modyfikacja stylu to parę stuknięć w klawisze, a aktualizacja to automat.
Kaskadowy arkusz stylów to mechanizm definiujący formatowanie dla danej strony przy zastosowaniu stylów złożonych, które przeglądarka zinterpretuje w określonym porządku zwanym kaskadą.
Arkusze stylów dają wiele możliwości stosowania stylów. Definicja stylu może pojawić się w konkretnym elemencie HTML – wówczas mówimy o stylu wpisanym , w obrębie elementu head strony HTML (to znaczy między znacznikami <head> </head>) – takie arkusze stylów nazywa się osadzonymi, lub może zostać pobrana z pliku zewnętrznego – jest to wtedy zewnętrzny lub łączony arkusz stylów.
Wszystkie typy arkuszy CSS – wpisane, osadzone i zewnętrzne – można stosować jednocześnie.
Łączone arkusze stylów są przechowywane w zewnętrznym pliku o rozszerzeniu nazwy .css. Składnia takiego arkusza jest podobna jak w przypadku arkusza osadzonego, a sformatowanie strony wymaga jedynie umieszczenia połączenia do pliku zawierającego definicję stylu.
W przypadku obecności różnych arkuszy stylów na jednej stronie, hierarchia ich ważności rośnie w następującej kolejności:
Najwyższy priorytet ma styl wpisany, co oznacza, że jego ustawienia są dominujące względem zadeklarowanych w sekcji head oraz pobranych z pliku zawierającego zewnętrzny arkusz stylów. Dominują także nad domyślnymi ustawieniami przeglądarki.
Postać arkusza stylu CSS zależy od typu arkusza. I tak w przypadku stylu wpisanego – a więc umieszczonego w konkretnym znaczniku – ma ona taką oto postać:
<znacznik style=”właściwość: wartość;”>
Ogólna postać osadzonego arkusza CSS jest następująca:
<style type="text/css"><!--selektor {właściwość: wartość;}--></style>
Zawarta w obrębie elementu style definicja następującą składnię:
selektor{właściwość: wartość}
Selektorem nazywa się znacznik czy też element, który chcesz zdefiniować, właściwość to jego atrybut, który zmieniasz przypisując mu nową wartość. Właściwość i wartość rozdzielone są dwukropkiem oraz zawarte w nawiasach klamrowych, tak jak w tym przykładzie:
body {color: black}
Jeśli wartość ma postać wielowyrazową – na przykład sans serif – umieszcza się ją w cudzysłowie:
p {font-family: "sans serif"}
Oto przykład rzeczywistej definicji:
<style type="text/css"><!--body {font-family: Verdana, Arial, Helvetica;}--></style>
Między znacznikami <style> i </style> umieszczana jest lista znaczników HTML wraz z właściwościami arkusza, które je definiują. Definicja zaprezentowana powyżej zawiera tylko jeden symboliczny selektor definiowany przez jedną właściwość CSS. W przypadku większej liczby właściwości, wszystkie muszą być umieszczone w nawiasie klamrowym ({}) oraz oddzielone średnikami (;).
Zwróć uwagę na znaczniki komentarza html, obejmujące wszystkie znaczniki i właściwości CSS – dzięki temu, że zostały zastosowane, przeglądarki, które nie potrafią obsługiwać arkuszy stylów nie wyświetlą śmieci, lecz potraktują kod jako komentarz. Te z kolei, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów.
W zaprezentowanej definicji stylu zdefiniowany jest krój pisma, który zostanie zastosowany do tekstu strony w sekcji body. Innymi słowy tekst w tej sekcji będzie pisany czcionką Verdana (lub czcionką Arial, ewentualnie czcionką Helvetica, jeśli Verdana nie zostanie znaleziona na komputerze użytkownika – jak widzisz, arkusze stylu uwzględniają nawet ewentualny brak zaplanowanej przez twórcę strony czcionki). Styl czcionki zostanie zastosowany także do tekstu umieszczonego między znacznikami <p> i <div>, natomiast tekst umieszczony w komórkach tabeli wymaga odrębnej definicji stylu.
Jeśli chciałbyś zdefiniować w definicji stylu kilka właściwości, musisz je rozdzielać średnikami, tak jak w poniższym wyrażeniu przykładowym, w którym do tekstu stosowane jest wyrównanie i kolor:
p {text-align: center; color: red}
Aby definicja była bardziej czytelna, każdą z właściwości możesz umieszczać w osobnym wierszu:
p
{
text-align: center;
color: black;
font-family: arial
}
W definicji stylu elementy (inaczej selektory) można grupować. Selektory w grupie oddzielane są przecinkami. Oto przykład definicji, w której wszystkim poziomom nagłówka (od h1 do h6) przypisany zostaje kolor czerwony:
h1, h2, h3, h4, h5, h6
color: red
Powiedzmy, że chcesz w swoim dokumencie zastosować do akapitów dwa różne sposoby wyrównania tekstu: pewne akapity chcesz dosunąć do prawego marginesu, a pozostałe wycentrować. W takim przypadku przydatny będzie atrybut class. Pozwala on zdefiniować różne style dla tego samego elementu – inaczej mówiąc pozwala zdefiniować klasy stylu.
Klasę określa się w taki oto sposób:
element.nazwa_klasy{właściwość: wartość}
W naszym przykładzie musimy więc zdefiniować dwie klasy: pierwsza, nazwijmy ją prawy, w której ustawimy sposób wyrównania tekstu do prawego marginesu, i klasa center, w której tekst jest wyśrodkowany:
p.prawy {text-align: right}
p.center {text-align: center}
Teraz wystarczy wstawić nazwę klasy do tych znaczników, w których chcemy mieć określony sposób formatowania i gotowe:
<p class="prawy">
Ten akapit zostanie wyrównany do prawej.
</p>
<p class="center">
Ten akapit zostanie wyśrodkowany.
Nazwy klas mogą być dowolne, pamiętaj jednak, by nie stosować w nich polskich liter.
Nazwę selektora w definicji klasy można pominąć:
.nazwa_klasy{właściwość: wartość}
Wówczas zdefiniowany zostanie styl, który można zastosować do wielu elementów. W przykładzie przedstawionym poniżej klasa prawy została zastosowana zarówno do elementu h1, jak i do akapitu p:
<h1 class="prawy">
Ten nagłówek został wyrównany do prawego marginesu.
</h1>
Ten akapit został wyrównany do prawego marginesu.
Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu id. Atrybut id pozwala więc oznaczać elementy podobnie jak atrybut class – id jest czymś w rodzaju identyfikatora elementów.
Nazwa atrybutu id musi być jednoznaczna. W dokumencie może istnieć tylko jeden element o danym id:
<p id="wstep">
Do tego akapitu zostaną zastosowane ustawienia stylu zdefiniowane w definicji id o nazwie wstep.
Atrybut id można zdefiniować na dwa sposoby: tak, by styl stosowany był do dowolnego elementu o określonym id lub tak, by styl był stosowany do określonego elementu o danym id.
Ta definicja stanowi, że styl zostanie zastosowany do każdego elementu oznaczonego identyfikatorem wstep:
#wstep
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
A oto drugi przypadek. Tutaj styl będzie zastosowany tylko do elementu p o id=”wstep”:
p#wstep
Zwróć uwagę, że w obu przypadkach ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #, o tak: #nazwa_id.
Definicje stylu nie zawsze są proste, a nawet jeśli są, nie zawsze pamiętamy dlaczego wybraliśmy takie, a nie inne właściwości. Aby zabezpieczyć się przed skutkami niepamięci wstecznej, stosuj komentarze. Będą bardzo przydatne przy przyszłej edycji arkusza stylów.
Komentarz CSS rozpoczyna się od znaku prawego ukośnika, nim pojawia się gwiazdka, potem tekst komentarza i wreszcie zamknięcie komentarza gwiazdką i ukośnikiem. Oto przykład:
/* To jest komentarz CSS */
text-align: right;
/* To też jest komentarz CSS */
color: green;
Informacje ogólne na temat arkuszy stylów sprawdzimy teraz w praktyce. Zaczniemy od zdefiniowania stylu wpisanego.
Styl wpisany jest wprowadzany w wybranym znaczniku i nie ma wpływu na pozostałe znaczniki. Jeśli chcesz na przykład zastosować kursywę do zawartości znacznika <h1>, odpowiednią informację musisz umieścić w tym właśnie znaczniku.
Ogólna postać definicji stylu wpisanego jest taka:
<znacznik style=”definicja”>
Oto przykład:
<h1 style="font-size: 20pt; font-weight: bold; font-family: Arial, sans-serif">Treść tytułu</h1>
Styl wpisany powinien być stosowany tylko wtedy, gdy konieczne jest zastosowanie specyficznego stylu do pojedynczego wystąpienia danego elementu, z reguły tylko tam, gdzie niezbędne są drobne korekty stylu. Nie spełnia on bowiem zasadniczego celu kaskadowego arkusza stylów, a więc globalnej kontroli stylu całej strony.
Aby lepiej zrozumieć o co tu chodzi, sformułujmy razem taką lokalną definicję stylu.
Otwórz w edytorze kod źródłowy szkieletu strony mojastrona.html lub wpisz go ręcznie. Między znacznikami <body> </body> wstaw parę akapitów tekstu. Zdefiniuj w wybranych akapitach inny rozmiar czcionki – użyj do tego celu właściwości font-size (w końcowej części rozdziału znajdziesz wyjaśnienia wykorzystywanych tu właściwości – patrz tabele 4.1 i 4.2). Możesz skorzystać z pomocy wydruku 4.1. Zapisz plik pod nazwą wpisany.html i otwórz stronę w oknie przeglądarki (patrz rysunek 4.1).
Wydruk 4.1. Styl wpisany
<html>
<head>
<title>Styl wpisany</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body>
<p style="font-size: 16pt" id="p16">
Styl zastosowany w obrębie znacznika p.</p>
<p>W tym akapicie nie zastosowano stylu.</p>
<p style="font-size: 25pt" id="p25">
Styl zastosowano w obrębie znacznika p.</p>
<p>
Zawartość tego znacznika p nie jest formatowana.
</body>
</html>
Rys. 4.1.Wpisany arkusz stylów oddziałuje tylko na znacznik, w którym umieszczono definicję stylu
Wpisany arkusz stylów oddziałuje tylko na te akapity, w znacznikach których umieszczona została definicja stylu. Pozostałe akapity zachowują domyślne formatowanie.
Osadzony arkusz stylów to definicja stylu umieszczona między znacznikami <style></style>. Element ten powinien znaleźć się w nagłówku dokumentu. Konfiguruje on atrybuty stylu dla całej strony. Oto przykład:
<style type="text/css">
<--!
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/kot.gif")}
-->
</style>
Przeglądarka przeczyta te definicje stylów i sformatuje dokument zgodnie z nimi. Zwróć uwagę, że atrybut type znacznika <style> ma wartość text/css – jest to dla przeglądarki informacja, że następne instrukcje to arkusz stylów. Instrukcje te zawarte są w znaczniku komentarza – jest to zabezpieczenie na wypadek, gdyby strona trafiła do przeglądarki starego typu, która nie potrafi obsłużyć arkuszy stylów. Wówczas instrukcje formatowania zostaną zignorowane, a nie wyświetlone na ekranie jako tekst.
Globalne formatowanie oznacza, że styl zostanie zastosowany do wszystkich instancji elementu, dla którego został zdefiniowany. Wyjątki od reguły? Tak, już o nich wspominaliśmy przy okazji omawiania klas i atrybutów id. W dalszej części rozdziału zobaczysz, jak w praktyce rozwiązać taki problem.
Aby utworzyć i przetestować osadzony arkusz stylów, otwórz edytor HTML i wpisz podstawowe znaczniki definiujące szkielet strony: <html>, <head> i <body>.
Wstaw znaczniki <style> i </style> – definicje stylów są umieszczane właśnie między nimi. Dodatkowe informacje na temat zasad tworzenia definicji stylów znajdziesz we wstępie do tego rozdziału. Możesz też skorzystać z definicji zawartych na wydruku 4.2.
Wydruk 4.2. Osadzony arkusz stylów
<title>Osadzony arkusz stylów</title>
<!--
body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}
h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}
p {font-size: 14pt; text-indent: 4cm}
<h2>Czerwony nagłówek na białym tle</h2>
Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.
<h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2>
Zapisz plik pod nazwą osadzony.html i wyświetl dokument html w przeglądarce (patrz rysunek 4.2).
Rys. 4.2.
Osadzony arkusz stylów określa style na całej stronie
kicaniec