Rozdział 4. Kaskadowe arkusze stylów

Transkrypt

1 Rozdział 4. Kaskadowe arkusze stylów Ogólna postać kaskadowego arkusza stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają określać rozmiar i kolor czcionki, definiować odstępy i rozmieszczenie tekstu oraz obrazów na stronie, a pełna lista ich możliwości jest znacznie dłuższa. Znaczniki HTML zostały pierwotnie zaprojektowane jako narzędzia definiowania zawartości dokumentu. I tak znacznik nagłówka określał: To jest nagłówek, znacznik akapitu stwierdzał: To jest akapit tekstu, znacznik tabeli informował: To jest tabela, a o układzie strony decydowała przeglądarka. Wraz z rozbudową możliwości przeglądarek zaczęły pojawiać się coraz to nowe znaczniki i atrybuty. Tworzenie stron WWW, których zawartość byłaby dobrze odseparowana od układu dokumentu, stawało się coraz trudniejsze. Z tego właśnie powodu konsorcjum W3C powołało do życia kaskadowe arkusze stylów wprowadzono je do specyfikacji HTML 4.0. Obecnie są one standardem i zarówno Netscape 4, jak i Internet Explorer 4 je obsługują. Co daje stosowanie arkuszy CSS? Podstawowe zalety stylów CSS to możliwość szybkiej i prostej modyfikacji stylu oraz błyskawiczna wręcz aktualizacja postaci dokumentu w przypadku takich zmian. One naprawdę zaoszczędzą Twój czas! Wyobraź sobie, że w rozbudowanej witrynie trzeba zmienić sposób formatowania dziesiątków nagłówków czy połączeń! To wiele godzin pracy, jeśli będziesz ręcznie wyszukiwał elementy i zmieniał ich atrybuty, lub kilka chwil, jeśli zastosujesz w dokumencie arkusze CSS wówczas modyfikacja stylu to parę stuknięć w klawisze, a aktualizacja to automat. Czym są kaskadowe arkusze stylów? Kaskadowy arkusz stylów to mechanizm definiujący formatowanie dla danej strony przy zastosowaniu stylów złożonych, które przeglądarka zinterpretuje w określonym porządku zwanym kaskadą.

2 Jakie są rodzaje arkuszy stylów? Arkusze stylów dają wiele możliwości stosowania stylów. Definicja stylu może pojawić się w konkretnym elemencie HTML wówczas mówimy o stylu wpisanym, w obrębie elementu head strony HTML (to znaczy między znacznikami <head> </head>) takie arkusze stylów nazywa się osadzonymi, lub może zostać pobrana z pliku zewnętrznego jest to wtedy zewnętrzny lub łączony arkusz stylów. Wszystkie typy arkuszy CSS wpisane, osadzone i zewnętrzne można stosować jednocześnie. Łączone arkusze stylów są przechowywane w zewnętrznym pliku o rozszerzeniu nazwy.css. Składnia takiego arkusza jest podobna jak w przypadku arkusza osadzonego, a sformatowanie strony wymaga jedynie umieszczenia połączenia do pliku zawierającego definicję stylu. Jaki styl zostanie zastosowany, jeśli w dokumencie zdefiniowano kilka arkuszy stylów (czyli jak działa kaskada stylów)? W przypadku obecności różnych arkuszy stylów na jednej stronie, hierarchia ich ważności rośnie w następującej kolejności: 1. Domyślne ustawienia przeglądarki 2. Zewnętrzny arkusz stylów 3. Osadzony arkusz stylów (umieszczony między znacznikami <head> </head>) 4. Styl wpisany (dotyczący konkretnego elementu HTML) Najwyższy priorytet ma styl wpisany, co oznacza, że jego ustawienia są dominujące względem zadeklarowanych w sekcji head oraz pobranych z pliku zawierającego zewnętrzny arkusz stylów. Dominują także nad domyślnymi ustawieniami przeglądarki. Jaka jest ogólna postać kaskadowego arkusza stylów? Postać arkusza stylu CSS zależy od typu arkusza. I tak w przypadku stylu wpisanego a więc umieszczonego w konkretnym znaczniku ma ona taką oto postać: <znacznik style= właściwość: wartość; > Ogólna postać osadzonego arkusza CSS jest następująca: <style type="text/css">  </style> Zawarta w obrębie elementu style definicja następującą składnię: selektor{właściwość: wartość} Selektorem nazywa się znacznik czy też element, który chcesz zdefiniować, właściwość to jego atrybut, który zmieniasz przypisując mu nową wartość. Właściwość i wartość rozdzielone są dwukropkiem oraz zawarte w nawiasach klamrowych, tak jak w tym przykładzie: body {color: black} Jeśli wartość ma postać wielowyrazową na przykład sans serif umieszcza się ją w cudzysłowie:

3 p {font-family: "sans serif"} Oto przykład rzeczywistej definicji: <style type="text/css">  </style> Między znacznikami <style> i </style> umieszczana jest lista znaczników HTML wraz z właściwościami arkusza, które je definiują. Definicja zaprezentowana powyżej zawiera tylko jeden symboliczny selektor definiowany przez jedną właściwość CSS. W przypadku większej liczby właściwości, wszystkie muszą być umieszczone w nawiasie klamrowym ({}) oraz oddzielone średnikami (;). Zwróć uwagę na znaczniki komentarza html, obejmujące wszystkie znaczniki i właściwości CSS dzięki temu, że zostały zastosowane, przeglądarki, które nie potrafią obsługiwać arkuszy stylów nie wyświetlą śmieci, lecz potraktują kod jako komentarz. Te z kolei, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów. Co oznacza ta definicja stylu? W zaprezentowanej definicji stylu zdefiniowany jest krój pisma, który zostanie zastosowany do tekstu strony w sekcji body. Innymi słowy tekst w tej sekcji będzie pisany czcionką Verdana (lub czcionką Arial, ewentualnie czcionką Helvetica, jeśli Verdana nie zostanie znaleziona na komputerze użytkownika jak widzisz, arkusze stylu uwzględniają nawet ewentualny brak zaplanowanej przez twórcę strony czcionki). Styl czcionki zostanie zastosowany także do tekstu umieszczonego między znacznikami <p> i <div>, natomiast tekst umieszczony w komórkach tabeli wymaga odrębnej definicji stylu. W jaki sposób w jednej definicji stylu określić kilka właściwości? Jeśli chciałbyś zdefiniować w definicji stylu kilka właściwości, musisz je rozdzielać średnikami, tak jak w poniższym wyrażeniu przykładowym, w którym do tekstu stosowane jest wyrównanie i kolor: p {text-align: center; color: red} Aby definicja była bardziej czytelna, każdą z właściwości możesz umieszczać w osobnym wierszu: p { text-align: center; color: black; font-family: arial } Czy jedną właściwość można przypisać kilku elementom? W definicji stylu elementy (inaczej selektory) można grupować. Selektory w grupie oddzielane są przecinkami. Oto przykład definicji, w której wszystkim poziomom nagłówka (od h1 do h6) przypisany zostaje kolor czerwony:

4 h1, h2, h3, h4, h5, h6 { color: red } Czy jednemu elementowi można przyporządkować różne style? Powiedzmy, że chcesz w swoim dokumencie zastosować do akapitów dwa różne sposoby wyrównania tekstu: pewne akapity chcesz dosunąć do prawego marginesu, a pozostałe wycentrować. W takim przypadku przydatny będzie atrybut class. Pozwala on zdefiniować różne style dla tego samego elementu inaczej mówiąc pozwala zdefiniować klasy stylu. Klasę określa się w taki oto sposób: element.nazwa_klasy{właściwość: wartość} W naszym przykładzie musimy więc zdefiniować dwie klasy: pierwsza, nazwijmy ją prawy, w której ustawimy sposób wyrównania tekstu do prawego marginesu, i klasa center, w której tekst jest wyśrodkowany: p.prawy {text-align: right} p.center {text-align: center} Teraz wystarczy wstawić nazwę klasy do tych znaczników, w których chcemy mieć określony sposób formatowania i gotowe: <p class="prawy"> Ten akapit zostanie wyrównany do prawej. <p class="center"> Ten akapit zostanie wyśrodkowany. Nazwy klas mogą być dowolne, pamiętaj jednak, by nie stosować w nich polskich liter. Nazwę selektora w definicji klasy można pominąć:.nazwa_klasy{właściwość: wartość} Wówczas zdefiniowany zostanie styl, który można zastosować do wielu elementów. W przykładzie przedstawionym poniżej klasa prawy została zastosowana zarówno do elementu h1, jak i do akapitu p: <h1 class="prawy"> Ten nagłówek został wyrównany do prawego marginesu. </h1> <p class="prawy"> Ten akapit został wyrównany do prawego marginesu.

5 Czy można narzucić styl pojedynczym wystąpieniom danego elementu? Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu id. Atrybut id pozwala więc oznaczać elementy podobnie jak atrybut class id jest czymś w rodzaju identyfikatora elementów. Nazwa atrybutu id musi być jednoznaczna. W dokumencie może istnieć tylko jeden element o danym id: <p id="wstep"> Do tego akapitu zostaną zastosowane ustawienia stylu zdefiniowane w definicji id o nazwie wstep. Atrybut id można zdefiniować na dwa sposoby: tak, by styl stosowany był do dowolnego elementu o określonym id lub tak, by styl był stosowany do określonego elementu o danym id. Ta definicja stanowi, że styl zostanie zastosowany do każdego elementu oznaczonego identyfikatorem wstep: #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } A oto drugi przypadek. Tutaj styl będzie zastosowany tylko do elementu p o id= wstep : p#wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } Zwróć uwagę, że w obu przypadkach ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #, o tak: #nazwa_id.

6 Komentarze CSS Definicje stylu nie zawsze są proste, a nawet jeśli są, nie zawsze pamiętamy dlaczego wybraliśmy takie, a nie inne właściwości. Aby zabezpieczyć się przed skutkami niepamięci wstecznej, stosuj komentarze. Będą bardzo przydatne przy przyszłej edycji arkusza stylów. Jaką postać ma komentarz CSS? Komentarz CSS rozpoczyna się od znaku prawego ukośnika, nim pojawia się gwiazdka, potem tekst komentarza i wreszcie zamknięcie komentarza gwiazdką i ukośnikiem. Oto przykład: /* To jest komentarz CSS */ p { text-align: right; /* To też jest komentarz CSS */ color: green; font-family: arial } Styl wpisany Informacje ogólne na temat arkuszy stylów sprawdzimy teraz w praktyce. Zaczniemy od zdefiniowania stylu wpisanego. Co to jest styl wpisany? Styl wpisany jest wprowadzany w wybranym znaczniku i nie ma wpływu na pozostałe znaczniki. Jeśli chcesz na przykład zastosować kursywę do zawartości znacznika <h1>, odpowiednią informację musisz umieścić w tym właśnie znaczniku. Ogólna postać definicji stylu wpisanego jest taka: <znacznik style= definicja > Oto przykład: <h1 style="font-size: 20pt; font-weight: bold; font-family: Arial, sansserif">treść tytułu</h1> Styl wpisany powinien być stosowany tylko wtedy, gdy konieczne jest zastosowanie specyficznego stylu do pojedynczego wystąpienia danego elementu, z reguły tylko tam, gdzie niezbędne są drobne korekty stylu. Nie spełnia on bowiem zasadniczego celu kaskadowego arkusza stylów, a więc globalnej kontroli stylu całej strony. Jak zdefiniować w dokumencie html styl wpisany? Aby lepiej zrozumieć o co tu chodzi, sformułujmy razem taką lokalną definicję stylu.

7 Otwórz w edytorze kod źródłowy szkieletu strony mojastrona.html lub wpisz go ręcznie. Między znacznikami <body> </body> wstaw parę akapitów tekstu. Zdefiniuj w wybranych akapitach inny rozmiar czcionki użyj do tego celu właściwości font-size (w końcowej części rozdziału znajdziesz wyjaśnienia wykorzystywanych tu właściwości patrz tabele 4.1 i 4.2). Możesz skorzystać z pomocy wydruku 4.1. Zapisz plik pod nazwą wpisany.html i otwórz stronę w oknie przeglądarki (patrz rysunek 4.1). Wydruk 4.1. Styl wpisany <html> <head> <title>styl wpisany</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <p style="font-size: 16pt" id="p16"> Styl zastosowany w obrębie znacznika p. <p>w tym akapicie nie zastosowano stylu. <p style="font-size: 25pt" id="p25"> Styl zastosowano w obrębie znacznika p. <p> Zawartość tego znacznika p nie jest formatowana. </body> </html>

8 Rys Wpisany arkusz stylów oddziałuje tylko na znacznik, w którym umieszczono definicję stylu Wpisany arkusz stylów oddziałuje tylko na te akapity, w znacznikach których umieszczona została definicja stylu. Pozostałe akapity zachowują domyślne formatowanie. Osadzony arkusz stylów Co to jest osadzony arkusz stylów i jaką ma postać? Osadzony arkusz stylów to definicja stylu umieszczona między znacznikami <style></style>. Element ten powinien znaleźć się w nagłówku dokumentu. Konfiguruje on atrybuty stylu dla całej strony. Oto przykład: <head> <style type="text/css"> <--! hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/kot.gif")} --> </style> </head> Przeglądarka przeczyta te definicje stylów i sformatuje dokument zgodnie z nimi. Zwróć uwagę, że atrybut type znacznika <style> ma wartość text/css jest to dla przeglądarki informacja, że następne

9 instrukcje to arkusz stylów. Instrukcje te zawarte są w znaczniku komentarza jest to zabezpieczenie na wypadek, gdyby strona trafiła do przeglądarki starego typu, która nie potrafi obsłużyć arkuszy stylów. Wówczas instrukcje formatowania zostaną zignorowane, a nie wyświetlone na ekranie jako tekst. Globalne formatowanie oznacza, że styl zostanie zastosowany do wszystkich instancji elementu, dla którego został zdefiniowany. Wyjątki od reguły? Tak, już o nich wspominaliśmy przy okazji omawiania klas i atrybutów id. W dalszej części rozdziału zobaczysz, jak w praktyce rozwiązać taki problem. Jak zdefiniować osadzony arkusz stylów? Aby utworzyć i przetestować osadzony arkusz stylów, otwórz edytor HTML i wpisz podstawowe znaczniki definiujące szkielet strony: <html>, <head> i <body>. Wstaw znaczniki <style> i </style> definicje stylów są umieszczane właśnie między nimi. Dodatkowe informacje na temat zasad tworzenia definicji stylów znajdziesz we wstępie do tego rozdziału. Możesz też skorzystać z definicji zawartych na wydruku 4.2. Wydruk 4.2. Osadzony arkusz stylów <html> <head> <title>osadzony arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css">  </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

10 <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </body> </html> Zapisz plik pod nazwą osadzony.html i wyświetl dokument html w przeglądarce (patrz rysunek 4.2). Rys Osadzony arkusz stylów określa style na całej stronie Skąd się wzięła taka postać strony? Jak już wspomniałam, osadzony arkusz stylów definiuje style dla całego dokumentu. Definicja stylu z wydruku 4.2: <style type="text/css">

11 </style> definiuje domyślny wygląd całej sekcji body, lecz narzuca specyficzne ustawienia dla wszystkich nagłówków h2 (w przeciwnym razie do nagłówków zastosowane zostałyby także ustawienia sekcji body wynika to z zasady dziedziczenia ustawień stylu przez elementy podrzędne) i dodatkowe dla wszystkich akapitów p. Odnośnie sekcji body stanowi ona, że: Tło strony będzie koloru niebieskiego decyduje o tym wartość właściwości background: #0000FF. Symbol, #0000FF, to kod koloru. Zamiast niego możesz użyć nazwy koloru, blue. Kody kolorów znajdziesz w dodatku D. Tekst dokumentu (akapitów i nagłówków) będzie koloru żółtego. Określa to para: color: #FFFF00 (wynika stąd, że nagłówki h2 powinny być pisane czcionką żółtą, lecz my chcemy czerwoną na białym tle i dlatego musimy przygotować specjalną definicję stylu dla h2). Z obu stron pojawią się marginesy o szerokości 2 cm: margin-left: 2cm; marginright: 2cm. Jeśli chodzi o nagłówki h2, definicja stylu określa, że: Czcionka ma mieć rozmiar 20 (bo font-size: 20pt). Tekst ma pojawiać się na białym tle i ma być koloru czerwonego: color: #FF0000; background: #FFFFFF. Do akapitów z kolei zastosowane zostaną domyślne ustawienia zawarte w definicji stylów sekcji body, a więc marginesy i kolor tekstu. Dodatkowo jednak: Narzucony zostanie rozmiar czcionki font-size: 14pt. oraz wcięcie pierwszego wiersza: text-indent: 4cm. Jak widzisz, pomimo tajemniczego wyglądu, osadzony arkusz stylów nie jest wcale tak tajemniczy. Wyjaśnienia dotyczące stosowania właściwości odnoszących się do czcionki i tekstu znajdziesz w tabelach 4.1 i 4.2. W jaki sposób do jednej instancji elementu zastosować inny styl? Powiedzmy więc, że chcesz, aby jeden z akapitów tekstu miał zupełnie inne formatowanie niż pozostałe. Realizacja tego jest prosta, jeśli skorzystamy z atrybutu id (patrz informacje wstępne do tego rozdziału). Na wydruku 4.3 przedstawiony został kod źródłowy dokumentu z wydruku 4.2, w którym jednemu z akapitów zmieniono styl. Akapitowi przypisano identyfikator id= wyjatek, a styl #wyjatek dołączono do listy definicji stylów w elemencie style. Zgodnie z definicją, tekst pojawi się na białym tle i będzie koloru czerwonego. Pozostałe ustawienia stylu akapitu zostaną zachowane. Wygląd strony pokazany został na rysunku 4.3. Wydruk 4.3. Osadzony arkusz stylów, w którym wykorzystano atrybut id <html>

12 <head> <title>osadzony arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css">  </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p id="wyjatek">ten akapit pojawi się na białym tle, a czcionka będzie koloru czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną zachowane. <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </body> </html>

13 Rys Osadzony arkusz stylów określa style na całej stronie, lecz można spod jego działania wyłączyć określone instancje elementu Jak zastosować w dokumencie klasy? Czas już, aby przyjrzeć się klasom od strony praktycznej (wstępne informacje na temat klas znajdziesz na początku tego rozdziału). Sformułujmy najpierw problem: chcemy, aby akapity tekstu były wyrównywane naprzemiennie raz do prawego, a raz do lewego marginesu. Zgodnie z tym, co już wiemy o klasach, musimy zdefiniować dwie klasy nazwiemy je prawa i lewa a ich definicje wstawić do elementu style. Otwórz więc plik osadzony.html w edytorze tekstu i dodaj w nim jeszcze kilka akapitów tekstu, aby efekt dywersyfikacji wyrównania akapitów po zastosowaniu klas stał się lepiej widoczny. Zdefiniujmy nasze klasy skorzystamy w nich z właściwości text-align, która umożliwia określenie sposobu wyrównania tekstu:.lewa {text-align: left}.prawa {text-align: right} Umieśćmy klasy tam, gdzie ich miejsce w sekcji head, między znacznikami <style></style>. Pozostaje jedynie oznaczyć elementy strony, do których zastosujemy klasy stylu w znacznikach <p> trzeba dodać atrybut class i przypisać mu odpowiednie wartości: prawa lub lewa. Szczegóły tej operacji znajdziesz na wydruku 4.4. Wydruk 4.4. Osadzony arkusz stylów i klasy <html>

14 <head> <title>osadzony arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css">  </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p class="lewa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p class="left"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

15 <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. </body> </html> Efekty możesz podziwiać na rysunku 4.4. Rys Klasy pozwalają modyfikować właściwości arkusza stylów Zwróć uwagę, że w definicjach klas nie użyliśmy nazwy elementu postać definicji to.lewa {textalign: left} i.prawa {text-align: right}, a nie p.lewa {text-align: left} i p.prawa {text-align: right}. Ta druga forma jest także prawidłowa, lecz mniej ogólna dotyczyłaby tylko elementów p. Ogólna postać pozwala nam skorzystać z klas także w przypadku stosowania wyrównania do innych elementów, na przykład do nagłówków.

16 Zewnętrzny arkusz stylów Kiedy stosowany jest zewnętrzny arkusz stylów? Zewnętrzny (lub inaczej: łączony) arkusz stylów to doskonałe rozwiązanie dla witryn, czyli układów wielu stron. Wówczas te same style mogą być stosowane do wszystkich stron witryny. Jeśli przyjdzie Ci ochota zmienić wygląd swojej witryny, wprowadzisz zmiany tylko w pliku arkuszy stylów, a zmiany zostaną automatycznie uwzględnione na wszystkich stronach. Zewnętrzny arkusz stylów rezyduje zgodnie z nazwą poza dokumentem html, w zewnętrznym pliku o rozszerzeniu nazwy.css. Jak wygląda zewnętrzny arkusz stylów? W kodzie każdej ze stron korzystających z zewnętrznych arkuszy stylów musi zostać zdefiniowane połączenie do pliku zewnętrznego, który je zawiera. Połączenie to definiuje się za pomocą znacznika <link>, który umieszczany jest w sekcji head dokumentu: <head> <link rel="stylesheet" type="text/css" href="mojestyle.css"> </head> Definicje stylów rezydują w pliku mojestyle.css nazwa pliku może być dowolna, ale musi mieć rozszerzenie.css. Przeglądarka odczyta plik i sformatuje dokument zgodnie z zawartymi w nim instrukcjami. W znaczniku <link> musi znaleźć się atrybut rel o wartości stylesheet. Dzięki temu przeglądarka będzie wiedziała, że atrybut href podaje jej adres URL pliku, który zawiera arkusz stylów. Jak przygotować plik.css? Plik.css można utworzyć w dowolnym edytorze. Plik nie powinien zawierać znaczników HTML. Oto przykład zawartości: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/obraz.gif")} Jak w praktyce zastosować zewnętrzny arkusz stylów? Przećwiczmy stosowanie zewnętrznego arkusza stylów na przykładzie dokumentu z wydruku 4.4. W dokumencie tym stosowany jest osadzony arkusz stylów. Wyrzucimy z kodu źródłowego strony element style, w którym znajdują się definicje stylów, i zastąpimy go znacznikiem <link> z odpowiednimi atrybutami. Najpierw jednak przygotujmy plik zawierający arkusz stylów. Otwórz edytor i wyświetl w nim kod dokumentu z wydruku 4.4. Wytnij z niego definicje stylów i wklej wycięty fragment kodu do nowego okna. Jego zawartość powinna być taka jak na wydruku 4.5. Zapisz plik na przykład pod nazwą zewnetrzny.css (bez polskich liter i z rozszerzeniem.css).

17 Wydruk 4.5. Zewnętrzny arkusz stylów body {background: #0000FF; color:#ffff00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm}.lewa {text-align: left}.prawa {text-align: right} Wróć do dokumentu HTML, w którym chcesz zastosować plik zewnętrzny. W obrębie znaczników <head></head>, poniżej znacznika <title> (przy okazji zmień też tytuł strony) wprowadź następujący wiersz kodu: <link rel=stylesheet href= zewnetrzny.css type= text/css > Znacznik <link> wskazuje plik zawierający zewnętrzny arkusz stylów. Oczywiście nazwa pliku będzie taka, jaką zadeklarowałeś zapisując zewnętrzny arkusz stylów. Atrybut href podaje adres URL, pod którym plik rezyduje. Musisz więc pamiętać o poprawnym zdefiniowaniu połączenia do pliku zewnętrznego (patrz rozdział6., Połączenia). Kompletny nagłówek wygląda teraz tak: <head> <title>zewnętrzny arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <link rel=stylesheet href="zewnetrzny.css" type="text/css"> </head> Zapisz plik i wyświetl go w przeglądarce. Prezentuje się identycznie jak plik korzystający z arkusza osadzonego nic dziwnego, w końcu zewnętrzny arkusz stylów zawiera zestaw tych samych definicji tylko tytuł na pasku tytułu uświadamia nam, że to nie ta sama strona (patrz rysunek 4.5).

18 Rys Na stronie korzystającej z zewnętrznego arkusza stylów umieszczane jest odwołanie do pliku zawierającego definicje stylów; przedłużenie nazwy tego pliku to.css Rozciąganie stylu Rozciąganie stylu polega na objęciu stylem pewnej sekcji dokumentu HTML. Służy do tego para znaczników <span> </span>. Co umożliwia element span? Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu na przykład tekst i listy. Ogólna postać definicji stylu wykorzystującej element span jest następująca: <span style= definicja_stylu > </span> W jaki sposób zastosować element span w kodzie HTML? Powiedzmy, że w dokumencie z wydruku 4.4 chcesz w drugim z nagłówków wyraz formatowanie napisać wielkimi literami w kolorze niebieskim, a cały wyraz podkreślić. Co robimy? Obejmujemy znacznikami <span> </span> żądany wyraz (lub frazę) w naszym przypadku wyraz znajduje się w obrębie nagłówka h2, i umieszczamy w znaczniku otwierającym <span> atrybut style, któremu przypisujemy odpowiednie właściwości. Rzuć okiem na wydruk 4.6. Skuteczność metody prezentuje rysunek 4.6.

19 Wydruk 4.6. Wykorzystanie elementu span <h2>ten nagłówek ma takie samo <span style="font-variant: small-caps; color:blue; text-decoration: underline">formatowanie</span> jak poprzedni</h2> Rys Element span pozwolił na wyróżnienie jednego wyrazu w drugim z nagłówków formatowanym za pomocą arkuszy stylów Czy zmieniając formatowanie przy użycie elementu span można korzystać z klas? Stosowanie klas z elementem span jest oczywiście możliwe. Powiedzmy, że chcesz na swojej stronie WWW pierwszy wyraz wszystkich akapitów pisać czcionką o innym rozmiarze i w innym kolorze niż pozostały tekst. Otwórz w edytorze plik z wydruku 4.4 (lub otwórz plik zawierający arkusze stylów) i dodaj w sekcji head jeszcze jedną definicję klasy. Nazwijmy ją kolorowa:.kolorowa {font-size: 24pt; color: #FFFFFF} Definiuje ona czcionkę o rozmiarze 24 pt w kolorze białym. Trzeba teraz objąć znacznikami <span> </span> pierwsze wyrazy wszystkich akapitów i wstawić w znacznikach otwierających atrybut class przypisując mu jako wartość nazwę utworzonej klasy. Przeanalizuj pełny kod dokumentu na wydruku 4.7. Aktualny wygląd strony prezentuje rysunek 4.7. Wydruk 4.7. Wykorzystanie elementu span <html>

20 <head> <title>osadzony arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css">  </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p class="lewa"> <span class="kolorowa">tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. <p class="prawa"> <span class="kolorowa">tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p class="left"> <span class="kolorowa">tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

21 <p class="prawa"> <span class="kolorowa">tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. </body> </html> Rys Element span pozwolił na wyróżnienie pierwszego wyrazu każdego akapitu skorzystaliśmy tu z klasy, aby nie powtarzać wielokrotnie definicji stylu Wydzielone bloki Istnieje jeszcze jedna metoda pozwalająca na nadawanie blokom dokumentu innego stylu. Na sposób ten warto zwrócić szczególną uwagę, gdyż jest on często wykorzystywany w dokumentach dynamicznych (a więc tworzonych przy wykorzystaniu języka DHTML). Bloki wydzielamy za pomocą pary znaczników <div> </div>. Fragment dokumentu objęty nimi można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej poprzednio, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki,

22 akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów. Jaki efekt daje stosowanie elementu div? Zazwyczaj przeglądarki wprowadzają łamanie wiersza przed i za fragmentem objętym znacznikami <div> </div>. Sprawdź to, wydzielając w dokumencie fragment tekstu (patrz wydruk 4.8 fragment wydzielony za pomocą elementu div został oznaczony czcionką pogrubioną). Efekt działania elementu div pokazuje rysunek 4.8. Wydruk 4.8. Wykorzystanie elementu div <html> <head> <title>element div</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css">  </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p class="lewa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. Tekst jest

23 żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.<div style="font-size:11pt; color: #000000"> Fragment dokumentu objęty znacznikami div można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej w przypadku elementu span, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.</div> <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p class="left"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. </body> </html>

24 Rys Element div umożliwia wydzielenie fragmentów dokumentu i narzucenie im innego formatowania Przykłady stylów CSS dla tła strony WWW W tej części rozdziału znajdziesz proste recepty zaspokajające podstawowe potrzeby odnośnie arkuszy stylów CSS. Na ich podstawie będziesz mógł tworzyć własne definicje. Jak zdefiniować kolor tła elementu? Ten przykład nauczy Cię określać dla danego elementu inne tło niż tło całej strony możesz na przykład zmienić tło dla obszaru tekstu lub nagłówka. Wydruk 4.9 pokazuje jak zróżnicować tło strony i elementu, a na rysunku 4.9 zobaczysz jakie to daje efekty. Wydruk 4.9. Tło strony i elementu <html> <head> <title>kolor tła elementu</title> <meta http-equiv="content-type" content="text/html; charset=iso ">

25 <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p.magenta {font-size: 16pt; background-color: rgb(250,0,255)} </style> </head> <body> <h1>nagłówek na zielonym tle</h1> <h2>nagłówek na transparentnym tle</h2> <p class="magenta">tekst tego akapitu umieszczono na tle w kolorze fioletowym! Zwiększono rozmiar czcionki do 16. Wszystko to dzięki klasie o nazwie magenta. <p>ten akapit ma żółte tło, bo tak stanowi styl elementu body. </body> </html>

26 Rys Inne tło strony i elementów Oto znaczenie poszczególnych definicji stylów: body {background-color: yellow} tło sekcji body będzie żółte. h1 {background-color: #00ff00} nagłówki h1 mają być umieszczane na tle w kolorze zielonym. h2 {background-color: transparent} wszystkie nagłówki h2 mają tło transparentne (to daje na przykład możliwość umieszczania tekstu na tle obrazu). p.magenta {font-size: 16pt; background-color: rgb(250,0,255)} utworzono klasę o nazwie magenta, która umożliwia zmianę tła wybranych akapitów na kolor magenta. Dodatkowo zwiększono rozmiar czcionki. Jak zdefiniować obraz jako tło? Na wydruku 4.10 znajdziesz definicję stylu CSS, dzięki której będziesz mógł jako tło strony zastosować obraz. Rysunek 4.10 pokazuje efekt. Wydruk Obraz jako tło strony <html> <head> <title>obraz jako tło strony</title>

27 <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/obraz.jpg") } </style> </head> <body> <p>tu umieszczasz resztę zawartości swojej strony! </body> </html> Rys Obraz jako tło strony możesz na nim umieszczać tekst i inne elementy strony Oto znaczenie definicji stylów:

28 {background-image: url("images/obraz.jpg")} adres URL określa ulokowanie obrazu stanowiącego tło strony. W tym przypadku umieszczono go w folderze images (nazwa jest oczywiście dowolna) utworzonym w folderze przechowującym plik strony WWW. Jak zbudować tło strony z powtórzeń obrazu? Oto definicja, która pozwala zbudować tło z mniejszych obrazów powtórzonych w pionie (patrz wydruk 4.11). Rysunek 4.11 prezentuje ten ciekawy efekt. Wydruk Budowanie tła z powtórzeń obrazu <html> <head> <title>budowanie tła z powtórzeń obrazu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: repeat-y } </head> <body> </body> </html>

29 Rys Tło zostało zbudowane z powtórzeń w pionie niewielkiego obrazu Oto znaczenie definicji stylów: {background-image: url("images/kot.gif"); background-repeat: repeaty} adres URL określa ulokowanie obrazu, który zostanie powtórzony w kolumnie z lewej przy lewej krawędzi strony. Powtórzenia definiuje właściwość background-repeat: repeat-y. Gdybyś chciał umieścić pasek tła w poziomie, użyj właściwości backgroundrepeat: repeat-x. background-repeat: repeat spowoduje pokrycie całej powierzchni powtórzeniami. Jak umiejscowić na stronie obraz stanowiący tło? Czasami obraz stanowiący tło strony wcale nie pokrywa jej całkowicie. Najczęściej wynika to z układu strony i daje całkiem interesujące rezultaty. Tak więc, nawet niewielki obraz można zastosować jako tło. Postać definicji stylów znajdziesz na wydruku 4.12, a na rysunku 4.12 zobaczysz jak to wygląda w praktyce. Wydruk Umiejscawianie obrazu-tła na stronie <html> <head> <title>mały obraz w centrum strony</title>

30 <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: no-repeat; background-position: center center } </style> </head> <body> <p> <b>uwaga:</b> Netscape 4 nie obsługuje właściwości "background-position". </body> </html>

31 Rys Tło zostało zbudowane z powtórzeń w pionie niewielkiego obrazu Oto znaczenie definicji stylów: {background-image: url("images/kot.gif"); background-repeat: norepeat; background-position: center center} w tej definicji użyto właściwości: o o background-repeat: no-repeat wartość no-repeat określa, że obraz stosowany jako tło strony nie będzie powtarzany. background-position: center center dzięki takiemu ustawieniu tej właściwości obraz znalazł się w centralnym punkcie strony. Gdybym chciała umieścić go, powiedzmy, w połowie lewej krawędzi, użyłabym wyrażenia backgroundposition: center left (inne możliwości to top left, top center, top right, center right, bottom left, bottom center, bottom right). Wyspecyfikowanie tylko jednego słowa kluczowego spowoduje, że jako drugie domyślnie zostanie przyjęte słowo center. A jeśli konieczne byłoby ulokowanie obrazu-tła gdzieś w innym, określonym miejscu strony, skorzystałabym z takiej definicji: background-position: 20% 80% lub bacground-position: 0px,0px. Te tajemnicze pary wartości center, left, 20% czy 80% to po prostu współrzędne określające ulokowanie obrazu-tła w poziomie i pionie. Lewy górny narożnik ma współrzędne 0%,0% lub 0px,0px. Jednostki można mieszać.

32 Atrybuty stylu odnoszące się do tekstu Style CSS definiujące krój, kolor, rozmiar i styl czcionki są bardzo często stosowane. Zmiana koloru tła zazwyczaj wymaga dostosowania koloru tekstu, aby był on czytelny. Konieczność zdefiniowania parametrów tekstu wynika także z potrzeby zabezpieczenia się na wypadek braku u użytkownika takich czcionek, jakie zaplanowałeś na swojej stronie WWW. No i oczywiście powód najważniejszy przecież jednym z podstawowych zamiarów twórcy dokumentu html jest nadanie mu atrakcyjnej postaci, a ma na to wpływ także wygląd i układ tekstu. Co należy wiedzieć o czcionce, aby napisać definicję jej stylu? Czcionki to znaki, które można wyświetlić na ekranie lub wydrukować. Mogą mieć krój na pewno słyszałeś takie nazwy jak, np. Arial, Times New Roman czy Helvetica; to są właśnie różne kroje pisma, mają specyficzne wykończenia nazywa je się wówczas czcionkami szeryfowymi lub są tych wykończeń pozbawione, jak czcionki bezszeryfowe. Cechy czcionki to także jej rozmiar jest to wysokość podawana w punktach (gdzie jeden punkt to około 1/29 centymetra) i styl (kursywa, pogrubiona, podkreślona). Tekst charakteryzują też odstępy pomiędzy znakami. Czcionki szeryfowe (serif) to czcionki z wykończeniami liter i cyfr. Dodatkowe elementy zaokrąglające i wykańczające pełnią nie tylko funkcję dekoracyjną, ale też ułatwiają czytanie. Stąd też czcionki szeryfowe najczęściej stosuje się do tekstu podstawowego, a rzadziej do tytułów. Przykładem takiej czcionki jest Times New Roman. Czcionki bezszeryfowe (sans serif) pozbawione są dodatkowych ornamentów, a stosuje je się zazwyczaj do nagłówków i małych bloków tekstu. Przykładem czcionki bezszeryfowej jest Arial. Jak zdefiniować arkusz stylów formatujący tekst? Proces definiowania arkusza stylów wymaga więc w przypadku tekstu określenia poszczególnych cech pisma. Zacząć należy od kwestii najważniejszej od wskazania rodziny czcionek (arkusze stylów rozpoznają następujące rodziny czcionek: serif, sans serif, cursive, fantasy i monospace) i podania nazwy czcionki lub ciągu nazw alternatywnych (z przecinkami) wówczas w przypadku braku czcionki podstawowej, zastosowana zostanie pierwsza alternatywna, a gdy tej także nie będzie, kolejna alternatywna, itd. Jeśli nazwa czcionki składa się z kilku wyrazów, np. Goudy Old Style, w definicji stylu powinna być podana w cudzysłowach: font-family: times, goudy old style. W dalszej kolejności definiowane są kolejne atrybuty. Oddzielasz je średnikami. Czy sposób podawania atrybutów jest ważny? Kolejność atrybutów jest istotna. Atrybuty grubości czcionki font-weight, i stylu font-style, muszą pojawić się przed innymi atrybutami czcionki, a rozmiar czcionki font-size, poprzedza odstępy. Wartości atrybutów nie oddziela się przecinkami jedyny wyjątek to rodziny czcionek. Wydruk 4.13 prezentuje osadzony arkusz stylów dla h1 i h2, w których zdefiniowano krój czcionek (font-family), styl (font-style) oraz rozmiar (font-size). Wydruk Formatowanie tekstu <style> <!--

33 h1 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; font-size: 20pt} h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; font-size: 14pt} --> </style> Jak zachować porządek w definicjach stylów CSS? W definicjach stylu powinien być porządek. Nie wynika to wcale ze względów estetycznych, lecz z praktycznych. Organizacja stylów pozwoli zredukować liczbę definicji, a co najważniejsze, ułatwi wprowadzanie ewentualnych modyfikacji stylów. O potrzebie grupowania elementów, do których stosowane będą te same właściwości, już była mowa. Teraz czas na konkretny przykład. Przyglądając się sekcji <style> z przykładu pokazanego na wydruku 4.13 zauważysz, że dla nagłówków h1 i h2 większość atrybutów jest identyczna. Różnica dotyczy jedynie wielkości czcionki. Zapiszmy więc naszą obserwację w postaci kodu. Wydzielmy to, co różni sposób formatowania elementów h1 i h2, a cechy identyczne przedstawmy w jednej definicji wspólnej dla obu (patrz wydruk 4.14). Pomimo zmiany postaci sekcji style jest ona teraz znacznie prostsza w odbiorze, wygląd tekstu pozostanie taki sam (patrz rysunek 4.13). Wydruk Grupowanie stylów identyczne atrybuty stylu przyporządkowano różnym elementom. <style>  </style> Rys Po uporządkowaniu definicji stylów efekt wizualny jest taki sam, a kod dokumentu znacznie się uprościł

34 Nie tylko elementy można grupować, lecz także atrybuty. Na przykład długą definicję body: body {font-family: arial, sans-serif; font-style: normal; font-size: 12pt; lineheight: 14pt; font-weight: bold} można zapisać w następujący sposób: body {font: bold 12/14pt arial, sans-serif} Jakie są najczęściej stosowane atrybuty tekstu? Listę najczęściej stosowanych atrybutów tekstu prezentuje tabela 4.1. Tabela 4.1. Podstawowe atrybuty umożliwiające zdefiniowanie stylu tekstu. Atrybut Przykład definicji color: h1 {color: #00ff00} tutaj kod koloru podany jest w zapisie kontroluje kolor szesnastkowym. Ostateczna postać kodu koloru w HTML-u to trzy liczby czcionki. szesnastkowe połączone razem i poprzedzone znakiem #. font-family: kontroluje krój czcionki. h2 {color: red} jeśli korzystasz ze standardowych kolorów, możesz posługiwać się ich nazwami, np. red, blue, white czy green, zamiast kodami heksadecymalnymi. p {color: rgb(0,0,255)} każdemu kolorowi można przyporządkować kod RGB w postaci trzech liczb z przedziału Liczby określają natężenie barw podstawowych: czerwonej, zielonej i niebieskiej. W tym zapisie kod odpowiada kolorowi czarnemu, a białemu, kolor żółty to , a niebieski RGB daje do dyspozycji 16,7 milionów kolorów (24 bity). {font-family: times} podano nazwę czcionki Times, {font-family: times, arial} w tym przypadku podana została nazwa czcionki wraz z nazwą czcionki alternatywnej, {font-family: serif} tu wskazano rodzinę czcionek, dzięki czemu przeglądarka zastosuje czcionkę, której przynajmniej podstawowe atrybutu odpowiadają Twojemu wyborowi.

35 font-size: - rozmiar czcionki. font-style: - określa styl tekstu. font-weight: - określa grubość czcionki. textdecoration: - umożliwia określenie efektów dodatkowych. line-height: - definiuje wysokość wiersza. {font-size: 12pt} w tej definicji rozmiar podany jest w punktach drukarskich. Jest to standard najczęściej stosowany. Rozmiar można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {font-style: italic} definiuje tekst pisany kursywą. {font-style: normal} przywraca ustawienia domyślne. {font-style: oblique} wprowadza pochylenie odmiany prostej danej czcionki. {font-weight; bold} definiuje czcionkę pogrubioną (do dyspozycji masz tu jeszcze atrybuty takie jak: extra-light, demi-light, medium, extra-bold oraz demi-bold). {text-decoration: none} brak efektów. {text-decoration: underline} podkreślenie. {text-decoration: italic} kursywa. {text-decoration: line-through} przekreślenie. p {line-height: 12pt} Odstępy między wierszami w akapicie można podawać w punktach, pikselach, calach, centymetrach i w procentach, podobnie jak wielkość czcionki. Jak definiować marginesy, wcięcia i wyrównanie tekstu? Oto kolejna porcja atrybutów grupa zgromadzona w tabeli 4.2 służy do określenia marginesów, sposobów wyrównania oraz wcięć. Tabela 4.2. Atrybuty formatowania akapitu. Atrybut Przykład definicji margin-left określa szerokość lewego marginesu. margin-right określa szerokość prawego marginesu margin-top ustawienie marginesu górnego. text-indent ustawienie wcięcia. Jednostki takie jak dla marginesów. text-align {margin-left: 2cm} margines wynosi 2 cm. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {margin-right: 2in} tu ustawiono margines równy 2 cale. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {margin-top: 20pt} margines górny wynosi 20 punktów. Jednostki są takie same jak w przypadku marginesów bocznych. {text-indent: 0.5in} wcięcie o głębokości 0.5 cala. Internet Explorer dopuszcza wcięcia ujemne wysunięcia. {text-align: right} tekst zostanie wyrównany do prawego marginesu.

36 opcja wyrównania tekstu. Atrybut może przyjmować wartości: left (do lewej), center (wyśrodkowanie), right (do prawej) i justify (do obu marginesów). Atrybuty z tabeli 4.2 pozwalają kontrolować marginesy, wcięcia i wyrównanie tekstu decydują więc o wyglądzie akapitu. Jak w praktyce zastosować wszystkie zdobyte informacje o stylach CSS? Aby sprawdzić w praktyce zdobytą wiedzę, zacznij od przygotowania dokumentu pozbawionego formatowania. Zobaczymy jak wygląda w przeglądarce i zastanowimy się nad sposobami sformatowania go przy użyciu arkuszy stylów CSS. Otwórz w edytorze dokument mojastrona.html jak pamiętasz, zawiera on podstawowy kod dokumentu html i dodaj w nim nagłówki oraz akapity tekstu, tak jak na wydruku Zapisz plik, na przykład pod nazwą nostyle.html, i wyświetl go w przeglądarce (patrz rysunek 4.14). Wydruk Dokument html, w którym nie są stosowane arkusze stylów <html> <head> <title>tu nie stosujemy arkuszy stylów!</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <h1>windows XP!</h1> <h2>co będzie dalej?</h2> <p>już w tym roku czeka nas rewolucja w licencjonowaniu oprogramowania, zapowiadana przez firmę Microsoft w związku z premierami jednych z najważniejszych produktów przez nią sprzedawanych - systemu operacyjnego <A href="windows_xp.html" title="system Windows XXI wieku."> Windows XP</A> oraz pakietu biurowego <A href="office_xp.html" title="nowy pakiet Office.">Office XP</A>. <p>pomysłem Billa Gatesa na ukrócenie piractwa i zmniejszenie strat firmy jest obowiązkowa telefoniczna rejestracja produktu przy każdej jego instalacji. Pomyślmy teraz, jak zareaguje rynek na taką sytuację. Czy nagle półki sklepów zostaną ogołocone z pudełek z programami ze znakiem Microsoft? </body> </html>

37 Rys W tym dokumencie nie są stosowane style CSS Zawartość dokumentu z rysunku 4.14 jest czytelna, aczkolwiek wygląda nieatrakcyjnie. Zajmijmy się więc jej sformatowaniem. Wykorzystamy tu podstawowe informacje odnośnie formatowania czcionki, akapitu i tła dokumentu html. Powróćmy do pliku nostyle.html (patrz wydruk 4.15) i zdefiniujmy w nim osadzony arkusz stylów, który będzie formatował tło i marginesy strony, nagłówki tekstu oraz sam tekst. Wstaw więc w sekcji head element style ujęty w znacznikach komentarza html i wprowadź odpowiednie definicje formatowania wymienionych elementów strony. Pamiętaj, że na ekranie lepiej prezentuje się strona WWW, w której jest dużo wolnej przestrzeni, marginesy nie powinny więc być symboliczne. Oto przykładowa definicja stylów dla sekcji body: body {background-color: yellow; margin-left: 3cm; margin-right:3cm; margin-top: 1cm}. Wprowadza ona kolor tła jeśli chciałbyś, by tło było inne, wróć do serii przykładów definiowania tła strony z wcześniejszej części rozdziału, oraz marginesy w tabeli 4.2 znajdziesz wyjaśnienia stosowanych atrybutów oraz inne sposoby formatowania akapitu. W kolejnym kroku zajmiemy się nagłówkami. Pogrupujemy elementy, do których zastosowane zostanie to samo formatowanie: h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal} oraz dodamy definicje specyfikujące właściwości o różnych wartościach: h1 {font-size: 20pt; text-align: left} h2 {font-size: 14pt; text-align: right}

38 Następny etap to styl akapitu. Określimy krój czcionki, jej styl i rozmiar oraz wysokość wiersza inne właściwości znajdziesz w tabeli 4.1: p {font-family: goudy, times, serif; font-style: normal; font-size: 12pt; lineheight: 16pt} Aby zastosować do akapitów różne sposoby wyrównania, możesz skorzystać z klas zajmowaliśmy się już takim rozwiązaniem tej kwestii lub użyć w elemencie p stylu wpisanego: <p style="text-align: left"> Możesz także inaczej sformatować połączenia, na przykład pozbawiając je domyślnego podkreślenia, w zamian stosując czcionkę pogrubioną (już najwyższa pora, by zacząć mówić o połączeniach poświęcony jest im rozdział 6.): a {text-decoration: none; font-weight: bold} Wydruk 4.16 prezentuje kod html naszego dokumentu, w którym uwzględnione zostały wszystkie omawiane zmiany. Po sformatowaniu dokument prezentuje się zupełnie inaczej. Aby się o tym przekonać, zapisz go i obejrzyj w przeglądarce (patrz rysunek 4.15). Wydruk Dokument html, w którym sformatowano tekst i tło przy wykorzystaniu arkuszy stylów <html> <head> <title>style tekstu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style> <!-- body {background-color: yellow; margin-left: 3cm; margin-right:3cm; margin-top: 1cm} h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal} h1 {font-size: 20pt; text-align: left} h2 {font-size: 14pt; text-align: right} p {font-family: goudy, times, serif; font-style: normal; font-size: 12pt; lineheight: 16pt} a {text-decoration: none; font-weight: bold}

Pokazać jeszcze