Struktura a wygląd dokumentów HTML
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ć:
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 nagłówku strony WWW (a więc pomiędzy znacznikami <HEAD> oraz </HEAD>). Stosując style wewnętrzne korzystamy z elementu STYLE:
HTML
1. <STYLE type="text/css">
2. <!-- ...tutaj definicja stylów... -->
3. </STYLE>
Listing zwinięty - 3 linii
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:
HTML
<LINK rel="stylesheet" href="nazwapliku.css" type="text/css">
Ćwiczenie 1
Przygotuj witrynę "Witaj przybyszu!", przedstawioną na rys. 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.
[+]
[-]
Listing 1: Witryna stosująca style wewnętrzne
Listing 1: Witryna stosująca style wewnętrzne
HTML
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. <HTML>
3. <HEAD>
4. <TITLE>Style wewnętrzne</TITLE>
5. <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
6. <STYLE type="text/css">
7. <!--
8. BODY {
9. background : rgb(215,251,226);
10. text-align : center;
11. margin : 50px;
12. }
13.
14. DIV {
15. background : rgb(0,128,255);
16. width : 400px;
17. border : 3px black solid;
18. }
19.
20. H1 {
21. margin : 20px;
22. border : 1px solid black;
23. background : rgb(255,255,155);
24. }
25. -->
26. </STYLE>
27. </HEAD>
28. <BODY>
29. <DIV><H1>WITAJ PRZYBYSZU!</H1></DIV>
30. </BODY>
31. </HTML>
Listing zwinięty - 31 linii
Ćwiczenie 2
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 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.
[+]
[-]
Listing 2: Witryna wykorzystująca style zewnętrzne zapisane w pliku nowestyle.css
Listing 2: Witryna wykorzystująca style zewnętrzne zapisane w pliku nowestyle.css
HTML
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. <HTML>
3. <HEAD>
4. <TITLE>Style zewnętrzne</TITLE>
5. <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
6. <LINK rel="stylesheet" href="nowestyle.css" type="text/css">
7. </HEAD>
8. <BODY>
9. <DIV><H1>WITAJ PRZYBYSZU!</H1></DIV>
10. </BODY>
11. </HTML>
Listing zwinięty - 11 linii
[+]
[-]
Listing 3: Plik nowestyle.css zawierający definicje stylów
Listing 3: Plik nowestyle.css zawierający definicje stylów
CSS
1. BODY {
2. background : rgb(215,251,226);
3. text-align : center;
4. margin : 50px;
5. }
6.
7. DIV {
8. color : rgb(0,0,0);
9. background : rgb(0,128,255);
10. width : 400px;
11. border : 3px black solid;
12. }
13.
14. H1 {
15. margin : 20px;
16. border : 1px solid black;
17. background : rgb(255,255,155);
18. }
Listing zwinięty - 18 linii
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.
Rys. 1. Witryna stanowiąca treść ćwiczeń 1 oraz 2 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!
Atrybut style
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ć:
HTML
<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. Jednak w niektórych sytuacjach powyższe rozwiązanie może być korzystne.
Ćwiczenie 3
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.
[-]
Listing 4: Użycie atrybutu style
Listing 4: Użycie atrybutu style
HTML
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. <HTML>
3. <HEAD>
4. <TITLE>Style wewnętrzne</TITLE>
5. <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
6. <META http-equiv="Content-Style-Type" content="text/css">
7. </HEAD>
8. <BODY style="background: rgb(215,251,226); text-align: center; margin: 50px;">
9. <DIV style="background: rgb(0,128,255); width: 400px; border: 3px black solid;">
10. <H1 style="margin: 20px; border: 1px solid black; background:
rgb(255,255,155);">WITAJ PRZYBYSZU!</H1>
11. </DIV>
12. </BODY>
13. </HTML>
Listing zwinięty - 13 linii
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):
HTML
<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:
CSS
1. BODY {
2. color : brown;
3. background : beige;
4. margin : 200px;
5. border : blck 5px solid;
6. }
Listing zwinięty - 6 linii
możemy zapisać:
CSS
1. body {
2. COLOR : BROWN;
3. backGROUND : BEIGE;
4. Margin : 200PX;
5. BOrdER : blcK 5PX soLID;
6. }
Listing zwinięty - 6 linii
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ę:
CSS
1. H1 {
2. font-weight : bold;
3. }
Listing zwinięty - 3 linii
możemy zapisać
CSS
H1{font-weight:bold;}
oraz
CSS
1. H1
2. {
3. font-weight:bold;
4. }
Listing zwinięty - 4 linii
Nie wszystkie białe znaki możemy pominąć. Styl:
CSS
border : blck 5px solid;
nie może być zapisany jako:
CSS
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ć.
Składnia stylu CSS
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:
CSS
1. SPAN {
2. text-decoration : underline;
3. }
Listing zwinięty - 3 linii
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:
CSS
1. DIV {
2. border-style : solid;
3. border-width : 5px;
4. border-color : black;
5. }
Listing zwinięty - 5 linii
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.
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 stylów dotyczących tego samego selektora, na przykład: [-]
CSS
1. H1 { font-weight : bold }
2. H1 { font-size : 12pt }
3. H1 { font-family : Helvetica }
Listing zwinięty - 3 linii
Drugi, wygodniejszy, stosuje pojedynczy selektor. W definicji wymieniamy kilka atrybutów:
CSS
1. H1 {
2. font-weight : bold;
3. font-size : 12pt;
4. font-family : Helvetica;
5. }
Listing zwinięty - 5 linii
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:
CSS
1. H1 {
2. border: solid black 1px;
3. }
Listing zwinięty - 3 linii
Powyższy zapis ma takie samo znaczenie jak:
CSS
1. H1 {
2. border : solid;
3. border : 5px;
4. border : black;
5. }
Listing zwinięty - 5 linii
oraz
CSS
1. H1 {
2. border-style : solid;
3. border-width : 5px;
4. border-color : black;
5. }
Selektor grupowy
Jeśli identyczne style chcemy przypisać kilku elementom HTML, wtedy wygodnie jest użyć selektora grupowego. Zamiast pisać:
[-]
CSS
1. H1 {
2. text-align : center;
3. }
4. H2 {
5. text-align : center;
6. }
7. H3 {
8. text-align : center;
9. }
Listing zwinięty - 9 linii
wymieniamy elementy H1, H2 oraz H3 oddzielając je przecinkami:
CSS
1. H1, H2, H3 {
2. text-align : center;
3. }
Listing zwinięty - 3 linii
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:
CSS
1. H1 {
2. font-family : Verdana;
3. }
Listing zwinięty - 3 linii
Jeśli zechcemy wszystkie akapity wyjustować, wówczas wystarczy na stronie umieścić styl:
CSS
1. P {
2. text-align : justify;
3. }
Listing zwinięty - 3 linii
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 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:
HTML
1. <P class="wprowadzenie">
2. ... treść wprowadzenie ...
3. </P>
4. <P>
5. ... treść artykułu ...
6. </P>
Listing zwinięty - 6 linii
Definiując style do powyższego kodu możemy zastosować selektory P oraz P.wprowadzenie, *.wprowadzenie oraz .wprowadzenie:
CSS
1. P {
2. ...
3. }
4. P.wprowadzenie {
5. ...
6. }
7. *.wprowadzenie {
8. ...
9. }
10. .wprowadzenie {
11. ...
12. }
Listing zwinięty - 12 linii
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.
Ćwiczenie 4
Przygotuj witrynę przedstawiającą nowelę "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ą:
HTML
1. <P>Pokój ci, Janku!</P>
2. <P class="srodek">*</P>
3. <P>Nazajutrz powrócili państwo ... </P>
Listing zwinięty - 3 linii
Definiując style do powyższego fragmentu, korzystamy z selektorów P oraz P.srodek:
[-]
CSS
1. P {
2. text-indent : 2em;
3. text-align : justify;
4. }
5. P.srodek {
6. text-align : center
7. }
Listing zwinięty - 7 linii
W podobny sposób, jak z klas znaczników, korzystamy z identyfikatorów. W kodzie HTML stosujemy atrybut id:
HTML
1. <DIV id="menu">
2. ...kod HTML menu...
3. </DIV>
Listing zwinięty - 3 linii
Natomiast w stylach stosujemy selektory: DIV, DIV#menu, *#menu oraz #menu:
CSS
1. DIV {
2. ...style...
3. }
4. DIV#menu {
5. ...style...
6. }
7. *#menu {
8. ...style...
9. }
10. #menu {
11. ...style...
12. }
Listing zwinięty - 12 linii
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
Ćwiczenie 5
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:
[+]
[-]
HTML
1. <P>Then an old wolf ...</P>
2. <P id="gwiazdki">* * *</P>
3. <P>And here may well end the story of Buck ...</P>
Listing zwinięty - 3 linii
Dokument wzbogacamy o style:
[+]
[-]
CSS
1. P {
2. text-indent : 2em;
3. text-align : justify;
4. font-size : 12pt;
5. }
6. #gwiazdki {
7. text-align : center;
8. }
Listing zwinięty - 8 linii
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.
Ćwiczenie 6
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:
[+]
[-]
HTML
1. <H2>Chapter I</H2>
2. <P class="opis">IN WHICH PHILEAS FOGG AND PASSEPARTOUT ...</P>
3. <P>Mr. Phileas Fogg lived, in 1872 ...</P>
4. <P>Certainly an Englishman ...</P>
5. <H2>Chapter II</H2>
6. <P class="opis">IN WHICH PASSEPARTOUT IS CONVINCED ...</P>
7. <P>"Faith," muttered Passepartout ...</P>
8. <P>Madame Tussaud's ...</P>
Listing zwinięty - 8 linii
Ćwiczenie 7
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:
HTML
1. <P class="wstep">My friends ...</P>
2. <P class="wstep">Well, here is ...</P>
3. <P class="wstep">If this judgment ...</P>
4. <P class="autor">L. FRANK BAUM.</P>
5. <P class="autor">MACATAWA, 1907.</P>
Listing zwinięty - 5 linii
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 element SPAN wzbogacimy o klasę program:
HTML
<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:
CSS
1. SPAN.program {
2. ...style...
3. }
Listing zwinięty - 3 linii
Ilekroć w treści artykułu używamy nazwy jakiegoś programu, warto zastosować element SPAN klasy program:
HTML
1. <SPAN class="program">Microsoft Word</SPAN>
2. <SPAN class="program">Gimp</SPAN>
Listing zwinięty - 2 linii
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:
HTML
1. prosta <SPAN class="geometria">l</SPAN>
2. punkt <SPAN class="geometria">A</SPAN>
Listing zwinięty - 2 linii
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 programów, nazwy zmiennych (ogólnie: fragmenty kodu), cytaty z języka obcego.
Przykłady użycia elementów SPAN powyższych klas są następujące:
[-]
HTML
1. <SPAN class="plik">php.ini</SPAN>
2. <SPAN class="program">Corel Draw</SPAN>
3. <SPAN class="opcja">Plik/Otwórz</SPAN>
4. <SPAN class="zmienna">$_GET['id']</SPAN>
5. <SPAN class="ang">Casscading Style Sheets</SPAN>
Listing zwinięty - 5 linii
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
Ćwiczenie 8
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ć:
[+]
[-]
CSS
1. BODY {
2. margin : 100px;
3. }
Listing zwinięty - 3 linii
a nie
[+]
[-]
PRZYKŁAD NIEPOPRAWNY
PRZYKŁAD NIEPOPRAWNY
CSS
1. BODY {
2. margin : 100;
3. }
Listing zwinięty - 3 linii
Kolory stosowane na stronach WWW
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 bardzo wygodne. Bez względu na to czy zmieniamy kolor akapitu, czy komórki tabeli stosujemy atrybuty color oraz background:
[+]
[-]
CSS
1. P {
2. color : blue;
3. background : red;
4. }
5. TD {
6. color : white;
7. background : brown
8. }
Listing zwinięty - 8 linii
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).
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:
[+]
[-]
CSS
1. color : rgb(10,0,255);
2. color : #0A00FF;
3. color : #0a00ff;
4. color : rgb(3.921%, 0%, 100%);
Listing zwinięty - 4 linii
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%).
Rys. 2. 16 kolorów podstawowych Rys. 3. 216 kolorów bezpiecznych 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 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 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 x 6 x 6 = 216. W szesnastkowych kodach 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).
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 rys. 5.
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.... Natomiast paletę 140 barw nazwanych znajdziemy pod adresem: http://www.w3.org/TR/css3-colo.... 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 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.
[+]
[-]
Listing 5: Przykłady użycia atrybutów z tabel 1-6
Listing 5: Przykłady użycia atrybutów z tabel 1-6
CSS
1. P {
2. text-align : justify;
3. }
4. TR {
5. vertical-align : top;
6. }
7. DIV {
8. width : 100px;
9. height : 75px;
10. max-width : 55px;
11. max-height : 66%;
12. }
13. BODY {
14. margin : 5px;
15. margin-right : -40px;
16. margin-top : 50%;
17. margin-bottom : -5%;
18. }
19. TD {
20. padding : 5%;
21. padding-top : 7px;
22. }
23. P {
24. font-family : Courier;
25. font-size : 8pt;
26. font-weight : bold;
27. font-style : italic;
28. }
29. DIV {
30. font-family : Verdana;
31. font-size : 150%;
32. font-weight : 900;
33. }
34. TD {
35. font-family : Arial;
36. font-size : larger;
37. font-weight : lighter;
38. }
39. SPAN {
40. font : Arial 10pt bold italic;
41. }
42. STRONG {
43. font : Verdana 200% 900 small-caps wider;
44. }
Listing zwinięty - 44 linii
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, middle, bottom, text-bottom, długość |
wyrównanie pionowe |
Tabela 1: 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-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 3: Czcionki |
||
Atrybut |
Poprawne wartości |
Opis |
Font-family |
np. Courier, Verdana, Arial, Serif |
nazwa kroju czcionki |
Font-size |
długość, larger, smaller |
wielkość czcionki |
Font-weight |
normal, bold, bolder, lighter, |
grubość kroju |
Font-style |
normal, italic, oblique |
kursywa |
Font-variant |
normal, small-caps |
kapitaliki |
Font-stretch |
normal, wider, narrower, |
rozstrzelenie liter |
Font |
kombinacja powyższych wartości oddzielonych białymi znakami |
|
Tabela 4: Tekst |
||
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 5: Obramowanie |
||
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, |
takie jak border-style |
rodzaj obramowania każdej krawędzi z osobna |
border-width |
thin, medium, thick, długość |
grubość obramowania |
border-left-width, |
takie jak border-width |
grubość obramowania każdej krawędzi z osobna |
border-color |
kolor |
kolor obramowania |
border-left-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, |
kombinacja wszystkich właściwości oddzielonych białymi znakami w stosunku do każdej krawędzi z osobna |
wysokość linii |
Tabela 6: Wypunktowanie i numerowanie |
||
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 numerowania i wypunktowania |
list-style-position |
inside, outside |
położenie numeracji względem tekstu |
list-style-image |
adres url obrazu |
ikona wypunktowania |
Podsumowanie
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 coraz częściej można napotkać strony zawierające banery "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 (na CD). Mimo ż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
Wyszukiwarka
Podobne podstrony:
CSS cwiczenia cwcss
Elementy div i style CSS w praktyce 11 2005
7 Formatowanie zaawansowane style Cwiczenie 3
7 Formatowanie zaawansowane style Cwiczenie 2
Wszystkie style pływackie nauka ćwiczenia itp
2 style cwiczenia
7 Formatowanie zaawansowane style Cwiczenie 1
Style Kierowania - notatka, studia, semestr 1, ćwiczenia, Podstawy zarządzania
FORMAL STYLE cwiczenia
3 ćwiczenia BADANIE asfaltów
Ćwiczenie7
więcej podobnych podstron