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.
Wygląd witryn WWW zależy od dwóch czynników: kodu strony (napisanego zazwyczaj w języku HTML) oraz formatu nadawanego przez przeglądarkę różnym elementom HTML. Zawartość i strukturę dokumentu opisujemy korzystając z elementów HTML: akapitów (P), nagłówków (H1, H2), tabel (TABLE, TD, TR), sekcji (DIV), itd. Natomiast format elementów definiujemy w języku CSS (ang. Casscading Style Sheets - kaskadowe arkusze stylów).
Zatem tworząc witrynę WWW musimy opisać:
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.
Definicję stylów możemy dołączyć do dokumentu na dwa sposoby:
W obydwu przypadkach, informację o stylach umieszczamy w nagłó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 (czyli pomiędzy <!-- oraz -->). Nie jest to konieczne, ale w przypadku przeglądarki, która nie potrafi interpretować stylów, zawartość elementu STYLE pojawi się w treści strony (przeglądarka po napotkaniu nieznanego elementu, powinna go zignorować, pozostawiając jedynie jego zawartość). Zastosowanie komentarza HTML usuwa style 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 drugiego - przeznaczonego do wydruku.
Style zewnętrzne zapisujemy w osobnym pliku. Jeśli stosujemy język CSS, to plikowi nadajemy rozszerzenie .css. Tak zdefiniowane style dołączmy do dokumentu HTML stosując element LINK:
<LINK rel="stylesheet" href="nazwapliku.css" type="text/css">
Rys. 1. Witryna stanowiąca treść ćwiczeń 1 oraz 2
Przygotuj witrynę Witaj przybyszu! przedstawioną na rysunku 1, zawierającą style wewnętrzne.
Cała witryna, zarówno style jak i kod HTML, są zapisane w jednym pliku. W nagłówku strony jest umieszczony element STYLE, który definiuje format elementów BODY, H1 oraz DIV. Kod witryny został przedstawiony na listingu 1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Style wewnętrzne</TITLE> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <STYLE type="text/css"> <!-- BODY { background : rgb(215,251,226); text-align : center; margin : 50px; } DIV { background : rgb(0,128,255); width : 400px; border : 3px black solid; } H1 { margin : 20px; border : 1px solid black; background : rgb(255,255,155); } --> </STYLE> </HEAD> <BODY> <DIV><H1>WITAJ PRZYBYSZU!</H1></DIV> </BODY> </HTML>
Listing 1. Witryna stosująca style wewnętrzne
Przygotuj witrynę z ćwiczenia pierwszego, umieszczając style w osobnym pliku.
Tym razem rozwiązanie składa się z dwóch plików: pliku HTML oraz pliku CSS. W nagłówku pliku HTML znajduję 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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Style zewnętrzne</TITLE> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <LINK rel="stylesheet" href="nowestyle.css" type="text/css"> </HEAD> <BODY> <DIV><H1>WITAJ PRZYBYSZU!</H1></DIV> </BODY> </HTML>
Listing 2. Witryna wykorzystująca style zewnętrzne zapisane w pliku nowestyle.css
BODY { background : rgb(215,251,226); text-align : center; margin : 50px; } DIV { color : rgb(0,0,0); background : rgb(0,128,255); width : 400px; border : 3px black solid; } H1 { margin : 20px; border : 1px solid black; background : rgb(255,255,155); }
Listing 3. Plik nowestyle.css zawierający definicje stylów
Jak widać różnica pomiędzy obydwoma rozwiązaniami jest niewielka. Sprowadza się do rozbicia pliku przygotowanego w ćwiczeniu pierwszym na dwa pliki, usunięciu elementu STYLE oraz dodaniu elementu LINK. Zatem które z rozwiązań jest lepsze i w jaki sposób objawiają 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 Widok/Źródło wykonana w przeglądarce, pozwoli na analizę zarówno kodu 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ę zawierają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 czynniki. 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 podczas 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 wyraź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 zawiera style wewnętrzne!
Jednym ze sposobów ustalania stylów elementu jest zastosowanie atrybutu 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</P>
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. Niemniej jednak, w niektórych sytuacja powyższe rozwiązanie może być korzystne.
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Style wewnętrzne</TITLE> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY style="background: rgb(215,251,226); text-align: center; margin: 50px;"> <DIV style="background: rgb(0,128,255); width: 400px; border: 3px black solid;"> <H1 style="margin: 20px; border: 1px solid black; background: rgb(255,255,155);"> WITAJ PRZYBYSZU! </H1> </DIV> </BODY> </HTML>
Listing 4. Użycie atrybutu style
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 elementy 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 stylów, a stosowane są atrybuty style, wówczas koniecznym jest umieszczenie 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">
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 wielkoś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
H1 { font-weight:bold; }
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. Komentarzy nie możemy zagnieżdżać.
Pojedynczy opis stylu w języku CSS składa się z selektora oraz definicji. 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 klamrowymi) 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ępujących na stronie. Natomiast definicja stylu zawiera opis trzech atrybutów: border-style, border-width oraz border-color. Atrybuty te nadają czarne (black), pięciopikselowe (5px), ciągłe (solid) obramowanie.
Jeśli danemu selektorowi chcemy nadać kilka stylów, to możemy to uczynić na dwa sposoby. Pierwszy z nich zawiera kilka osobnych styló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 wymieniamy 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; }
Jeśli identyczne style chcemy przypisać kilku elementom HTML, wtedy 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; }
Poznaliśmy pierwszy rodzaj selektorów: selektory typu. Selektory takie umożliwiają nadanie odpowiedniego formatu wszystkim elementom wybranego rodzaju (typu), które występując 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że 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 zmienić 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 identyfikatory 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 rozpoczynają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 przykład akapit zawierający artykuł może wyglądać następująco:
<P class="wprowadzenie"> ... treść wprowadzenie ... </P> <P> ... treść artykułu ... </P>
Definiując style do powyższego kodu możemy zastosować selektory P oraz P.wprowadzenie, *.wprowadzenie oraz .wprowadzenie:
P { ... } P.wprowadzenie { ... } *.wprowadzenie { ... } .wprowadzenie { ... }
Selektor P dotyczy wszystkich elementów P występujących na stronie (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 *.wprowadzenie 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 sekcji), które posiadają atrybut class o wartości wprowadzenie.
Przygotuj witrynę przedstawiającą nowelę p.t. 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 otaczamy znacznikami <P> oraz </P>. Natomiast akapit, który składa się z pojedynczego znaku *, umieszczamy w akapicie klasy srodek. Oto fragment kodu HTML strony z nowelą:
<P>Pokój ci, Janku!</P> <P class="srodek">*</P> <P>Nazajutrz powrócili państwo ... </P>
Definiując style do powyższego fragmentu, korzystamy z selektoró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 identyfikatorów. W kodzie HTML stosujemy atrybut id:
<DIV id="menu"> ...kod HTML menu... </DIV>
Natomiast w stylach stosujemy selektory: DIV, DIV#menu, *#menu oraz #menu:
DIV { ...style... } DIV#menu { ...style... } *#menu { ...style... } #menu { ...style... }
Selektor DIV odnosi się do wszystkich elementów DIV, DIV#menu - do elementu DIV o identyfikatorze menu. Selektory *#menu i #menu są równoważne i dotyczą dowolnych elementów HTML o identyfikatorze menu.
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. Akapit zawierający gwiazdki otrzymuje identyfikator gwiazdki:
<P>Then an old wolf ...</P> <P id="gwiazdki">* * *</P> <P>And here may well end the story of Buck ...</P>
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 wartości atrybutu id. Natomiast nazwa klasy może zostać wykorzystana w dokumencie dowolną liczbę razy.
Przygotuj stronę WWW z tekstem powieści W osiemdziesiąt dni dookoła świata.
W utworze tym autor umieścił na początku każdego rozdziału zdanie podsumowujące zawartość. Zdanie to sformatujemy stosując element P klasy opis. Wszystkie pozostałe akapity teksu będą otoczone znacznikami <P> i </P> pozbawionymi jakichkolwiek atrybutów:
<H2>Chapter I</H2> <P class="opis">IN WHICH PHILEAS FOGG AND PASSEPARTOUT ...</P> <P>Mr. Phileas Fogg lived, in 1872 ...</P> <P>Certainly an Englishman ...</P> <H2>Chapter II</H2> <P class="opis">IN WHICH PASSEPARTOUT IS CONVINCED ...</P> <P>"Faith," muttered Passepartout ...</P> <P>Madame Tussaud's ...</P>
Przygotuj stronę WWW z tekstem powieści Ozma of Oz .
Tym razem mamy do czynienia z trzema różnymi rodzajami akapitów. Akapity z tekstem utworu sformatujemy stosując element P pozbawiony 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:
<P class="wstep">My friends ...</P> <P class="wstep">Well, here is ...</P> <P class="wstep">If this judgment ...</P> <P class="autor">L. FRANK BAUM.</P> <P class="autor">MACATAWA, 1907.</P>
Elementy DIV oraz SPAN w połączeniu atrybutem class umożliwiają jak gdyby definiowanie nowych elementów języka HTML.
Jeśli element SPAN wzbogacimy o klasę program:
<SPAN class="program">Adobe Photoshop</SPAN>
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, warto zastosować element SPAN klasy program:
<SPAN class="program">Microsoft Word</SPAN> <SPAN class="program">Gimp</SPAN>
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 formatujemy następująco
prosta <SPAN class="geometria">l</SPAN> punkt <SPAN class="geometria">A</SPAN>
Decyzję o tym, jakie klasy znajdą zastosowanie w konkretnym przypadku, należy podjąć po przeanalizowaniu treści artykułu. Przykładami są:
Przykłady użycia elementów SPAN powyższych klas są następujące:
<SPAN class="plik">php.ini</SPAN> <SPAN class="program">Corel Draw</SPAN> <SPAN class="opcja">Plik/Otwórz</SPAN> <SPAN class="zmienna">$_GET['id']</SPAN> <SPAN class="ang">Casscading Style Sheets</SPAN>
Element DIV wzbogacony o nazwę klasy możemy wykorzystać do definiowania większych fragmentów stron: spisów treści, systemu menu, oraz ilustracji i listingów zawierających podpis.
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.
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ą:
Natomiast jednostkami bezwzględnymi:
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; }
Do ustalenia koloru oraz tła elementu stosujemy atrybuty color oraz background. Atrybuty te odnoszą się niemalże do wszystkich znaczników. Takie ujednolicenie jest to 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. Nazwy te zostały przedstawione na rysunku 2.
Rys. 2. Szesnaście kolorów podstawowych
Jeśli zechcemy użyć koloru nie występującego w tabeli szesnastu barw podstawowych, wówczas należy skorzystać kodu RGB. Skrót pochodzi od nazw kolorów R - red (czerwony), G - green (zielony), B - blue (niebieski). Natężenia kolorów są liczbami całkowitymi jednobajtowymi z zakresu od 0 do 255 i mogą być podane w systemie dziesiętnym bądź szesnastkowym. Nasycenie barw możemy również wyrazić w procentach. 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 wynosi 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 bitową (8 bitów/bajt * 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 dostę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 zawiera 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*6*6 = 216. W szesnastkowych kodach barw bezpiecznych pojawiają się jedynie cyfry 00, 33, 66, 99, CC oraz FF.
Rysunek 3 przedstawia wszystkie bezpieczne kolory WWW. Natomiast rysunek 4 przedstawia kolory bezpieczne ułożone w sześcian barw (część barw jest zasłonięta).
Rys. 3. 216 kolorów bezpiecznych
Rys. 4. Kolory bezpieczne ułożone w sześcian barw
Ostatnim sposobem kodowania kolorów jest zastosowanie palety 140 barw nazwanych. Barwy te nie pokrywają się (poza drobnymi wyjątkami) z kolorami bezpiecznymi. Pierwszych 15 barw przedstawiono na rysunku 5.
Rys. 5. Pierwszych piętnaście kolorów palety 140 kolorów nazwanych
Paleta szesnastu barw podstawowych została pierwotnie opisana w specyfikacji języka HTML 4.01. Informacje na temat kolorów bezpiecznych znajdziemy w przewodniku CSS pod adresem http://www.w3.org/MarkUp/Guide/Style. Natomiast 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.
Efektywne wykorzystanie arkuszy stylów do formatowania dokumentó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 prezentuje sposoby użycia części atrybutów.
Atrybut | Poprawne wartości | Opis |
---|---|---|
Atrybut | Poprawne wartości | Opis |
text-align | justify, left, right, center | wyrównanie poziome |
vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom, długość | wyrównanie pionowe |
Tabela 1. Wyrównanie pionowe i poziome
Atrybut | Poprawne wartości | Opis |
---|---|---|
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-right, margin-top, margin-bottom | długość | marginesy lewy, prawy, górny i dolny |
padding | długość | otaczanie (z czterech stron) |
padding-left, padding-right, padding-top, padding-bottom | długość | otaczanie z lewej, prawej, górne i dolne |
Tabela 2. Wysokość, szerokość, marginesy i otaczanie
Atrybut | Poprawne wartości | Opis |
---|---|---|
Atrybut | Poprawne wartości | Opis |
font-family | nazwa kroju czcionki, np. Courier, Verdana, Arial, Serif |
nazwa kroju czcionki |
font-size | długość, larger, smaller | wielkość czcionki |
font-weight | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
grubość kroju |
font-style | normal, italic, oblique | kursywa |
font-variant | normal, small-caps | kapitaliki |
font-stretch | normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
rozstrzelenie liter |
font | kombinacja powyższych wartości oddzielonych białymi znakami |
Tabela 3. Czcionki
Atrybut | Poprawne wartości | Opis |
---|---|---|
Atrybut | Poprawne wartości | Opis |
text-indent | długość | wielkość wcięcia akapitu |
text-decoration | none, underline, overline, line-through, blink | dekoracja tekstu |
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 4. Tekst
Atrybut | Poprawne wartości | Opis |
---|---|---|
Atrybut | Poprawne wartości | Opis |
border-style | none, hidden, dotted, dashed, solid, double, groove ridge, inset, outset |
rodzaj obramowania (linia ciągła, przerywana, itd.) |
border-style-left, border-style-right, border-style-top, border-style-bottom |
takie jak border-style | rodzaj obramowania każdej krawędzi z osobna |
border-width | thin, medium, thick, długość | grubość obramowania |
border-left-width, border-right-width, border-top-width, border-bottom-width |
takie jak border-width | grubość obramowania każdej krawędzi z osobna |
border-color | kolor | kolor obramowania |
border-left-color, border-right-color, border-top-color, border-bottom-color |
kolor | kolor obramowania każdej krawędzi z osobna |
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, border-right, border-top, border-bottom |
kombinacja wszystkich właściwości oddzielonych białymi znakami w stosunku do każdej krawędzi z osobna |
Tabela 5. Obramowanie
Atrybut | Poprawne wartości | Opis |
---|---|---|
Atrybut | Poprawne wartości | Opis |
list-style-type | disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none |
styl numerowanie i wypunktowania |
list-style-position | inside, outside | położenie numeracji względem tekstu |
list-style-image | adres uri obrazu | ikona wypunktowania |
Tabela 6. Wypunktowanie i numerowanie
P { text-align : justify; } TR { vertical-align : top; } DIV { width : 100px; height : 75px; max-width : 55px; max-height : 66%; } BODY { margin : 5px; margin-right : -40px; margin-top : 50%; margin-bottom : -5%; } TD { padding : 5%; padding-top : 7px; } P { font-family : Courier; font-size : 8pt; font-weight : bold; font-style : italic; } DIV { font-family : Verdana; font-size : 150%; font-weight : 900; } TD { font-family : Arial; font-size : larger; font-weight : lighter; } SPAN { font : Arial 10pt bold italic; } STRONG { font : Verdana 200% 900 small-caps wider; }
Listing 5. Przykłady użycia atrybutów z tabel 1-6
Arkusze stylów istotnie zmieniły podejście do projektowania witryn WWW. Wprawdzie wiele serwisów stosuje jeszcze przestarzałe elementy HTML nadające format (np.CENTER, FONT) oraz wycofane właściwości (np. bgcolor), jednakże coraz częściej można napotkać strony zawierające bannery "Poprawny kod HTML" oraz "Poprawny kod CSS". Również publikacje traktujące o webmasteringu 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 poznawaniem stylów CSS. O zaletach stosowania arkuszy stylów przekonamy się analizując ostatnie trzy przykłady zawarte w tabeli 7. Pomimo, że przedstawione witryny składają się z od kilku do kilkuset plików (!), to ich wygląd możemy modyfikować zmieniając definicje stylów zawarte w jednym pliku! Na zakończenie proponuję wykonanie ćwiczeń polegających na zmianie wyglądu serwisów przedstawiających piosenki zespołu The Beatles, opowiadania Franka Bauma oraz utwory Juliusza Verne'a.