CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
CS
S
CS
S
CS
S
Kaskadowe arkusze stylów
Kaskadowe arkusze stylów dołączane W obydwu przypadkach informację o stylach umieszczamy w na-
główku strony WWW (a więc pomiędzy znacznikami oraz
do witryn WWW zawierają definicje
).
formatów poszczególnych elementów
Stosując style wewnętrzne korzystamy z elementu STYLE:
HTML. Artykuł zawiera przegląd

Struktura a wygląd dokumentów HTML Definicja stylów znajduje się wewnątrz komentarza HTML (czy-
Wygląd witryn WWW zależy od dwóch czynników: kodu strony (napisa- li pomiędzy ). Nie jest to konieczne, ale w przypadku
nego zazwyczaj w języku HTML) oraz formatu nadawanego przez prze- przeglądarki, która nie potrafi interpretować stylów, zawartoS
ć ele-
glądarkę różnym elementom HTML. ZawartoS
ć i strukturę dokumentu opi- mentu STYLE pojawi się w treS
ci strony (przeglądarka po napotka-
sujemy korzystając z elementów HTML: akapitów (P), nagłówków (H1, niu nieznanego elementu powinna go zignorować, pozostawiając je-
H2), tabel (TABLE, TD, TR), sekcji (DIV) itd. Natomiast format elemen- dynie jego zawartoS
ć). Zastosowanie komentarza HTML usuwa sty-
tów definiujemy w języku CSS (ang. Casscading Style Sheets  kaskadowe le z treS
ci strony wyS
wietlanej przez przeglądarkę, która nie potrafi
arkusze stylów). Zatem tworząc witrynę WWW musimy opisać: interpretować stylów. Wewnątrz komentarza umieszczamy opis
zawartoS
ć i strukturę strony (w języku HTML), stylów.
format elementów (w języku CSS). Element STYLE posiada dwa atrybuty: type oraz media. Atrybut
W przypadku braku opisu stylów, przeglądarka zastosuje style type ustala język stosowany do opisu stylów. W przypadku stosowania
domyS
lne, które zazwyczaj są doS
ć ubogie. języka CSS atrybutowi type należy nadać wartoS
ć text/css.
Oddzielając definicję formatu elementów od samej zawartoS
ci strony Atrybut media może przyjmować między innymi wartoS
ci screen
otrzymamy dokument, którego format jest niezależny od kodu HTML. oraz print. WartoS
cią domyS
lną jest screen. Stosowanie atrybutu media
Główną korzyS
cią takiego rozwiązania jest to, że wygląd dokumentu mo- jest jednym ze sposobów przygotowania dwóch różnych formatów
żemy modyfikować nie zmieniając jego treS
ci ani kodu HTML. strony: jednego przeznaczonego do wyS
wietlenia na ekranie oraz dru-
giego przeznaczonego do wydruku.
Dołączanie stylów do dokumentu Style zewnętrzne zapisujemy w osobnym pliku. JeS
li stosuje-
Definicję stylów możemy dołączyć do dokumentu na dwa sposoby: my język CSS, to plikowi nadajemy rozszerzenie .css. Tak zdefi-
jako style wewnętrzne, niowane style dołączmy do dokumentu HTML stosując element
jako style zewnętrzne. LINK:
Wszystkie listingi z tego artykułu
są dostępne na dołączonej płycie CD
98 INTERNET.marzec.2005
 katalog Warsztat_CSS,
podkatalog Listingi.
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
type= text/css > 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ć:

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.
Rys. 1. Witryna stanowiąca treS
ć ćwiczeń 1 oraz 2
ĆWICZENIE 1 ĆWICZENIE 3
Przygotuj witrynę Witaj przybyszu!, przedstawioną na rys. 1, zawiera- Przygotuj witrynę z ćwiczenia pierwszego, stosując jedynie atrybuty style.
jącą style wewnętrzne. OczywiS
cie rozwiązanie składa się z jednego pliku. Jego kod został
Cała witryna, zarówno style, jak i kod HTML, są zapisane w jed- przedstawiony na listingu 4 (na CD).
nym pliku. W nagłówku strony jest umieszczony element STYLE, któ- Zwróćmy jednak uwagę na fakt, że rozwiązanie z ćwiczenia 3 nie
ry definiuje format elementów BODY, H1 oraz DIV. Kod witryny zo- zawiera nigdzie informacji na temat języka opisu stylów. Stosując ele-
stał przedstawiony na listingu 1 (na CD). menty STYLE oraz LINK podawaliS
my informację o języku CSS.
Informacja ta była zawarta w napisie text/css.
ĆWICZENIE 2 JeS
li w dokumencie nie pojawia się informacja na temat języka sty-
Przygotuj witrynę z ćwiczenia pierwszego, umieszczając style w osob- lów, a stosowane są atrybuty style, wówczas koniecznym jest umiesz-
nym pliku. czenie w dokumencie elementu META ustalającego domyS
lny język
Tym razem rozwiązanie składa się z dwóch plików: pliku HTML stylów (por. dokumentacja HTML 4.01, rozdział 14.2.1):
oraz pliku CSS. W nagłówku pliku HTML znajduje się element LINK dołączający do strony style zapisane w pliku CSS. Plik content= text/css >
HTML jest przedstawiony na listingu 2, a plik CSS na listingu 3
(obydwa na CD). Wielkość liter, białe znaki i komentarze
Jak widać, różnica pomiędzy obydwoma rozwiązaniami jest nie- Język CSS dopuszcza stosowanie zarówno dużych, jak i małych liter.
wielka. Sprowadza się do rozbicia pliku przygotowanego w ćwiczeniu Definicję stylu:
pierwszym na dwa pliki, usunięciu elementu STYLE oraz dodaniu ele- BODY {
mentu LINK. Zatem, które z rozwiązań jest lepsze i w jaki sposób ob- color : brown;
jawiają się jego zalety? background : beige;
Głównym czynnikiem oceny jest liczba plików HTML tworzących margin : 200px;
witrynę. JeS
li przygotowujemy pojedynczy plik HTML, wówczas mo- border : blck 5px solid;
żemy rozważać stosowanie stylów wewnętrznych. W przeciwnym }
razie (tj. jeS
li witryna składa się z dwóch lub większej liczby plików możemy zapisać:
HTML) stosowanie stylów wewnętrznych nie ma sensu. Należy użyć body {
stylów zewnętrznych. COLOR : BROWN;
JeS
li zastosujemy style wewnętrzne, wówczas prosta operacja Wi- backGROUND : BEIGE;
dok/y
ródło wykonana w przeglądarce pozwoli na analizę zarówno ko- Margin : 200PX;
du HTML, jak i stylów. Drugą sytuacją, w której stosowanie stylów BOrdER : blcK 5PX soLID;
wewnętrznych będzie miało zalety, jest podglądanie spakowanego }
archiwum. JeS
li po otworzeniu spakowanego archiwum zawierającego Nazwy atrybutów możemy pisać dużymi, jak i małymi literami.
pliki HTML programem kompresującym (np. WinZip) podwójnie Poprawnymi nazwami atrybutu są background, backGROUND oraz
klikniemy jeden z plików HTML, wówczas przeglądarka wyS
wietli BACKground.
poprawnie (tj. uwzględniając wszystkie formaty) jedynie stronę zawie- Również wartoS
ci atrybutów możemy pisać literami dowolnej wiel-
rającą style wewnętrzne. koS
ci: solid, SOLID czy Solid.
Style wewnętrzne znajdują zastosowanie głównie przy tworzeniu WielkoS
ć liter jest istotna w adresach URL, w nazwach krojów
witryn instruktażowych z ćwiczeniami. Podglądanie rozwiązania czcionek oraz w nazwach atrybutów id i class.
jest wówczas nieco prostsze niż w przypadku stosowania stylów Białe znaki są traktowane jedynie jako separatory. Tam, gdzie mo-
zewnętrznych. że wystąpić jeden jakikolwiek biały znak, tam może wystąpić dowolna
Za stylami zewnętrznymi przemawiają wszystkie pozostałe czynni- ich liczba. Na przykład definicję:
ki. Rozmiar witryny tworzonej przy użyciu stylów zewnętrznych jest H1 {
mniejszy. JeS
li witryna składa się z wielu plików, wówczas tylko pod- font-weight : bold;
czas pobierania pierwszego pliku pobierane będą również style. Przy }
wizycie na drugiej stronie witryny style będą pochodziły z pamięci możemy zapisać:
podręcznej przeglądarki (ang. cache). H1{font-weight:bold;}
ModyfikowalnoS
ć stylów zewnętrznych to chyba najbardziej wy- oraz
rax
na różnica. Zmiany dokonywane w jednym pliku wpływają na całą H1
witrynę i wszystkie jej podstrony. JeS
li zastosujemy style wewnętrzne, {
zmiana stylów będzie wymagała modyfikacji każdego pliku, który za- font-weight:bold;
wiera style wewnętrzne! }
INTERNET.marzec.2005 99
CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
Nie wszystkie białe znaki możemy pominąć. Styl: border : 5px;
border : blck 5px solid; border : black;
nie może być zapisany jako: }
border:blck5pxsolid; oraz
Komentarze w języku CSS oznaczamy napisami /* oraz */. H1 {
Komentarz taki może rozciągać się na dowolną liczbę linii. Komenta- border-style : solid;
rzy nie możemy zagnieżdżać. border-width : 5px;
border-color : black;
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 Selektor grupowy
na stronie WWW zostanie przypisany styl. Natomiast definicja ujęta JeS
li identyczne style chcemy przypisać kilku elementom HTML, wte-
w nawiasy klamrowe ustala format. Na przykład w zapisie: dy wygodnie jest użyć selektora grupowego. Zamiast pisać:
SPAN { H1 {
text-decoration : underline; text-align : center;
} }
selektorem jest napis SPAN, zaS
definicja (objęta nawiasami klamro- H2 {
wymi) zawiera jeden wpis: text-decoration : underline;. text-align : center;
Styl taki zostanie zinterpretowany następująco: wszystkie elementy }
SPAN występujące na stronie WWW zostaną podkreS
lone. H3 {
Definicja stylu otoczona nawiasami klamrowymi może zawierać text-align : center;
dowolną liczbę wpisów postaci: }
atrybut : wartoS
ć; wymieniamy elementy H1, H2 oraz H3 oddzielając je przecinkami:
Obramowanie wszystkich elementów DIV osiągniemy stosując H1, H2, H3 {
styl: text-align : center;
DIV { }
border-style : solid;
border-width : 5px; Klasy i identyfikatory
border-color : black; PoznaliS
my pierwszy rodzaj selektorów: selektory typu. Selektory takie
} umożliwiają nadanie odpowiedniego formatu wszystkim elementom
Selektorem w powyższym przykładzie jest napis DIV. Selektor taki wybranego rodzaju (typu), które występują na stronie. Na przykład,
powoduje zastosowanie stylu do wszystkich elementów DIV występu- zmianę czcionki wszystkich elementów H1 osiągniemy stosując style:
jących na stronie. Natomiast definicja stylu zawiera opis trzech atrybu- H1 {
tów: border-style, border-width oraz border-color. Atrybuty te nadają font-family : Verdana;
czarne (black), pięciopikselowe (5px), ciągłe (solid) obramowanie. }
JeS
li zechcemy wszystkie akapity wyjustować, wówczas wystarczy
Skrócony i rozszerzony zapis kilku stylów na stronie umieS
cić styl:
JeS
li danemu selektorowi chcemy nadać kilka stylów, to możemy to P {
uczynić na dwa sposoby. Pierwszy z nich zawiera kilka osobnych sty- text-align : justify;
lów dotyczących tego samego selektora, na przykład: }
H1 { font-weight : bold } Jednak takie rozwiązanie będzie wystarczające jedynie w bardzo
H1 { font-size : 12pt } prostych przypadkach. Co zrobić, jeS
li na stronie pojawi się akapit,
H1 { font-family : Helvetica } który powinien być wyrównany do prawej strony? Nie możemy zmie-
Drugi, wygodniejszy, stosuje pojedynczy selektor. W definicji wy- nić definicji stylu elementu P na text-align: right;, gdyż wówczas
mieniamy kilka atrybutów: wszystkie akapity zostaną wyrównane do prawej. Podobnie, co zrobić,
H1 { jeżeli w tabeli chcemy kilka wybranych komórek TD wyróżnić innym
font-weight : bold; kolorem?
font-size : 12pt; W celu zmiany formatu jednego lub kilku elementów występują-
font-family : Helvetica; cych na stronie możemy użyć klas oraz identyfikatorów. Klasy i iden-
} tyfikatory przypisujemy elementom HTML, korzystając z atrybutów id
Obydwa powyższe zapisy są równoważne. oraz class. Atrybuty te należą do grupy coreattrs i mogą towarzyszyć
Ponadto zapis niektórych atrybutów, na przykład border, font czy każdemu elementowi HTML.
background, możemy skracać stosując jeden wpis zawierający kilka Poprawnymi wartoS
ciami atrybutów class oraz id są napisy rozpo-
wartoS
ci: czynające się od litery i zawierające litery, cyfry oraz znak myS
lnika.
atrybut : wartoS
ć1 wartoS
ć2 wartoS
ć3; WielkoS
ć liter jest rozróżniana.
W skróconym zapisie serię wartoS
ci atrybutów umieszczamy po W kodzie HTML witryny WWW stosujemy atrybut class. Na przy-
nazwie atrybutu, oddzielając je białymi znakami: kład akapit zawierający artykuł może wyglądać następująco:
H1 {

border: solid black 1px; ... treS
ć wprowadzenie ...
}

Powyższy zapis ma takie samo znaczenie jak:

H1 { ... treS
ć artykułu ...
border : solid;

100 INTERNET.marzec.2005
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
Definiując style do powyższego kodu możemy zastosować selekto- i #menu są równoważne i dotyczą dowolnych elementów HTML
ry P oraz P.wprowadzenie, *.wprowadzenie oraz .wprowadzenie: o identyfikatorze menu.
P {
... ĆWICZENIE 5
} Przygotuj witrynę przedstawiającą opowiadanie The Call of The Wild.
P.wprowadzenie { 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:
*.wprowadzenie {

Then an old wolf ...

...

* * *

}

And here may well end the story of Buck ...

.wprowadzenie { Dokument wzbogacamy o style:
... P {
} text-indent : 2em;
Selektor P dotyczy wszystkich elementów P występujących na stro- text-align : justify;
nie (także tych, które posiadają atrybut class). Selektor P.wprowadzenie font-size : 12pt;
odnosi się wyłącznie do tych akapitów (elementów P), które posiadają }
atrybut class o wartoS
ci wprowadzenie. Natomiast selektory *.wprowa- #gwiazdki {
dzenie oraz .wprowadzenie są równoważne i odnoszą się do wszystkich text-align : center;
elementów (nie tylko akapitów, ale również nagłówków, tabel czy sek- }
cji), które posiadają atrybut class o wartoS
ci wprowadzenie. Zasadnicza różnica pomiędzy klasami i identyfikatorami polega na
tym, że wartoS
ci przypisane identyfikatorom muszą być unikalne. Nie
ĆWICZENIE 4 możemy użyć dwukrotnie w tym samym dokumencie identycznej war-
Przygotuj witrynę przedstawiającą nowelę pt. Janko Muzykant. Zwróć toS
ci atrybutu id. Natomiast nazwa klasy może zostać wykorzystana
uwagę na akapit zawierający w treS
ci jedynie znak *. Akapit ten nale- w dokumencie dowolną liczbę razy.
ży wyS
rodkować.
TreS
ć utworu składa się z akapitów tekstu. Kolejne akapity otacza- ĆWICZENIE 6
my znacznikami

oraz

. Natomiast akapit, który składa się Przygotuj stronę WWW z tekstem powieS
ci W osiemdziesiąt dni do-
z pojedynczego znaku *, umieszczamy w akapicie klasy srodek. Oto okoła S
wiata.
fragment kodu HTML strony z nowelą: W utworze tym autor umieS
cił na początku każdego rozdziału

Pokój ci, Janku!

zdanie podsumowujące zawartoS
ć. Zdanie to sformatujemy stosu-

*

jąc element P klasy opis. Wszystkie pozostałe akapity teksu będą

Nazajutrz powrócili państwo ...

otoczone znacznikami

i

pozbawionymi jakichkolwiek
Definiując style do powyższego fragmentu, korzystamy z selekto- atrybutów:
rów P oraz P.srodek:

Chapter I

P {

IN WHICH PHILEAS FOGG AND
text-indent : 2em; PASSEPARTOUT ...

text-align : justify;

Mr. Phileas Fogg lived, in 1872 ...

}

Certainly an Englishman ...

P.srodek {

Chapter II

text-align : center

IN WHICH PASSEPARTOUT
} IS CONVINCED ...

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

 Faith, muttered Passepartout ...

katorów. W kodzie HTML stosujemy atrybut id:

Madame Tussaud s ...

...kod HTML menu... ĆWICZENIE 7

Przygotuj stronę WWW z tekstem powieS
ci Ozma of Oz.
Natomiast w stylach stosujemy selektory: DIV, DIV#menu, *#me- Tym razem mamy do czynienia z trzema różnymi rodzajami akapi-
nu oraz #menu: tów. Akapity z tekstem utworu sformatujemy stosując element P pozba-
DIV { wiony klas. Na początku utworu znajduje się tekst skierowany przez
...style... autora do czytelników. Tekst ten ma nieco większe marginesy. Zostanie
} on sformatowany elementem P klasy wstep. Natomiast podpis, który
DIV#menu { różni się sposobem wyrównania, umieS
cimy w akapitach klasy autor:
...style...

My friends ...

}

Well, here is ...

*#menu {

If this judgment ...

...style...

L. FRANK BAUM.

}

MACATAWA, 1907.

#menu {
...style... Elementy DIV i SPAN oraz atrybut class
} Elementy DIV oraz SPAN w połączeniu atrybutem class umożliwiają
Selektor DIV odnosi się do wszystkich elementów DIV, DIV#me- jak gdyby definiowanie nowych elementów języka HTML. JeS
li ele-
nu  do elementu DIV o identyfikatorze menu. Selektory *#menu ment SPAN wzbogacimy o klasę program:
INTERNET.marzec.2005 101
CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
Adobe Photoshop ujednolicenie jest bardzo wygodne. Bez względu na to czy zmieniamy kolor
wówczas element taki może pojawić się na stronie WWW dowolną akapitu, czy komórki tabeli stosujemy atrybuty color oraz background:
liczbę razy, zaS
style jego definiujemy stosując selektor: P {
SPAN.program { color : blue;
...style... background : red;
} }
Ilekroć w treS
ci artykułu używamy nazwy jakiegoS
programu, war- TD {
to zastosować element SPAN klasy program: color : white;
Microsoft Word background : brown
Gimp }
Podobnie, jeS
li przygotowujemy tekst dotyczący matematyki, to Kolory występujące w arkuszach stylów możemy ustalać na kilka
zmienne możemy umieS
cić w elementach SPAN klasy geometria. sposobów. Po pierwsze specyfikacja języka HTML definiuje nazwy
Wszystkie symbole oznaczające nazwy obiektów geometrycznych for- szesnastu podstawowych barw (rys. 2).
matujemy następująco:
Rys. 2. SzesnaS
cie kolorów
prosta l
podstawowych
punkt A
Decyzję o tym, jakie klasy znajdą zastosowanie w konkretnym JeS
li zechcemy użyć koloru nie wystę-
przypadku, należy podjąć po przeanalizowaniu treS
ci artykułu. pującego w tabeli szesnastu barw pod-
Przykładami są: nazwy plików, opcje programów, nazwy progra- stawowych, wówczas należy skorzystać
mów, nazwy zmiennych (ogólnie: fragmenty kodu), cytaty z języ- z kodu RGB. Skrót pochodzi od nazw
ka obcego. kolorów R  red (czerwony), G  green
Przykłady użycia elementów SPAN powyższych klas są następujące: (zielony), B  blue (niebieski). Natęże-
php.ini nia kolorów są liczbami całkowitymi
Corel Draw jednobajtowymi z zakresu od 0 do 255
Plik/Otwórz i mogą być podane w systemie dziesięt-
$_GET[ id ] nym bądx
szesnastkowym. Nasycenie
Casscading Style Sheets barw możemy również wyrazić w pro-
Element DIV wzbogacony o nazwę klasy możemy wykorzystać do centach. W takim przypadku możemy
definiowania większych fragmentów stron: spisów treS
ci, systemu me- użyć liczb rzeczywistych (tj. zawierają-
nu oraz ilustracji i listingów zawierających podpis. cych częS
ć ułamkową). Oto przykłady
definicji kolorów:
ĆWICZENIE 8 color : rgb(10,0,255);
Sformatuj artykuł na temat programu C.a.R, stosując do nazw plików, color : #0A00FF;
programów, opcji programów oraz obiektów matematycznych element color : #0a00ff;
SPAN odpowiedniej klasy. color : rgb(3.921%, 0%, 100%);
Wszystkie trzy podane style stosują tę samą
Jednostki długości barwę. Nasycenie koloru czerwonego wyno-
WartoS
ciami częS
ci atrybutów są długoS
ci. DługoS
ci te mogą być si 10 (w systemie szesnastkowym 0A lub
wyrażone w kilku różnych jednostkach. Jednostkami względnymi są: 0a). Procentowo nasycenie 10 wynosi 10/255 = 3,921%. Nasycenie koloru
em  zależna od wielkoS
ci czcionki zielonego jest równe 0. Kolor niebieski ma maksymalne nasycenie równe
ex  (x-height) zależna od wysokoS
ci czcionki 255 (szesnastkowo FF lub ff; 100%).
px  piksel monitora lub drukarki Kody dziesiętne i procentowe podajemy jako parametry  funkcji
%  procenty rgb. Natomiast kody szesnastkowe (pisane literami dowolnej wielko-
Natomiast jednostkami bezwzględnymi: S
ci) poprzedzamy znakiem #.
in  cal Ponieważ RGB jest zapisany na trzech bajtach (każdy kolor na
cm  centymetr osobnym bajcie), zatem mówimy, że takie kodowanie posiada 24-bito-
mm  milimetr wą (8 bitów/bajt x 3 bajty = 24 bity) głębię kolorów.
pt = 1/72 cala Nie wszystkie przeglądarki umożliwiają stosowanie aż tak bogatej
pc = 12pt gamy kolorów. Na przykład w przypadku starych monitorów VGA do-
Pamiętajmy, by po każdej liczbie umieS
cić jednostkę. Na przykład stępnych jest 16 lub 256 barw. Zatem stosowanie barw stwarza pewne
ustalając wielkoS
ć marginesu strony należy napisać: problemy. Co się stanie, jeS
li komputer, na którym oglądamy stronę,
BODY { nie umożliwia wyS
wietlania użytych kolorów?
margin : 100px; W celu zmniejszenia tego typu problemów zdefiniowano paletę
} 216 barw, nazwaną bezpiecznymi kolorami WWW. Paleta ta zawie-
a nie ra barwy powstałe przez równomierne podzielenie szeS
cianu barw
PRZYKŁAD NIEPOPRAWNY RGB. Każdą z trzech barw składowych dzielimy na szeS
ć natężeń
BODY { o wartoS
ciach dziesiętnych: 0, 51, 102, 153, 204, 255. Stąd iloS
ć
margin : 100; 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.
Kolory stosowane na stronach WWW Rys. 3 przedstawia wszystkie bezpieczne kolory WWW. Natomiast
Do ustalenia koloru oraz tła elementu stosujemy atrybuty color oraz back- rys. 4 przedstawia kolory bezpieczne ułożone w szeS
cian barw (częS
ć
ground. Atrybuty te odnoszą się niemalże do wszystkich znaczników. Takie barw jest zasłonięta).
102 INTERNET.marzec.2005
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
Rys. 3. 216 kolorów
TABELA 2: WYSOKOŚĆ, SZEROKOŚĆ, MARGINESY I OTACZANIE
Atrybut Poprawne wartości Opis
bezpiecznych
Width długość szerokość
Rys. 4. Kolory
Height długość wysokość
bezpieczne ułożone
Max-width długość maksymalna szerokość
Max-height długość maksymalna wysokość
w szeS
cian barw
Min-width długość minimalna szerokość
Min-height długość minimalna wysokość
Ostatnim sposobem kodo- Margin długość marginesy (wszystkie cztery)
Margin-left, margin- długość marginesy lewy, prawy, górny
wania kolorów jest zasto-
right, margin-top, i dolny
sowanie palety 140 barw nazwanych. Barwy te nie
margin-bottom
Padding długość otaczanie (z czterech stron)
pokrywają się (poza drobnymi wyjątkami) z kolora-
Padding-left, padding- długość otaczanie z lewej, prawej, górne
mi bezpiecznymi. Pierwszych 15 barw przedstawio-
right, padding-top, i dolne
no na rys. 5. padding-bottom
TABELA 3: CZCIONKI
Rys. 5.
Atrybut Poprawne wartości Opis
Pierwszych
Font-family nazwa kroju czcionki, nazwa kroju czcionki
piętnaS
cie
np. Courier, Verdana, Arial, Serif
Font-size długość, larger, smaller wielkość czcionki
kolorów palety
Font-weight normal, bold, bolder, lighter, grubość kroju
140 kolorów
100, 200, 300, 400, 500, 600,
700, 800, 900
nazwanych
Font-style normal, italic, oblique kursywa
Font-variant normal, small-caps kapitaliki
Paleta szesna-
Font-stretch normal, wider, narrower, rozstrzelenie liter
stu barw pod-
ultra-condensed, extra-condensed,
condensed, semi-condensed,
st awowych
semi-expanded, expanded,
została pier-
extra-expanded, ultra-expanded
wotnie opisa- font kombinacja powyższych wartości
oddzielonych białymi znakami
na w specyfi-
kacji języka
TABELA 4: TEKST
Atrybut Poprawne wartości Opis
HTML 4.01. Informacje na temat kolorów bezpiecznych znajdziemy
text-indent długość wielkość wcięcia akapitu
w przewodniku CSS pod adresem http://www.w3.org/MarkUp/Guide/Style. Nato-
text-decoration none, underline, overline, dekoracja tekstu
miast paletę 140 barw nazwanych znajdziemy pod adresem:
line-through, blink
http://www.w3.org/TR/css3-color/. Warto zwrócić uwagę, że w nadchodzącej,
text-transform capitalize, uppercase, lowercase, none przekształcanie tekstu
word-spacing normal, długość odstępy między słowami
trzeciej wersji języka CSS pojawiają się, oprócz kodów RGB, również
white-space normal, pre, nowrap interpretacja białych
kody RGBA zawierające przezroczystoS
ć oraz kody HLS i HLSA.
znaków
letter-spacing normal, długość odstępy między literami
line-height normal, długość wysokość linii
Zestawienie najczęściej stosowanych atrybutów
Efektywne wykorzystanie arkuszy stylów do formatowania doku-
TABELA 5: OBRAMOWANIE
Atrybut Poprawne wartości Opis
mentów HTML wymaga znajomoS
ci podstawowych atrybutów
border-style none, hidden, dotted, dashed, solid, rodzaj obramowania (linia
i ich dopuszczalnych wartoS
ci. Tabele od 1 do 6 zawierają najważ-
double, groove ridge, inset, outset ciągła, przerywana itd.)
border-style-left, takie jak border-style rodzaj obramowania każdej
niejsze atrybuty CSS pogrupowane kategoriami, zaS
listing 5 (na
border-style-right, krawędzi z osobna
CD) prezentuje sposoby użycia częS
ci atrybutów.
border-style-top,
border-style-bottom
border-width thin, medium, thick, długość grubość obramowania
Podsumowanie
border-left-width, takie jak border-width grubość obramowania
Arkusze stylów istotnie zmieniły podejS
cie do projektowania każdej
border-right-width, krawędzi z osobna
witryn WWW. Wprawdzie wiele serwisów stosuje jeszcze przesta-
border-top-width,
rzałe elementy HTML nadające format (np. CENTER, FONT) oraz
border-bottom-width
border-color kolor kolor obramowania
wycofane właS
ciwoS
ci (np. bgcolor), jednak coraz częS
ciej można
border-left-color, kolor kolor obramowania każdej
napotkać strony zawierające banery  Poprawny kod HTML oraz
border-right-color, krawędzi z osobna
border-top-color,
 Poprawny kod CSS . Również publikacje traktujące o webmaste-
border-bottom-color
ringu coraz częS
ciej podkreS
lają rolę standardów publikowanych
border-collapse collapse, separate złączanie krawędzi
sąsiadujących komórek
przez organizację W3C i zachęcają do ich przestrzegania.
tabeli
Sądzę, że naukę języka HTML należy od początku łączyć z po-
border kombinacja wszystkich właściwości
oddzielonych białymi znakami
znawaniem stylów CSS. O zaletach stosowania arkuszy stylów
border-left, kombinacja wszystkich właściwości
przekonamy się analizując ostatnie trzy przykłady zawarte w tabeli
border-right, oddzielonych białymi znakami
border-top, w stosunku do każdej krawędzi
7 (na CD). Mimo że przedstawione witryny składają się z od kilku
border-bottom z osobna
do kilkuset plików (!), to ich wygląd możemy modyfikować zmie-
niając definicje stylów zawarte w jednym pliku. n
TABELA 6: WYPUNKTOWANIE I NUMEROWANIE
Atrybut Poprawne wartości Opis
Ćwiczenia przedstawione w artykule są dostępne na stronie domowej
list-style-type disc, circle, square, decimal, styl numerowania
decimal-leading-zero, lower-roman, i wypunktowania
autora pod adresem http://www.gajdaw.pl.
upper-roman, lower-greek, lower-alpha,
lower-latin, upper-alpha, upper-latin,
hebrew, armenian, georgian,
TABELA 1: WYRÓWNANIE PIONOWE I POZIOME
cjk-ideographic, hiragana, katakana,
Atrybut Poprawne wartości Opis
hiragana-iroha, katakana-iroha, none
text-align justify, left, right, center wyrównanie poziome list-style-position inside, outside położenie numeracji
vertical-align baseline, sub, super, top, text-top, wyrównanie pionowe względem tekstu
middle, bottom, text-bottom, długość list-style-image adres uri obrazu ikona wypunktowania
INTERNET.marzec.2005 103