R04.PDF

Rozdział 4.

Kaskadowe arkusze stylów

Ogólna postać kaskadowego arkusza stylów

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ą.

Co daje stosowanie arkuszy CSS?

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.

Czym są kaskadowe arkusze stylów?

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ą.

Jakie są rodzaje arkuszy stylów?

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.

Jaki styl zostanie zastosowany, jeśli w dokumencie zdefiniowano kilka arkuszy stylów

(czyli jak działa kaskada stylów)?

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:

1. Domyślne ustawienia przeglądarki

2. Zewnętrzny arkusz stylów

3. Osadzony arkusz stylów (umieszczony między znacznikami <head> </head> )

4. Styl wpisany (dotyczący konkretnego elementu HTML)

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.

Jaka jest ogólna postać kaskadowego arkusza stylów?

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ć:

Ogólna postać osadzonego arkusza CSS jest następująca:

<!--

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:

<!--

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.

Co oznacza ta definicja stylu?

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.

W jaki sposób w jednej definicji stylu określić kilka właściwości?

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:

{

text-align: center;

color: black;

font-family: arial

}

Czy jedną właściwość można przypisać kilku elementom?

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

}

Czy jednemu elementowi można przyporządkować różne style?

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:

Ten akapit zostanie wyrównany do prawej.

</p>

Ten akapit zostanie wyśrodkowany.

</p>

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 :

Ten nagłówek został wyrównany do prawego marginesu.

</h1>

Ten akapit został wyrównany do prawego marginesu.

</p>

Czy można narzucić styl pojedynczym wystąpieniom danego elementu?

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 :

Do tego akapitu zostaną zastosowane ustawienia stylu zdefiniowane w definicji id

o nazwie wstep.

</p>

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

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

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 .

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: