wyklad 03, INFORMATYKA, projektowanie stron www
[ Pobierz całość w formacie PDF ]
KZwE:EDUKACYJNESTRONYWWW
(autor:JoannaPotiopa)
Wykład4:
Kaskadowearkuszestylów
strona1
Wykład 4: Kaskadowe arkusze stylów
1
CSS
Do tej pory prace nad naszymi stronami koncentrowały si¦ na ich tre±ci. Nie zajmowali±my
si¦ wcale ich wygl¡dem. Obecny rozdział b¦dzie w cało±ci po±wi¦cony formatowaniu dokumen-
tów HTML. Do tego celu słu»¡ CSS-y (ang.
CascadingStyleSheets
) czyli Kaskadowe Arkusze
Stylów.
Do opisu sposobu wy±wietlania poszczególnych elementów dokumentu HTML słu»y j¦zyk
CSS
. Reguły tego j¦zyka gromadzi si¦ w plikach nazywanych
arkuszamistylów
. Jeden arkusz
stylów mo»na wykorzysta¢ do wielu stron. Dzi¦ki temu uzyskujemy spójny wygl¡d naszych
stron oszcz¦dzaj¡c swój czas: przygotowujemy tylko jeden dokument zamiast ustawiania for-
matowania na ka»dej ze stron. Zmiana wygl¡du wszystkich stron jest tak»e prosta – wystarczy
wprowadzi¢ zmiany w arkuszu stylów a wygl¡d wszystkich korzystaj¡cych z niego dokumentów
ulegnie zmianie.
Dlaczego arkusze stylów okre±lane s¡ jako kaskadowe? Poniewa» kilka ró»nych definicji sty-
lów – znajduj¡cych si¦ na ró»nych poziomach – mo»e wpływa¢ na ostateczny wygl¡d dokumentu:
1. pierwszy poziom to ustawienia przegl¡darki u»ytkownika. Ka»da przegl¡darka ma własny
sposób interpretacji elementów HTML. Przekonali±my si¦ o tym pisz¡c własne strony:
chocia» nie podawali±my »adnych elementów formatowania przegl¡darka decydowała jak¡
czcionk¡ wy±wietli¢ nasz dokument, jak¡ wielko±¢ teksu przyj¡¢, jaki jest znak wypunk-
towania, itp.
2. drugi poziom to arkusze stylów doł¡czone do dokumentu –
stylzewn¦trzny
;
KZwE:EDUKACYJNESTRONYWWW
(autor:JoannaPotiopa)
Wykład4:
Kaskadowearkuszestylów
strona2
3. kolejny to style okre±lone w elemencie
<style>
dokumentu HTML –
stylosadzony
;
4. na najni»szym poziomie znajduj¡ si¦ style okre±lone w atrybucie style znacznika –
styl
wpisany
.
Ka»dy z tych poziomów nadpisuje – przesłania – poziom poprzedni.
2
Reguły stylów
Wszystkie reguły stylów oparte s¡ na takim samym formacie:
selektor
f
wła±ciwo±¢1: warto±¢1;
wła±ciwo±¢2: warto±¢2;
...;
wła±ciwo±¢N: warto±¢N;
g
Reguły CSS s¡ bardzo dokładne:
po selektorze nale»y wpisa¢ definicje wła±ciwo±ci formatowania, umieszczaj¡c je w nawia-
sach klamrowych fg;
ka»d¡ par¦
wła±ciwo±¢:warto±¢
oddziela dwukropek. Warto±ci, które zawieraj¡ odst¦-
py, powinny by¢ umieszczone w cudzysłowie, np.
font-family:"TimesNewRoman"
;
po ka»dej parze
wła±ciwo±¢:warto±¢
nast¦puje ±rednik.
Selektory
to elementy, których dotyczy formatowanie (np.
body
,
p
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
hr
,
img
,
table
, itd.).
Wła±ciwo±ci
to te cechy formatowania, które chcemy ustali¢ za pomoc¡
odpowiednich
warto±ci
. Oto przykład reguły stylu:
h1
f
color:red;
g – reguła ta oznacza,
»e ka»dy nagłówek poziomu pierwszego zostanie wy±wietlony kolorem czerwonym – oczywi±cie
dotyczy to strony, do której doł¡czymy taki arkusz stylów.
KZwE:EDUKACYJNESTRONYWWW
(autor:JoannaPotiopa)
Wykład4:
Kaskadowearkuszestylów
strona3
Do jednej definicji mo»na doł¡czy¢ kilka selektorów, wymieniaj¡c je wszystkie w ob-
szarze selektora i oddzielaj¡c przecinkami, np.
h1,h2,h3,h4,h5,h6
f
font-variant:
small-caps;
g (nagłówki zostan¡ napisane wersalikami).
Komentarze w j¦zyku CSS otacza si¦
/*...*/
czyli
/*tre±¢komentarza*/
.
3
Doł¡czanie arkuszy stylów
Gdy wiemy ju» jak budowa¢ reguły stylów to nale»ałoby si¦ dowiedzie¢ jak je poł¡czy¢ z do-
kumentem HML. Wiemy te», »e przegl¡darka jako pierwsza decyduje o sposobie wy±wietlania
elementów HTML. Ale przed ni¡ pierwsze«stwo ma zewn¦trzny arkusz stylów.
Zewn¦trzny arkusz stylów.
To plik o rozszerzeniu
*.css
zbudowany według opisanych
wcze±niej reguł. Załó»my, »e mamy ju» przygotowany plik
styl.css
zapisany w tym
samym katalogu co nasza strona:
1
body f
2
background
−
color: #e4e4e4; / jasny szary /
3
color : #004080; / granatowy /
4 g
5
6
h1, h2, h3, h4, h5, h6 f
7
color : blue;
8
text
−
align: center ;
9 g
10
11
p f
12
text
−
align: justify ;
13
font
−
size: medium;
14 g
15
16
table f
17
border: 2px;
KZwE:EDUKACYJNESTRONYWWW
(autor:JoannaPotiopa)
Wykład4:
Kaskadowearkuszestylów
strona4
18 g
Listing 1: Przykładowy arkusz stylów
Aby doł¡czy¢ do strony tak przygotowany plik nale»y wykorzysta¢ znacznik
<link>
w sek-
cji
<head>
dokumentu. Znacznik
<link>
, który jest wykorzystywany do poł¡czenia z ar-
kuszem stylów, ma nast¦puj¡cy format:
<
link rel =
"stylesheet"
type =
"text/css"
href =
"lokalizacjaarkuszastylów"
>
Zasady podawania lokalizacji pliku s¡ takie same jak w przypadku umieszczania grafiki:
mo»na podawa¢ adresy zewn¦trzne lub, do plików poło»onych lokalnie, stosowa¢ adreso-
wanie wzgl¦dne. Zatem szablon dokumentu z doł¡czonym naszym arkuszem stylów b¦dzie
wygl¡dał nast¦puj¡co (patrz listing
2
, linia 12):
1<!
DOCTYPE html
PUBLIC
"-//W3C//DTDHTML4.01Transitional//EN"
2
>
3
4<
html
>
5 <
head
>
6 <
meta
http
−
equiv=
"Content-type"
content
=
"text/html;
7
charset=iso-8859-2"
>
8 <
meta name
=
"Author"
content
=
"JoannaPotiopa"
>
9
10 <
title
>Strona przykładowa</
title
>
11
12 <
link rel
=
"stylesheet"
href
=
"styl.css"
type
=
"text/css"
>
13
14 </
head
>
15 <
body
>
16 <!
−−
tre±¢ dokumentu
−−
>
17 </
body
>
KZwE:EDUKACYJNESTRONYWWW
(autor:JoannaPotiopa)
Wykład4:
Kaskadowearkuszestylów
strona5
18</
html
>
Listing 2: Kod ¹ródłowy dokumentu HTML z doł¡czonym arkuszem stylów
Ale ten styl mo»e zosta¢ przesłoni¦ty przez styl osadzony.
Styl osadzony.
Umieszcza si¦ w znaczniku
<style>
wewn¡trz sekcji
<head>
dokumentu w po-
staci:
<
style type=
"text/css"
>
...
definicje
stylów ...
<
/style
>
Kiedy mo»na to wykorzysta¢? Załó»my, »e jaka± placówka, np. uczelnia ma swoj¡ stron¦.
Przygotowany został zewn¦trzny arkusz stylów, aby wszystkie strony zostały w ten sam
sposób sformatowane. Poproszono te» poszczególne wydziały, aby przygotowały po jed-
nej stronie charakteryzuj¡cej ich działalno±¢. Strony wydziałów musz¡ zachowa¢ wygl¡d
zgodny z formatowaniem wszystkich stron uczelni, ale mog¡ zastosowa¢ drobne elementy
wyró»niaj¡ce je, np. inny kolor niektórych elementów albo jako punktory w li±cie wypunk-
towanej zastosowa¢ ciekawe obrazki. Wtedy na tej pojedynczej stronie mo»na wykorzysta¢
wła±nie styl osadzony. Oto prosty przykład (patrz listing
3
, linie 12-19):
1
...
2
3 <
head
>
4 <
meta
http
−
equiv=
"Content-type"
content
=
"text/html;
5
charset=iso-8859-2"
>
6 <
meta name
=
"Author"
content
=
"JoannaPotiopa"
>
7
8 <
title
>Strona przykładowa</
title
>
9
10 <
link rel
=
"stylesheet"
href
=
"styl.css"
type
=
"text/css"
>
11
[ Pobierz całość w formacie PDF ]