HTML CSS Kaskadowe arkusze stylów 03 2005

Struktura a wygląd dokumentów HTML

Wygl¹d witryn WWW zale¿y od dwóch czynników: kodu strony (napisa-
nego zazwyczaj w jêzyku HTML) oraz formatu nadawanego przez prze-
gl¹darkê ró¿nym elementom HTML. Zawartoœæ i strukturê dokumentu opi-
sujemy korzystaj¹c z elementów HTML: akapitów (P), nag³ówków (H1,
H2), tabel (TABLE, TD, TR), sekcji (DIV) itd. Natomiast format elemen-
tów definiujemy w jêzyku CSS (ang. Casscading Style Sheets – kaskadowe
arkusze stylów). Zatem tworz¹c witrynê WWW musimy opisaæ:

zawartoœæ i strukturê strony (w jêzyku HTML),

format elementów (w jêzyku CSS).

W przypadku braku opisu stylów, przegl¹darka zastosuje style

domyœlne, które zazwyczaj s¹ doœæ ubogie.

Oddzielaj¹c definicjê formatu elementów od samej zawartoœci strony

otrzymamy dokument, którego format jest niezale¿ny od kodu HTML.
G³ówn¹ korzyœci¹ takiego rozwi¹zania jest to, ¿e wygl¹d dokumentu mo-
¿emy modyfikowaæ nie zmieniaj¹c jego treœci ani kodu HTML.

Dołączanie stylów do dokumentu

Definicjê stylów mo¿emy do³¹czyæ do dokumentu na dwa sposoby:

jako style wewnêtrzne,

jako style zewnêtrzne.

W obydwu przypadkach informacjê o stylach umieszczamy w na-

g³ówku strony WWW (a wiêc pomiêdzy znacznikami <HEAD> oraz
</HEAD>).

Stosuj¹c style wewnêtrzne korzystamy z elementu STYLE:

<STYLE type=”text/css”>
<!– –
...

tutaj definicja stylów:

...
– –>
</STYLE>

Definicja stylów znajduje siê wewn¹trz komentarza HTML (czy-

li pomiêdzy <!– – oraz – –>). Nie jest to konieczne, ale w przypadku
przegl¹darki, która nie potrafi interpretowaæ stylów, zawartoœæ ele-
mentu STYLE pojawi siê w treœci strony (przegl¹darka po napotka-
niu nieznanego elementu powinna go zignorowaæ, pozostawiaj¹c je-
dynie jego zawartoœæ). Zastosowanie komentarza HTML usuwa sty-
le z treœci strony wyœwietlanej przez przegl¹darkê, która nie potrafi
interpretowaæ stylów. Wewn¹trz komentarza umieszczamy opis
stylów.

Element STYLE posiada dwa atrybuty: type oraz media. Atrybut

type ustala jêzyk stosowany do opisu stylów. W przypadku stosowania
jêzyka CSS atrybutowi type nale¿y nadaæ wartoœæ text/css.

Atrybut media mo¿e przyjmowaæ miêdzy innymi wartoœci screen

oraz print. Wartoœci¹ domyœln¹ jest screen. Stosowanie atrybutu media
jest jednym ze sposobów przygotowania dwóch ró¿nych formatów
strony: jednego przeznaczonego do wyœwietlenia na ekranie oraz dru-
giego przeznaczonego do wydruku.

Style zewnêtrzne zapisujemy w osobnym pliku. Jeœli stosuje-

my jêzyk CSS, to plikowi nadajemy rozszerzenie .css. Tak zdefi-
niowane style do³¹czmy do dokumentu HTML stosuj¹c element
LINK:

HTML

INTERNET.marzec.2005

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

Wszystkie listingi z tego artykułu

są dostępne na dołączonej płycie CD

– katalog Warsztat_CSS,

podkatalog Listingi.

Kaskadowe arkusze stylów do³¹czane
do witryn WWW zawieraj¹ definicje
formatów poszczególnych elementów
HTML. Artyku³ zawiera przegl¹d
najwa¿niejszych informacji dotycz¹cych
jêzyka CSS.

W³odzimierz Gajda

Kaskadowe arkusze stylów

<LINK rel=”stylesheet” href=”nazwapliku.css”

type=”text/css”>

Rys. 1. Witryna stanowi¹ca treœæ æwiczeñ 1 oraz 2

WICZENIE

Przygotuj witrynê Witaj przybyszu!, przedstawion¹ na rys. 1, zawiera-
j¹c¹ style wewnêtrzne.

Ca³a witryna, zarówno style, jak i kod HTML, s¹ zapisane w jed-

nym pliku. W nag³ówku strony jest umieszczony element STYLE, któ-
ry definiuje format elementów BODY, H1 oraz DIV. Kod witryny zo-
sta³ przedstawiony na listingu 1 (na CD).

WICZENIE

Przygotuj witrynê z æwiczenia pierwszego, umieszczaj¹c style w osob-
nym pliku.

Tym razem rozwi¹zanie sk³ada siê z dwóch plików: pliku HTML

oraz pliku CSS. W nag³ówku pliku HTML znajduje siê element
LINK do³¹czaj¹cy do strony style zapisane w pliku CSS. Plik
HTML jest przedstawiony na listingu 2, a plik CSS na listingu 3
(obydwa na CD).

Jak widaæ, ró¿nica pomiêdzy obydwoma rozwi¹zaniami jest nie-

wielka. Sprowadza siê do rozbicia pliku przygotowanego w æwiczeniu
pierwszym na dwa pliki, usuniêciu elementu STYLE oraz dodaniu ele-
mentu LINK. Zatem, które z rozwi¹zañ jest lepsze i w jaki sposób ob-
jawiaj¹ siê jego zalety?

G³ównym czynnikiem oceny jest liczba plików HTML tworz¹cych

witrynê. Jeœli przygotowujemy pojedynczy plik HTML, wówczas mo-
¿emy rozwa¿aæ stosowanie stylów wewnêtrznych. W przeciwnym
razie (tj. jeœli witryna sk³ada siê z dwóch lub wiêkszej liczby plików
HTML) stosowanie stylów wewnêtrznych nie ma sensu. Nale¿y u¿yæ
stylów zewnêtrznych.

Jeœli zastosujemy style wewnêtrzne, wówczas prosta operacja Wi-

dok/Źród³o wykonana w przegl¹darce pozwoli na analizê zarówno ko-
du HTML, jak i stylów. Drug¹ sytuacj¹, w której stosowanie stylów
wewnêtrznych bêdzie mia³o zalety, jest podgl¹danie spakowanego
archiwum. Jeœli po otworzeniu spakowanego archiwum zawieraj¹cego
pliki HTML programem kompresuj¹cym (np. WinZip) podwójnie
klikniemy jeden z plików HTML, wówczas przegl¹darka wyœwietli
poprawnie (tj. uwzglêdniaj¹c wszystkie formaty) jedynie stronê zawie-
raj¹c¹ style wewnêtrzne.

Style wewnêtrzne znajduj¹ zastosowanie g³ównie przy tworzeniu

witryn instrukta¿owych z æwiczeniami. Podgl¹danie rozwi¹zania
jest wówczas nieco prostsze ni¿ w przypadku stosowania stylów
zewnêtrznych.

Za stylami zewnêtrznymi przemawiaj¹ wszystkie pozosta³e czynni-

ki. Rozmiar witryny tworzonej przy u¿yciu stylów zewnêtrznych jest
mniejszy. Jeœli witryna sk³ada siê z wielu plików, wówczas tylko pod-
czas pobierania pierwszego pliku pobierane bêd¹ równie¿ style. Przy
wizycie na drugiej stronie witryny style bêd¹ pochodzi³y z pamiêci
podrêcznej przegl¹darki (ang. cache).

Modyfikowalnoœæ stylów zewnêtrznych to chyba najbardziej wy-

raŸna ró¿nica. Zmiany dokonywane w jednym pliku wp³ywaj¹ na ca³¹
witrynê i wszystkie jej podstrony. Jeœli zastosujemy style wewnêtrzne,
zmiana stylów bêdzie wymaga³a modyfikacji ka¿dego pliku, który za-
wiera style wewnêtrzne!

Atrybut style

Jednym ze sposobów ustalania stylów elementu jest zastosowanie atry-
butu style. Atrybut ten mo¿e towarzyszyæ niemal ka¿demu elementowi
HTML.

Zmiana formatu akapitu ma postaæ:

<P style=”font-size: 12pt; color: red;

font-family: Arial; text-align: right”>witaj

Metoda ta nie jest wygodna i nie powinna byæ nadu¿ywana. Jej

ewidentn¹ wad¹ jest rozmiar otrzymywanego kodu: ka¿dy element P
bêdzie zawiera³ komplet informacji o stylu. Jednak w niektórych sytu-
acjach powy¿sze rozwi¹zanie mo¿e byæ korzystne.

WICZENIE

Przygotuj witrynê z æwiczenia pierwszego, stosuj¹c jedynie atrybuty style.

Oczywiœcie rozwi¹zanie sk³ada siê z jednego pliku. Jego kod zosta³

przedstawiony na listingu 4 (na CD).

Zwróæmy jednak uwagê na fakt, ¿e rozwi¹zanie z æwiczenia 3 nie

zawiera nigdzie informacji na temat jêzyka opisu stylów. Stosuj¹c ele-
menty STYLE oraz LINK podawaliœmy informacjê o jêzyku CSS.
Informacja ta by³a zawarta w napisie text/css.

Jeœli w dokumencie nie pojawia siê informacja na temat jêzyka sty-

lów, a stosowane s¹ atrybuty style, wówczas koniecznym jest umiesz-
czenie w dokumencie elementu META ustalaj¹cego domyœlny jêzyk
stylów (por. dokumentacja HTML 4.01, rozdzia³ 14.2.1):

<META http-equiv=”Content-Style-Type”

content=”text/css”>

Wielkość liter, białe znaki i komentarze

Jêzyk CSS dopuszcza stosowanie zarówno du¿ych, jak i ma³ych liter.
Definicjê stylu:

BODY {

color : brown;
background : beige;
margin : 200px;
border : blck 5px solid;

}

mo¿emy zapisaæ:

body {

COLOR : BROWN;
backGROUND : BEIGE;
Margin : 200PX;
BOrdER : blcK 5PX soLID;

}

Nazwy atrybutów mo¿emy pisaæ du¿ymi, jak i ma³ymi literami.

Poprawnymi nazwami atrybutu s¹ background, backGROUND oraz
BACKground.

Równie¿ wartoœci atrybutów mo¿emy pisaæ literami dowolnej wiel-

koœci: solid, SOLID czy Solid.

Wielkoœæ liter jest istotna w adresach URL, w nazwach krojów

czcionek oraz w nazwach atrybutów id i class.

Bia³e znaki s¹ traktowane jedynie jako separatory. Tam, gdzie mo-

¿e wyst¹piæ jeden jakikolwiek bia³y znak, tam mo¿e wyst¹piæ dowolna
ich liczba. Na przyk³ad definicjê:

H1 {

font-weight : bold;

}

mo¿emy zapisaæ:

H1{font-weight:bold;}

oraz

{

font-weight:bold;

}

HTML

INTERNET.marzec.2005

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

Nie wszystkie bia³e znaki mo¿emy pomin¹æ. Styl:

border : blck 5px solid;

nie mo¿e byæ zapisany jako:

border:blck5pxsolid;

Komentarze w jêzyku CSS oznaczamy napisami /* oraz */.

Komentarz taki mo¿e rozci¹gaæ siê na dowoln¹ liczbê linii. Komenta-
rzy nie mo¿emy zagnie¿d¿aæ.

Składnia stylu CSS

Pojedynczy opis stylu w jêzyku CSS sk³ada siê z selektora oraz defini-
cji. Selektor decyduje o tym, którym elementom HTML wystêpuj¹cym
na stronie WWW zostanie przypisany styl. Natomiast definicja ujêta
w nawiasy klamrowe ustala format. Na przyk³ad w zapisie:

SPAN {

text-decoration : underline;

}

selektorem jest napis SPAN, zaœ definicja (objêta nawiasami klamro-
wymi) zawiera jeden wpis: text-decoration : underline;.

Styl taki zostanie zinterpretowany nastêpuj¹co: wszystkie elementy

SPAN wystêpuj¹ce na stronie WWW zostan¹ podkreœlone.

Definicja stylu otoczona nawiasami klamrowymi mo¿e zawieraæ

dowoln¹ liczbê wpisów postaci:

atrybut : wartoœæ;

Obramowanie wszystkich elementów DIV osi¹gniemy stosuj¹c

styl:

DIV {

border-style : solid;
border-width : 5px;
border-color : black;

}

Selektorem w powy¿szym przyk³adzie jest napis DIV. Selektor taki

powoduje zastosowanie stylu do wszystkich elementów DIV wystêpu-
j¹cych na stronie. Natomiast definicja stylu zawiera opis trzech atrybu-
tów: border-style, border-width oraz border-color. Atrybuty te nadaj¹
czarne (black), piêciopikselowe (5px), ci¹g³e (solid) obramowanie.

Skrócony i rozszerzony zapis kilku stylów

Jeœli danemu selektorowi chcemy nadaæ kilka stylów, to mo¿emy to
uczyniæ na dwa sposoby. Pierwszy z nich zawiera kilka osobnych sty-
lów dotycz¹cych tego samego selektora, na przyk³ad:

H1 { font-weight : bold }
H1 { font-size : 12pt }
H1 { font-family : Helvetica }

Drugi, wygodniejszy, stosuje pojedynczy selektor. W definicji wy-

mieniamy kilka atrybutów:

H1 {

font-weight : bold;
font-size : 12pt;
font-family : Helvetica;

}

Obydwa powy¿sze zapisy s¹ równowa¿ne.
Ponadto zapis niektórych atrybutów, na przyk³ad border, font czy

background, mo¿emy skracaæ stosuj¹c jeden wpis zawieraj¹cy kilka
wartoœci:

atrybut : wartoœæ1 wartoœæ2 wartoœæ3;

W skróconym zapisie seriê wartoœci atrybutów umieszczamy po

nazwie atrybutu, oddzielaj¹c je bia³ymi znakami:

H1 {

border: solid black 1px;

}

Powy¿szy zapis ma takie samo znaczenie jak:

H1 {

border : solid;

border : 5px;
border : black;

}

oraz

H1 {

border-style : solid;
border-width : 5px;
border-color : black;

}

Selektor grupowy

Jeœli identyczne style chcemy przypisaæ kilku elementom HTML, wte-
dy wygodnie jest u¿yæ selektora grupowego. Zamiast pisaæ:

H1 {

text-align : center;

}
H2 {

text-align : center;

}
H3 {

text-align : center;

}

wymieniamy elementy H1, H2 oraz H3 oddzielaj¹c je przecinkami:

H1, H2, H3 {

text-align : center;

}

Klasy i identyfikatory

Poznaliœmy pierwszy rodzaj selektorów: selektory typu. Selektory takie
umo¿liwiaj¹ nadanie odpowiedniego formatu wszystkim elementom
wybranego rodzaju (typu), które wystêpuj¹ na stronie. Na przyk³ad,
zmianê czcionki wszystkich elementów H1 osi¹gniemy stosuj¹c style:

H1 {

font-family : Verdana;

}

Jeœli zechcemy wszystkie akapity wyjustowaæ, wówczas wystarczy

na stronie umieœciæ styl:

P {

text-align : justify;

}

Jednak takie rozwi¹zanie bêdzie wystarczaj¹ce jedynie w bardzo

prostych przypadkach. Co zrobiæ, jeœli na stronie pojawi siê akapit,
który powinien byæ wyrównany do prawej strony? Nie mo¿emy zmie-
niæ definicji stylu elementu P na text-align: right;, gdy¿ wówczas
wszystkie akapity zostan¹ wyrównane do prawej. Podobnie, co zrobiæ,
je¿eli w tabeli chcemy kilka wybranych komórek TD wyró¿niæ innym
kolorem?

W celu zmiany formatu jednego lub kilku elementów wystêpuj¹-

cych na stronie mo¿emy u¿yæ klas oraz identyfikatorów. Klasy i iden-
tyfikatory przypisujemy elementom HTML, korzystaj¹c z atrybutów id
oraz class. Atrybuty te nale¿¹ do grupy coreattrs i mog¹ towarzyszyæ
ka¿demu elementowi HTML.

Poprawnymi wartoœciami atrybutów class oraz id s¹ napisy rozpo-

czynaj¹ce siê od litery i zawieraj¹ce litery, cyfry oraz znak myœlnika.
Wielkoœæ liter jest rozró¿niana.

W kodzie HTML witryny WWW stosujemy atrybut class. Na przy-

k³ad akapit zawieraj¹cy artyku³ mo¿e wygl¹daæ nastêpuj¹co:

... treœæ wprowadzenie ...


... treœæ artyku³u ...

HTML

INTERNET.marzec.2005

100

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

Definiuj¹c style do powy¿szego kodu mo¿emy zastosowaæ selekto-

ry P oraz P.wprowadzenie, *.wprowadzenie oraz .wprowadzenie:

P {
...
}
P.wprowadzenie {
...
}
*.wprowadzenie {
...
}
.wprowadzenie {
...
}

Selektor P dotyczy wszystkich elementów P wystêpuj¹cych na stro-

nie (tak¿e tych, które posiadaj¹ atrybut class). Selektor P.wprowadzenie
odnosi siê wy³¹cznie do tych akapitów (elementów P), które posiadaj¹
atrybut class o wartoœci wprowadzenie. Natomiast selektory *.wprowa-
dzenie oraz .wprowadzenie s¹ równowa¿ne i odnosz¹ siê do wszystkich
elementów (nie tylko akapitów, ale równie¿ nag³ówków, tabel czy sek-
cji), które posiadaj¹ atrybut class o wartoœci wprowadzenie.

WICZENIE

Przygotuj witrynê przedstawiaj¹c¹ nowelê pt. Janko Muzykant. Zwróæ
uwagê na akapit zawieraj¹cy w treœci jedynie znak *. Akapit ten nale-
¿y wyœrodkowaæ.

Treœæ utworu sk³ada siê z akapitów tekstu. Kolejne akapity otacza-

my znacznikami oraz . Natomiast akapit, który sk³ada siê
z pojedynczego znaku *, umieszczamy w akapicie klasy srodek. Oto
fragment kodu HTML strony z nowel¹:

Pokój ci, Janku!
*
Nazajutrz powrócili pañstwo ...

Definiuj¹c style do powy¿szego fragmentu, korzystamy z selekto-

rów P oraz P.srodek:

P {

text-indent : 2em;
text-align : justify;

}
P.srodek {

text-align : center

}

W podobny sposób, jak z klas znaczników, korzystamy z identyfi-

katorów. W kodzie HTML stosujemy atrybut id:

Natomiast w stylach stosujemy selektory: DIV, DIV#menu, *#me-

nu oraz #menu:

DIV {
...style...
}
DIV#menu {
...style...
}
*#menu {
...style...
}
#menu {
...style...
}

Selektor DIV odnosi siê do wszystkich elementów DIV, DIV#me-

nu – do elementu DIV o identyfikatorze menu. Selektory *#menu

i #menu s¹ równowa¿ne i dotycz¹ dowolnych elementów HTML
o identyfikatorze menu.

WICZENIE

Przygotuj witrynê przedstawiaj¹c¹ opowiadanie The Call of The Wild.
Akapit zawieraj¹cy trzy gwiazdki sformatuj stosuj¹c identyfikator.

Wszystkie akapity tekstu umieszczamy wewn¹trz akapitów P. Aka-

pit zawieraj¹cy gwiazdki otrzymuje identyfikator gwiazdki:

Then an old wolf ...
* * *
And here may well end the story of Buck ...

Dokument wzbogacamy o style:

P {

text-indent : 2em;
text-align : justify;
font-size : 12pt;

}
#gwiazdki {

text-align : center;

}

Zasadnicza ró¿nica pomiêdzy klasami i identyfikatorami polega na

tym, ¿e wartoœci przypisane identyfikatorom musz¹ byæ unikalne. Nie
mo¿emy u¿yæ dwukrotnie w tym samym dokumencie identycznej war-
toœci atrybutu id. Natomiast nazwa klasy mo¿e zostaæ wykorzystana
w dokumencie dowoln¹ liczbê razy.

WICZENIE

Przygotuj stronê WWW z tekstem powieœci W osiemdziesi¹t dni do-
oko³a œwiata.

W utworze tym autor umieœci³ na pocz¹tku ka¿dego rozdzia³u

zdanie podsumowuj¹ce zawartoœæ. Zdanie to sformatujemy stosu-
j¹c element P klasy opis. Wszystkie pozosta³e akapity teksu bêd¹
otoczone znacznikami i pozbawionymi jakichkolwiek
atrybutów:

<H2>Chapter I</H2>
IN WHICH PHILEAS FOGG AND

PASSEPARTOUT ...
Mr. Phileas Fogg lived, in 1872 ...
Certainly an Englishman ...
<H2>Chapter II</H2>
IN WHICH PASSEPARTOUT

IS CONVINCED ...
”Faith,” muttered Passepartout ...
Madame Tussaud’s ...

WICZENIE

Przygotuj stronê WWW z tekstem powieœci Ozma of Oz.

Tym razem mamy do czynienia z trzema ró¿nymi rodzajami akapi-

tów. Akapity z tekstem utworu sformatujemy stosuj¹c element P pozba-
wiony klas. Na pocz¹tku utworu znajduje siê tekst skierowany przez
autora do czytelników. Tekst ten ma nieco wiêksze marginesy. Zostanie
on sformatowany elementem P klasy wstep. Natomiast podpis, który
ró¿ni siê sposobem wyrównania, umieœcimy w akapitach klasy autor:

My friends ...
Well, here is ...
If this judgment ...
L. FRANK BAUM.
MACATAWA, 1907.

Elementy DIV i SPAN oraz atrybut class

Elementy DIV oraz SPAN w po³¹czeniu atrybutem class umo¿liwiaj¹
jak gdyby definiowanie nowych elementów jêzyka HTML. Jeœli ele-
ment SPAN wzbogacimy o klasê program:

HTML

INTERNET.marzec.2005

101

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

Adobe Photoshop

wówczas element taki mo¿e pojawiæ siê na stronie WWW dowoln¹
liczbê razy, zaœ style jego definiujemy stosuj¹c selektor:

SPAN.program {
...style...
}

Ilekroæ w treœci artyku³u u¿ywamy nazwy jakiegoœ programu, war-

to zastosowaæ element SPAN klasy program:

Microsoft Word
Gimp

Podobnie, jeœli przygotowujemy tekst dotycz¹cy matematyki, to

zmienne mo¿emy umieœciæ w elementach SPAN klasy geometria.
Wszystkie symbole oznaczaj¹ce nazwy obiektów geometrycznych for-
matujemy nastêpuj¹co:

prosta l
punkt A

Decyzjê o tym, jakie klasy znajd¹ zastosowanie w konkretnym

przypadku, nale¿y podj¹æ po przeanalizowaniu treœci artyku³u.
Przyk³adami s¹: nazwy plików, opcje programów, nazwy progra-
mów, nazwy zmiennych (ogólnie: fragmenty kodu), cytaty z jêzy-
ka obcego.

Przyk³ady u¿ycia elementów SPAN powy¿szych klas s¹ nastêpuj¹ce:

php.ini
Corel Draw
Plik/Otwórz
$_GET[’id’]
Casscading Style Sheets

Element DIV wzbogacony o nazwê klasy mo¿emy wykorzystaæ do

definiowania wiêkszych fragmentów stron: spisów treœci, systemu me-
nu oraz ilustracji i listingów zawieraj¹cych podpis.

WICZENIE

Sformatuj artyku³ na temat programu C.a.R, stosuj¹c do nazw plików,
programów, opcji programów oraz obiektów matematycznych element
SPAN odpowiedniej klasy.

Jednostki długości

Wartoœciami czêœci atrybutów s¹ d³ugoœci. D³ugoœci te mog¹ byæ

wyra¿one w kilku ró¿nych jednostkach. Jednostkami wzglêdnymi s¹:

em – zale¿na od wielkoœci czcionki
ex – (x-height) zale¿na od wysokoœci czcionki
px – piksel monitora lub drukarki
% – procenty

Natomiast jednostkami bezwzglêdnymi:

in – cal
cm – centymetr
mm – milimetr
pt = 1/72 cala
pc = 12pt

Pamiêtajmy, by po ka¿dej liczbie umieœciæ jednostkê. Na przyk³ad

ustalaj¹c wielkoœæ marginesu strony nale¿y napisaæ:

BODY {

margin : 100px;

}

a nie

PRZYK£AD NIEPOPRAWNY
BODY {

margin : 100;

}

Kolory stosowane na stronach WWW

Do ustalenia koloru oraz t³a elementu stosujemy atrybuty color oraz back-
ground. Atrybuty te odnosz¹ siê niemal¿e do wszystkich znaczników. Takie

ujednolicenie jest bardzo wygodne. Bez wzglêdu na to czy zmieniamy kolor
akapitu, czy komórki tabeli stosujemy atrybuty color oraz background:

P {

color : blue;
background : red;

}
TD {

color : white;
background : brown

}

Kolory wystêpuj¹ce w arkuszach stylów mo¿emy ustalaæ na kilka

sposobów. Po pierwsze specyfikacja jêzyka HTML definiuje nazwy
szesnastu podstawowych barw (rys. 2).

Rys. 2. Szesnaœcie kolorów

podstawowych

Jeœli zechcemy u¿yæ koloru nie wystê-
puj¹cego w tabeli szesnastu barw pod-
stawowych, wówczas nale¿y skorzystaæ
z kodu RGB. Skrót pochodzi od nazw
kolorów R – red (czerwony), G – green
(zielony), B – blue (niebieski). Natê¿e-
nia kolorów s¹ liczbami ca³kowitymi
jednobajtowymi z zakresu od 0 do 255
i mog¹ byæ podane w systemie dziesiêt-
nym b¹dŸ szesnastkowym. Nasycenie
barw mo¿emy równie¿ wyraziæ w pro-
centach. W takim przypadku mo¿emy
u¿yæ liczb rzeczywistych (tj. zawieraj¹-
cych czêœæ u³amkow¹). Oto przyk³ady
definicji kolorów:

color : rgb(10,0,255);
color : #0A00FF;
color : #0a00ff;
color : rgb(3.921%, 0%, 100%);

Wszystkie trzy podane style stosuj¹ tê sam¹
barwê. Nasycenie koloru czerwonego wyno-
si 10 (w systemie szesnastkowym 0A lub

0a). Procentowo nasycenie 10 wynosi 10/255 = 3,921%. Nasycenie koloru
zielonego jest równe 0. Kolor niebieski ma maksymalne nasycenie równe
255 (szesnastkowo FF lub ff; 100%).

Kody dziesiêtne i procentowe podajemy jako parametry „funkcji”

rgb. Natomiast kody szesnastkowe (pisane literami dowolnej wielko-
œci) poprzedzamy znakiem #.

Poniewa¿ RGB jest zapisany na trzech bajtach (ka¿dy kolor na

osobnym bajcie), zatem mówimy, ¿e takie kodowanie posiada 24-bito-
w¹ (8 bitów/bajt x 3 bajty = 24 bity) g³êbiê kolorów.

Nie wszystkie przegl¹darki umo¿liwiaj¹ stosowanie a¿ tak bogatej

gamy kolorów. Na przyk³ad w przypadku starych monitorów VGA do-
stêpnych jest 16 lub 256 barw. Zatem stosowanie barw stwarza pewne
problemy. Co siê stanie, jeœli komputer, na którym ogl¹damy stronê,
nie umo¿liwia wyœwietlania u¿ytych kolorów?

W celu zmniejszenia tego typu problemów zdefiniowano paletê

216 barw, nazwan¹ bezpiecznymi kolorami WWW. Paleta ta zawie-
ra barwy powsta³e przez równomierne podzielenie szeœcianu barw
RGB. Ka¿d¹ z trzech barw sk³adowych dzielimy na szeœæ natê¿eñ
o wartoœciach dziesiêtnych: 0, 51, 102, 153, 204, 255. St¹d iloœæ
otrzymanych barw wynosi 6 x 6 x 6 = 216. W szesnastkowych ko-
dach barw bezpiecznych pojawiaj¹ siê jedynie cyfry 00, 33, 66, 99,
CC oraz FF.

Rys. 3 przedstawia wszystkie bezpieczne kolory WWW. Natomiast

rys. 4 przedstawia kolory bezpieczne u³o¿one w szeœcian barw (czêœæ
barw jest zas³oniêta).

HTML

INTERNET.marzec.2005

102

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

NA CD

Rys. 3. 216 kolorów
bezpiecznych

Rys. 4. Kolory
bezpieczne u³o¿one
w szeœcian barw

Ostatnim sposobem kodo-
wania kolorów jest zasto-

sowanie palety 140 barw nazwanych. Barwy te nie
pokrywaj¹ siê (poza drobnymi wyj¹tkami) z kolora-
mi bezpiecznymi. Pierwszych 15 barw przedstawio-
no na rys. 5.

Rys. 5.

Pierwszych
piêtnaœcie
kolorów palety
140 kolorów
nazwanych

Paleta szesna-
stu barw pod-
s t a w o w y c h
zosta³a pier-
wotnie opisa-
na w specyfi-
kacji jêzyka

HTML 4.01. Informacje na temat kolorów bezpiecznych znajdziemy
w przewodniku CSS pod adresem http://www.w3.org/MarkUp/Guide/Style. Nato-
miast paletê 140 barw nazwanych znajdziemy pod adresem:
http://www.w3.org/TR/css3-color/

. Warto zwróciæ uwagê, ¿e w nadchodz¹cej,

trzeciej wersji jêzyka CSS pojawiaj¹ siê, oprócz kodów RGB, równie¿
kody RGBA zawieraj¹ce przezroczystoœæ oraz kody HLS i HLSA.

Zestawienie najczęściej stosowanych atrybutów

Efektywne wykorzystanie arkuszy stylów do formatowania doku-
mentów HTML wymaga znajomoœci podstawowych atrybutów
i ich dopuszczalnych wartoœci. Tabele od 1 do 6 zawieraj¹ najwa¿-
niejsze atrybuty CSS pogrupowane kategoriami, zaœ listing 5 (na
CD) prezentuje sposoby u¿ycia czêœci atrybutów.

Podsumowanie

Arkusze stylów istotnie zmieni³y podejœcie do projektowania
witryn WWW. Wprawdzie wiele serwisów stosuje jeszcze przesta-
rza³e elementy HTML nadaj¹ce format (np. CENTER, FONT) oraz
wycofane w³aœciwoœci (np. bgcolor), jednak coraz czêœciej mo¿na
napotkaæ strony zawieraj¹ce banery „Poprawny kod HTML” oraz
„Poprawny kod CSS”. Równie¿ publikacje traktuj¹ce o webmaste-
ringu coraz czêœciej podkreœlaj¹ rolê standardów publikowanych
przez organizacjê W3C i zachêcaj¹ do ich przestrzegania.

S¹dzê, ¿e naukê jêzyka HTML nale¿y od pocz¹tku ³¹czyæ z po-

znawaniem stylów CSS. O zaletach stosowania arkuszy stylów
przekonamy siê analizuj¹c ostatnie trzy przyk³ady zawarte w tabeli
7 (na CD). Mimo ¿e przedstawione witryny sk³adaj¹ siê z od kilku
do kilkuset plików (!), to ich wygl¹d mo¿emy modyfikowaæ zmie-
niaj¹c definicje stylów zawarte w jednym pliku.

TABELA 1: WYRÓWNANIE PIONOWE I POZIOME
Atrybut

Poprawne wartości

Opis

text−align

justify, left, right, center

wyrównanie poziome

vertical−align

baseline, sub, super, top, text−top,

wyrównanie pionowe

middle, bottom, text−bottom, długość

Ćwiczenia przedstawione w artykule są dostępne na stronie domowej
autora pod adresem

http://www.gajdaw.pl.

TABELA 6: WYPUNKTOWANIE I NUMEROWANIE
Atrybut

Poprawne wartości

Opis

list−style−type

disc, circle, square, decimal,

styl numerowania

decimal−leading−zero, lower−roman,

i wypunktowania

upper−roman, lower−greek, lower−alpha,
lower−latin, upper−alpha, upper−latin,
hebrew, armenian, georgian,
cjk−ideographic, hiragana, katakana,
hiragana−iroha, katakana−iroha, none

list−style−position

inside, outside

położenie numeracji
względem tekstu

list−style−image

adres uri obrazu

ikona wypunktowania

TABELA 5: OBRAMOWANIE
Atrybut

Poprawne wartości

Opis

border−style

none, hidden, dotted, dashed, solid,

rodzaj obramowania (linia

double, groove ridge, inset, outset

ciągła, przerywana itd.)

border−style−left,

takie jak border−style

rodzaj obramowania każdej

border−style−right,

krawędzi z osobna

border−style−top,
border−style−bottom
border−width

thin, medium, thick, długość

grubość obramowania

border−left−width,

takie jak border−width

grubość obramowania
każdej

border−right−width,

krawędzi z osobna

border−top−width,
border−bottom−width
border−color

kolor

kolor obramowania

border−left−color,

kolor

kolor obramowania każdej

border−right−color,

krawędzi z osobna

border−top−color,
border−bottom−color
border−collapse

collapse, separate

złączanie krawędzi
sąsiadujących komórek
tabeli

border

kombinacja wszystkich właściwości
oddzielonych białymi znakami

border−left,

kombinacja wszystkich właściwości

border−right,

oddzielonych białymi znakami

border−top,

w stosunku do każdej krawędzi

border−bottom

z osobna

TABELA 4: TEKST
Atrybut

Poprawne wartości

Opis

text−indent

długość

wielkość wcięcia akapitu

text−decoration

none, underline, overline,

dekoracja tekstu

line−through, blink

text−transform

capitalize, uppercase, lowercase, none

przekształcanie tekstu

word−spacing

normal, długość

odstępy między słowami

white−space

normal, pre, nowrap

interpretacja białych
znaków

letter−spacing

normal, długość

odstępy między literami

line−height

normal, długość

wysokość linii

TABELA 3: CZCIONKI
Atrybut

Poprawne wartości

Opis

Font−family

nazwa kroju czcionki,

nazwa kroju czcionki

np. Courier, Verdana, Arial, Serif

Font−size

długość, larger, smaller

wielkość czcionki

Font−weight

normal, bold, bolder, lighter,

grubość kroju

100, 200, 300, 400, 500, 600,
700, 800, 900

Font−style

normal, italic, oblique

kursywa

Font−variant

normal, small−caps

kapitaliki

Font−stretch

normal, wider, narrower,

rozstrzelenie liter

ultra−condensed, extra−condensed,
condensed, semi−condensed,
semi−expanded, expanded,
extra−expanded, ultra−expanded

font

kombinacja powyższych wartości
oddzielonych białymi znakami

TABELA 2: WYSOKOŚĆ, SZEROKOŚĆ, MARGINESY I OTACZANIE
Atrybut

Poprawne wartości

Opis

Width

długość

szerokość

Height

długość

wysokość

Max−width

długość

maksymalna szerokość

Max−height

długość

maksymalna wysokość

Min−width

długość

minimalna szerokość

Min−height

długość

minimalna wysokość

Margin

długość

marginesy (wszystkie cztery)

Margin−left, margin−

długość

marginesy lewy, prawy, górny

right, margin−top,

i dolny

margin−bottom
Padding

długość

otaczanie (z czterech stron)

Padding−left, padding−

długość

otaczanie z lewej, prawej, górne

right, padding−top,

i dolne

padding−bottom

HTML

INTERNET.marzec.2005

103

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

Wyszukiwarka

Podobne podstrony:
CSS – kaskadowe arkusze stylów
ABC kaskadowych arkuszy stylow CSS abccss(1)
ABC kaskadowych arkuszy stylow CSS abccss
ABC kaskadowych arkuszy stylow CSS abccss
ABC kaskadowych arkuszy stylow CSS 2
ABC kaskadowych arkuszy stylow CSS abccss(1)
ABC kaskadowych arkuszy stylow CSS
Kaskadowe arkusze stylów CSS
Kaskadowe arkusze stylów 1
Kaskadowe arkusze stylów 1
CSS3 Kaskadowe arkusze stylow cwiczenia praktyczne cwcss3 2
CSS3 Kaskadowe arkusze stylow cwiczenia praktyczne

więcej podobnych podstron