M. Sokół - ABC języka HTML - Rozdział IV - Kaskadowe arkusze stylów, ebooki, KURS HTML
[ Pobierz całość w formacie 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ć:
<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.
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:
p
{
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:
<p class="prawy">
Ten akapit zostanie wyrównany do prawej.
</p>
<p class="center">
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
:
<h1 class="prawy">
Ten nagłówek został wyrównany do prawego marginesu.
</h1>
<p class="prawy">
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
:
<p id="wstep">
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
}
[ Pobierz całość w formacie PDF ]