# 13

## Eric Meyer o CSS w CSS

> Autoplagiat jest stylowy.

—Alfred Hitchcock

Często inspiracją do nowego projektu są rzeczy, które widzimy wokół siebie. Reklama, artykuł w gazecie albo okładka książki mogą stanowić zaczątek bardzo ciekawych pomysłów. Podczas pisania i projektowania tej książki wpadł mi do głowy pewien pomysł. A może by utworzyć taki projekt, który w jak najwierniejszy sposób odtwarzałby wygląd samej książki? Wykonanie takiego zadania wymagałoby znajomości różnych technik, a także całego wachlarza innych umiejętności i stanowiłoby idealny sposób na to, aby w jednym miejscu zebrać wszystko, co zostało dotychczas omówione w tej książce. Byłoby to niespotykane wyzwanie — w najlepszy możliwy sposób odtworzyć projekt, którego nie utworzyłem ja, lecz ktoś inny.

Gdy otrzymałem ostateczny projekt książki, wiedziałem, że muszę podjąć to wyzwanie. Dlatego też ten projekt będzie polegał na odtworzeniu układu graficznego książki, którą masz przed sobą i przełożeniu go na HTML oraz CSS. Zadanie to na pewno nie zostanie zrealizowane w stu procentach, a to, czego nie zrobimy (oraz powody, dla których tego nie zrobimy) będzie tak samo pouczające, jak wszystko to, co uda nam się osiągnąć.

### Cel projektu

Chcemy odtworzyć wygląd i układ graficzny książki, którą w tej chwili czytasz, a więc naszym głównym celem jest to, abyś, pracując nad tym projektem, miał wrażenie déjà vu. Na bardziej praktycznym poziomie cel jest dwojaki:

- wykorzystać CSS oraz HTML do tego, aby jak najdokładniej odzwierciedlić wygląd książki,
- zidentyfikować rzeczy, które nie mogą zostać dokładnie odtworzone oraz takie, które nie wyglądają w sieci Web tak samo jak na wydruku i utworzyć dla nich sensowne alternatywy.

Cele te są określone bardzo generalnie, ale w tym projekcie prawie każdy jego fragment będzie samodzielnym miniprojektem, dlatego trudno sprecyzować jakieś szczególne cele. Trzeba po prostu skoczyć do wody i zobaczyć, dokąd poniesie nas prąd rzeki — a więc, do roboty!

### Przygotowania

Instrukcje dotyczące pobierania plików z serwera znajdują się we wstępie do tej książki.

Z serwera FTP pobierz pliki wykorzystywane w projekcie 13. Jeśli masz zamiar poeksperymentować w domu, wczytaj plik `ch13proj.html` do dowolnego edytora. Plik ten będziesz edytował, zapisywał i wczytywał ponownie w miarę postępu prac nad projektem.

### Na początek

Przeglądając tę książkę na pewno zwrócisz uwagę na jeden fakt — każda strona to dwie kolumny, z których jedna zawiera zasadniczy tekst książki, natomiast druga znajduje się na jej boku i ma postać paska. Na wydruku pasek boczny zawsze znajduje się na zewnętrznej krawędzi strony, po stronie przeciwległej do grzbietu książki. Moglibyśmy sprawić, aby pasek boczny przeskakiwał z jednej krawędzi strony na drugą, ale byłoby to bardzo uciążliwe dla czytelnika. Dlatego umieścimy go na naszym projekcie z prawej strony.

Decydując się na takie rozwiązanie, musimy jednak znaleźć sposób na to, aby notatki i zrzuty rysunków umieścić w odpowiednich miejscach. Najprostszym wyborem może się wydawać po prostu określenie ich pozycji, ale jest w tym ukryte pewne niebezpieczeństwo — jeżeli na pasku bocznym umieścimy dwa elementy zbyt blisko siebie, prawdopodobnie będą one na siebie nachodzić, a my nie będziemy mieli żadnej możliwości, aby temu zapobiec. Jeżeli umieścimy je na pasku swobodnie, możemy skorzystać z właściwości clear, aby nie nachodziły na siebie. Jest to dla nas dużo lepsze rozwiązanie, choć niesie ze sobą kolejne problemy, o czym przekonamy się już wkrótce.

Ponadto musimy upewnić się, że treść, którą chcemy umieścić na stronie, ma odpowiednią strukturę, tak aby można było w niej zastosować odpowiednie style. Akapity powinny być zawarte w elemencie `p`, nagłówki podrozdziałów w elementach `h3` i `h4`, notatki umieszczone na pasku bocznym powinny być odpowiednio sklasyfikowane jako elementy `div` o poszczególnych atrybutach `class` i tak dalej. Nie będziemy się jednak nad tym teraz zastanawiać, ponieważ na każdy element przyjdzie kolej podczas naszej pracy nad projektem.

### Określenie stylów w dokumencie

Ponieważ naszym celem jest odtworzenie układu graficznego książki, możemy przyjąć ją za punkt odniesienia podczas pracy nad projektem. Do problemu możemy podejść na wiele sposobów; my zaczniemy od zdefiniowania fundamentalnej zasady określającej wygląd książki, czyli od podziału na dwie kolumny, w którym notatki i zrzuty obrazów znajdują się na pasku bocznym.

#### Pasek boczny

Wstawiając na stronie pasek boczny, musimy tylko upewnić się, czy istnieje ramka, która oddziela go od treści zasadniczej dokumentu oraz czy w rzeczywistości tworzą go notatki i zrzuty. Okazuje się, że ten problem wcale nie jest taki prosty, jak się wydaje.

Możemy umieścić całą treść zasadniczą w elemencie `div` , a następnie do elementów znajdujących się na pasku bocznym dodać ujemny prawy margines, który sprawi, że wszystkie elementy swobodne zostaną przeniesione do paska. W ten sposób będziemy mogli określić prawą ramkę dla treści zawartej w elemencie `div`, zapewniając jednocześnie, że wysokość ramki będzie równa wysokości samej treści. Elementy swobodne wraz z ujemnym marginesem mogą być umieszczone bezpośrednio obok ramki. Niestety, na przeszkodzie temu rozwiązaniu stoi sporo robaków, zagnieżdżonych w programie Internet Explorer 6 dla Windows. Są one tak szkodliwe, że prowadzą do prawie całkowitego rozpadu układu graficznego IE dla Windows, co więcej, podobnych skutków możemy się spodziewać w większości innych przeglądarek.

Możemy rozbić treść na wiele elementów `div`, których atrybut `class` ma wartości, takie jak `main` oraz `sidebar`. W ten sposób unikniemy robaków zagnieżdżonych w IE dla Windows, a jednocześnie ułatwimy sobie dalszą pracę. Przyjęcie takiego rozwiązania oznaczałoby jednak mozolne opracowywanie odpowiednich struktur, dlatego na nie również się nie zdecydujemy.

A może by tak nadać różnym elementom „z górnego poziomu” dokumentu szeroki prawy margines, który będzie otwierał pusty obszar? W ten sposób unikniemy dodawania elementu `div` tylko po to, aby utworzyć kolumny, a także ominiemy błędy w programie IE dla Windows. Musimy mieć pewność, że uwzględnimy wszystkie elementy, które są dziećmi elementu `body` ; na szczęście w przypadku tej treści nie powinniśmy mieć trudności. Utworzenie pierwszych reguł w naszym arkuszu stylów przyniesie efekt pokazany na rysunku 13.1.

    <head>
    <title>Rozdział 13.</title>
    <style type="text/css">
    body {margin: 0; padding: 0; color: black;
      background: white;}
    h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%;
      margin-left: 8%; padding: 0;}
    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
    div.listing pre {margin: 0;}
    </style>
    </head>

##### Rysunek 13.1.

Zastosowanie marginesów w elementach znajdujących się wewnątrz elementu body daje efekt kolumn

##### Dodatkowe wcięcie

Nagłówek jest wcięty dalej niż reszta tekstu, ponieważ jest on zawarty w elemencie `div`. W ten sposób elementy znajdujące się wewnątrz nagłówka elementu `div` zostały wyrównane zarówno przez lewy margines elementu `div`, jak i przez swoje własne lewe marginesy. Naprawimy to w następnym punkcie.

W ten sposób sprawiliśmy, że szerokość kolumny zawierającej tekst zasadniczy dokumentu odpowiada 70% szerokości elementu `body`. W rzeczywistości nie jest to oczywiście kolumna, jedynie tworzy takie wrażenie. Powód, dla którego użyliśmy wartości `22%`dla prawego marginesu, już za chwilę stanie się jasny. Marginesy zdefiniowane dla listy są trochę szersze niż inne elementy, ponieważ chcemy, aby elementy listy zostały nieco wcięte względem reszty tekstu. Wstawiliśmy regułę dla `div.listing pre`, aby uniknąć problemów z IE dla Windows w toku dalszej pracy. (Regułę tę napisalibyśmy wcześniej czy później, ale wstawiając ją w tym miejscu, unikniemy niejasności podczas dalszej pracy nad projektem).

Teraz jeszcze musimy znaleźć odpowiedź na pytanie, jak narysować linię między główną kolumną a paskiem bocznym. Możemy narysować ramkę z prawej strony każdego elementu, do którego właśnie dodaliśmy 22% margines, ale wówczas musielibyśmy wprowadzić pionowe oddzielenie w ramach dopełnienia, a to wprowadziłoby bałagan do naszego projektu. Ponadto nie wszystkie elementy dotykają linii oddzielenia. Gdyby taka linia została utworzona z ramek elementów zawierających tekst zasadniczy naszego dokumentu, wszystkie ramki dotykałyby jej.

Zamiast tego pożyczymy pewien trik od starszych stron WWW i zmodyfikujemy go trochę. Pamiętasz triki z 1-pikselowymi obrazami GIF? Skorzystamy z jednego z nich — weźmiemy 1-pikselowy obraz GIF, który ma odpowiedni odcień niebieskiego, i zastosujemy go w tle elementu `body`. Jeżeli umieścimy go w odpowiednim miejscu i powielimy wyłącznie w pionie, otrzymamy linię dzielącą, taką jak na rysunku 13.2.

    <style type="text/css">
    body {margin: 0; padding: 0; color: black;
      background: white url(blue.gif) 80% 0 repeat-y;}
    h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%;
      margin-left: 8%; padding: 0;}

##### Rysunek 13.2.

Prosty obraz tła elementu body tworzy oddzielenie między kolumnami

Pamiętasz, jak ustawialiśmy wszystkie prawe marginesy na `22%`? Z uwagi na to, że prawe marginesy mają wartość `22%`, a linia znajduje się w odległości 20% od prawej krawędzi elementu `body`, pozostało nam `2%` miejsca między krawędzią elementów a linią. W ten sposób utworzyliśmy niewielki dystans między tekstem zasadniczym a linią oddzielającą.

#### Nagłówek

##### Obrazy odłożone na później

Trzy obrazy podglądu, które znajdują się na pierwszej stronie projektu, nie są częścią nagłówka; nie znajdują się one nawet w bieżącym pliku z projektem. Zajmiemy się nimi w następnym podrozdziale.

Zdefiniowaliśmy już ustawienia kolumny zawierającej tekst zasadniczy, a więc możemy zająć się nagłówkiem — jasnoniebieskim pojemnikiem, który rozpoczyna każdy projekt, określając jego numer, tytuł oraz epigram dla niego. Kod dla nagłówka wygląda następująco:

    <div id="masthead">
    <h1>13</h1>
    <h2><cite>Eric Meyer o CSS</cite> w CSS</h2>
    <blockquote>Autoplagiat jest stylowy.</blockquote>
    <div id="attrib">&mdash;Alfred Hitchcock</div>
    </div>

Dzięki elementowi `div`, który zawiera całą treść nagłówka, utworzenie niebieskiego pojemnika jest w miarę proste. Chcemy, aby nagłówek wypełnił całą przestrzeń między lewą krawędzią elementu `body` a linią oddzielającą — efekt ten możemy osiągnąć przy użyciu marginesów. Ramka również jest prosta, więc ustaw 1-pikselową ramkę wokół prawej i dolnej krawędzi nagłówka. Wreszcie, aby treść nie znalazła się zbyt blisko górnej lub dolnej krawędzi nagłówka, zmienimy wartość dopełnienia dla elementu `div`.

    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
    div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
      border: 1px solid #006; border-width: 0 1px 1px 0;
      background: #BDF;}
    </style>

##### Kapitaliki o innym rozmiarze

IE dla Windows wyświetli tekst napisany kapitalikami za pomocą wielkich liter. Technicznie jest to dozwolone w CSS1, ale efekt może być inny niż ten, którego się spodziewasz. W naszym projekcie będziemy nadal korzystać z kapitalików, ale pamiętaj, aby mieć tę kwestię na uwadze podczas tworzenia własnych projektów.

Aby odpowiednio sformatować epigram, potrzebujemy tylko kilku stylów. Cytat, zawarty w elemencie `blockquote`, powinien być napisany czcionką nieco mniejszą od normalnej kursywy. Dla autora cytatu czcionka powinna być taka sama z tym, że musimy przenieść nazwisko do prawej krawędzi i napisać je kapitalikami, tak jak to przedstawiono na rysunku 13.3.

    div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
      border: 1px solid #006; border-width: 0 1px 1px 0;
      background: #BDF;}
    div#masthead blockquote {font-size: 90%; font-style: italic;}
    div#attrib {font-size: 90%; font-style: italic;
      text-align: right; font-variant: small-caps;}
    </style>

##### Rysunek 13.3.

Ogólne zdefiniowanie nagłówka za pomocą ramek i tła

Nasz projekt zaczyna coraz lepiej wyglądać. Pozostała jeszcze lewa krawędź dokumentu, która na razie robi wrażenie nieco postrzępionej. Strona wyglądałaby dużo ładniej, gdyby wszystkie jej elementy zostały wyrównane do jednej linii, ale to wymagałoby zdefiniowania dla nich takiego samego lewego marginesu. Zacznijmy od elementu `blockquote` i jego lewego marginesu, a także pozostałych krawędzi.

    div#masthead blockquote {font-size: 90%; font-style: italic;
      margin: 2em 22% 0.5em 10%;}

Marginesy górny oraz dolny posłużą oczywiście do tego, aby oddzielić nagłówek od treści innych nagłówków. Prawy margines jest wystarczająco duży, abyśmy mieli pewność, że nawet długi cytat nie sięgnie zbyt blisko linii oddzielającej, natomiast zadaniem lewego marginesu jest wyrównanie treści cytatu z tekstem zasadniczym dokumentu. Teraz dokonamy podobnych zmian w elementach `h1` oraz `h2` i zdefiniujmy rozmiar ich czcionek.

    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
    h1 {font-size: 300%; margin: 0.5em 0 0.5em 10%;}
    h2 {font-size: 200%; margin: 0 0 0.66em 10%;}
    div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
      border: 1px solid #006; border-width: 0 1px 1px 0;
      background: #BDF;}

Na pierwszy rzut oka wszystko wygląda dobrze, ale w naszych stylach ukrył się pewien mały błąd. Aby go ujawnić, nadamy dolną krawędź elementowi `h1`.

    h1 {font-size: 300%; border-bottom: 2px solid white;
      margin: 0.5em 0 0.5em 10%;}

Problem polega na tym, że ramka rozciąga się od linii oddzielającej do lewej strony numeru 13 — nie jest natomiast kontynuowana dalej, do lewej krawędzi okna przeglądarki. Aby to naprawić, musimy pozbyć się lewego marginesu i zastąpić go lewym dopełnieniem.

    h1 {font-size: 300%; border-bottom: 2px solid white;
      margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}

Wreszcie musimy zmienić czcionkę tytułu, tak aby wyglądał on mniej więcej tak samo jak na wydruku. Wykorzystanie takiej samej czcionki nie leży w granicach naszych możliwości, ale możemy przynajmniej spróbować przybliżyć wygląd naszej czcionki do wersji drukowanej, korzystając z `kapitalików`. Ponieważ wszystkie tytuły i nagłówki (z wyjątkiem elementów `h5`) wyglądają w książce tak samo, ustawimy je tak, aby były napisane kapitalikami. Efekt jest przedstawiony na rysunku 13.4.

    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
    h1, h2, h3, h4 {font-variant: small-caps;}
    h1 {font-size: 300%; border-bottom: 2px solid white;
      margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}

##### Rysunek 13.4.

Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu

##### Dopasowywanie czcionek w CSS

Być może myślisz, że łatwo zmienić czcionkę elementu za pomocą CSS, ale prawda jest taka, że masz do wyboru tylko najbardziej popularne czcionki. Wynika to z tego, że przeglądarka WWW jest całkowicie uzależniona od czcionek zainstalowanych na komputerze użytkownika. Możesz zastosować definicję, zgodnie z którą dany element będzie wyświetlony za pomocą czcionki New Century Schoolbook, taką, jak ta:

    p {font-family: "New Century Schoolbook", serif;}

Definicja ta przyniesie pożądany efekt na każdym komputerze, na którym jest zainstalowana ta czcionka. Jeżeli jednak czcionka nie jest dostępna, w jej miejsce zostanie użyta domyślna czcionka użytkownika. Dlatego właśnie nie staramy się dokładnie odtworzyć czcionki tytułowej użytej w książce.

Nasz dylemat mógłby zostać rozwiązany, gdyby istniała możliwość określenia czcionki, która ma być załadowana i użyta na stronie WWW. W wojnie przeglądarek firmy Microsoft oraz Netscape wynalazły metody ładowania czcionek, każda swoją własną, przy czym żadna z nich nie obsługiwała drugiej. CSS2 wprowadziło opisy czcionek i metody ich ładowania, które nie współpracowały z mechanizmami Windows i Netscape. Dlatego na razie czcionki ładowane przez różne przeglądarki pozostają dla nas w sferze pobożnych życzeń.

#### Wstawianie obrazów podglądu

U góry naszego dokumentu znajduje się jeszcze jedna rzecz, którą musimy się zająć — mam na myśli trzy okna podglądu widoczne na pierwszej stronie każdego projektu. Okna te stanowią reprodukcje rysunków, które pojawią się w dalszej części projektu. W tym miejscu wskażemy tylko obrazy, które nas interesują i rozmieścimy je na stronie.

Ważną rzeczą jest jednak to, aby umieścić obrazy w odpowiednim miejscu. Ponieważ chcemy, aby zaczynały się bezpośrednio pod nagłówkiem i były rozmieszczone swobodnie wzdłuż strony, musimy je wstawić, zanim zdefiniujemy sam nagłówek.

    <body>
    <div id="previews">
    <img src="13CSS03.jpg" alt="preview 1">
    <img src="13CSS10.jpg" alt="preview 2">
    <img src="13CSS15.jpg" alt="preview 3">
    </div>
    <div id="masthead">
    <h1>13</h1>

Teraz pozostaje nam już tylko nadać elementowi `div` swobodny charakter oraz określić rozmiar obrazów.

    div#attrib {font-size: 90%; font-style: italic;
      text-align: right; font-variant: small-caps;}
    div#previews {float: right; width: 33%; margin: 0; text-align: center;}
    div#previews img {width: 80%; margin-top: 1em;}
    </style>

Być może zauważyłeś, że element `div` jest szerszy niż `20%` margines zdefiniowany dla tekstu zasadniczego. Powód jest taki, że chcemy, aby obrazy wystawały z paska bocznego, tak samo jak w wersji drukowanej książki. Nadaliśmy obrazom szerokość o wartości `80%` zawierającego ich elementu `div`, z kolei wartość `text-align` umieści je na środku elementu `div`. W ten sposób odepchniemy je od krawędzi elementu `body` (patrz rysunek 13.5).

##### Rysunek 13.5.

Odtworzenie obrazów podglądu oraz kilka małych zmian, które ułatwią nam życie

Oczywiście nie jest to dokładnie to samo co drukowana wersja książki. Ciągle nie mamy zaokrąglonych na rogach pojemników, które otaczają obrazy, a także ciemnoniebieskiego tła dla paska bocznego. Moglibyśmy spróbować odtworzyć te efekty, ale nie zrobimy tego. Dlaczego? Uzyskanie odpowiedniego wyglądu pojemników zabrałoby nam mnóstwo czasu i wysiłku, a tak niewielki w sumie element całego projektu nie jest po prostu wart zachodu. Z kolei ciemnoniebieskie tło zostało pominięte dlatego, że dziwnie wyglądałaby nasza strona, gdyby kończyło się ono tuż pod obrazami i pozostawiało pod sobą pusty pasek boczny. Dlatego nie będziemy odtwarzać tych efektów i przejdziemy od razu do tekstu zasadniczego dokumentu.

#### Wstawianie odstępów w tytułach

Gdy tylko spojrzymy na cel projektu, zdefiniowany w podrozdziale o tym samym tytule, zobaczymy, że odstęp różni się od tego, który widzimy w drukowanej wersji książki. Musimy go przesunąć w dół, bliżej tekstu, który się pod nim znajduje, a dalej od poprzedzającego go akapitu. To samo dotyczy elementów `h3`, `h4` oraz `h5`, dlatego teraz nadamy im wszystkim odpowiedni styl.

    h1, h2, h3, h4 {font-variant: small-caps;}
    h3, h4, h5 {margin-top: 1.25em; margin-bottom: 0;}
    h1 {font-size: 300%; border-bottom: 2px solid white;
      margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}

##### Odstępy między akapitami

Mimo że w akapitach zmniejszyliśmy górne marginesy, dwa następujące po sobie akapity wciąż będą oddalone od siebie o około 1 em, ponieważ nadal obowiązuje domyślny margines dolny dla akapitów. Marginesy, które bezpośrednio przylegają do siebie w pionie, łączą się, a odległość między ramkami elementów jest zawsze większa niż szerokość dwóch marginesów, dlatego dolny margines o szerokości 1em zapewni tradycyjny odstęp między akapitami.

To samo oczywiście nie wystarcza. Jeśli chcemy, aby tytuły znajdowały się bliżej tekstu, który po nich następuje, musimy również zmniejszyć górny margines akapitów. A jak już przy tym jesteśmy, to ustawimy jeszcze trochę większy odstęp między wierszami (`line-height`).

    h2 {font-size: 200%; margin: 0 0 0.66em 10%;}
    p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
    div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
      border: 1px solid #006; border-width: 0 1px 1px 0;
      background: #BDF;}

Powinniśmy również zwiększyć rozmiar elementu `h3` , który w wersji drukowanej jest większy od normalnego tekstu (zobacz rysunek 13.6).

    h2 {font-size: 200%; margin: 0 0 0.66em 10%;}
    h3 {font-size: 150%;}
    p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}

##### Rysunek 13.6.

Czas na akapity i ustawienie odstępów w tytułach, aby wyglądały one tak, jak w książce

Skoro już zaczęliśmy określać rozmiar elementów nagłówka, zróbmy to samo z pozostałymi nagłówkami. Dzięki temu nie będziemy musieli martwić się o nie już później.

    h3 {font-size: 150%;}
    h4 {font-size: 110%;}
    h5 {font-size: 100%;}
    p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}

Cel został osiągnięty, a więc zastanówmy się teraz, jak ożywić nasze listy.

#### Listy

Przejdźmy teraz do podrozdziału „Cel projektu” — znajdziemy w nim nieuporządkowaną listę. W naszej książce poszczególne punkty listy nie są wyróżnione za pomocą standardowych kropek, lecz ikonek mających postać małych niebieskich diamentów. Jeśli tylko mamy odpowiedni plik graficzny zawierający symbol niebieskiego diamentu na białym tle, skorzystajmy z niego.

    div#previews img {width: 80%; margin-top: 1em;}
    ul li {list-style: outside square url(diamond.gif);}
    </style>

Trzeba również wziąć pod uwagę to, że elementy listy są nieco od siebie oddzielone. Moglibyśmy zmienić ustawienia odstępu między wierszami (`line-height`) dla elementów listy, ale jest lepszy sposób — zwiększenie marginesu albo dopełnienia dla poszczególnych elementów listy. Jedyna różnica między tymi dwoma metodami jest taka, że jeśli kiedykolwiek chcielibyśmy zdefiniować kolor tła dla listy, to w przypadku zwiększonego marginesu tła nie będą się dotykać i będą tworzyć oddzielone od siebie bloki danego koloru. Nas to jednak nie dotyczy, ponieważ tło listy w książce jest białe, zatem zwiększamy dolny margines elementów `li` elements. Efekt możesz obejrzeć na rysunku 13.7.

    ul li {list-style: outside square url(diamond.gif);
      margin-bottom: 0.5em;}

##### Rysunek 13.7.

Wykorzystaliśmy obrazy do tego, aby zastąpić nudne kropki błyszczącymi diamentami

#### Uwagi na pasku bocznym

Przechodząc do podrozdziału „Przygotowania”, napotykamy pierwszą notatkę umieszczoną na pasku bocznym. Jest to jedna z notatek dotyczących sieci Web (nadamy jej kolor zielony), różniąca się od notatek mających charakter uwagi lub ostrzeżenia jednym drobiazgiem — uwagi dotyczące sieci Web nie mają tytułu. Oto kod notatki mówiącej o sieci Web:

    <div class="note web">
    <img src="web-icon.gif" alt="Web">
    <p>
    Instrukcje dotyczące pobierania plików z serwera znajdują się we wstępie do tej książki.
    </p>
    </div>

A oto kod jednej z pozostałych notatek:

    <div class="note tip">
    <img src="tip-icon.gif" alt="Tip">
    <h5>Obrazy odłożone na później</h5>
    <p>
    Trzy obrazy podglądu, które znajdują się na pierwszej stronie projektu, nie są częścią nagłówka;
    nie znajdują się one nawet w bieżącym pliku z projektem. Zajmiemy się nimi w następnym punkcie.
    </p>
    </div>

Pod względem strukturalnym jedynym elementem, który różni te dwa rodzaje notatek, jest element `h5`. Dużo ważniejszą kwestią jest wartość atrybutu `class` w tych dwóch notatkach. Widzimy, że obie notatki zawierają słowo `note`, a gdy przejrzymy pozostałe fragmenty książki, przekonamy się, że wartość ta występuje we wszystkich notatkach umieszczonych na pasku bocznym, a po niej pojawia się słowo określające rodzaj notatki; są to wyrazy `web` (sieć Web), `tip` (wskazówka) oraz `warn`(ostrzeżenie).

W związku z tym te style, które są wspólne dla wszystkich notatek, mogą być zapisane w jednej regule, natomiast te, które są charakterystyczne tylko dla danego typu notatek, zostaną zapisane w swoich własnych regułach. Chcemy, aby notatki były umieszczone na pasku bocznym swobodnie, ale również chcemy mieć pewność, że żadna notatka nie pojawi się pod inną notatką lub z jej lewej strony. Jeżeli wstawimy do kodu styl `width` oraz kilka marginesów, osiągniemy efekt widoczny na rysunku 13.8.

    ul li {list-style: outside square url(diamond.gif);
      margin-bottom: 0.5em;}
    div.note {float: right; clear: right; border-width: 0;
      width: 19%; margin: 0 1% 0 0; padding: 0;}
    </style>

##### Rysunek 13.8.

Pierwszy krok w kierunku określenia stylów notatek umieszczonych na pasku bocznym, aby odpowiadały one wersji drukowanej

Okazuje się, że Explorer dla Windows ma pewne problemy ze stylami, które właśnie dodaliśmy; z jakiegoś powodu wydaje mu się, że `19%` plus `1%` równa się więcej niż `20%`. Użyjemy więc triku `voice-family`, aby dać IE dla Windows wartość, której potrzebuje, jednocześnie dostarczymy odpowiednią liczbę innym przeglądarkom, które tego problemu nie mają.

##### Trik voice-family

Jeśli interesuje Cię trik voice-family, a także inne sposoby wykorzystywania robaków zagnieżdżonych w przeglądarkach, zobacz „Tricking Browsers and Hidding Styles” na stronie WWW.

    div.note {float: right; clear: right; border-width: 0;
      width: 18%; margin: 0 1% 0 0; padding: 0;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%;}

Teraz chcemy przesunąć ikonę nieco w prawo. Ponieważ wcięcie obrazów odbywa się tak samo jak w przypadku tekstu, możemy wyrównać je do prawej krawędzi za pomocą stylu `text-align`. Pamiętamy jednak, że tytuł oraz tekst umieszczony w akapicie mają być wyrównane do lewej strony.

    div.note {float: right; clear: right; border-width: 0;
      width: 18%; margin: 0 1% 0 0; padding: 0;
      text-align: right;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%;}
    div.note h5, div.note p {text-align: left;}
    </style>

Wciąż pozostaje jeszcze zmniejszenie tekstu i użycie w nim pogrubionej czcionki `sans-serif`, takiej jak ta, którą użyto w książce. Najłatwiej dokonać tego w samym elemencie `div`.

    div.note {float: right; clear: right; border-width: 0;
      width: 18%; margin: 0 1% 0 0; padding: 0;
      text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%;}

Teraz przyjrzyjmy się treści samych notatek. Element obrazu nie jest wyposażony w atrybuty `height` oraz `width`, dlatego musimy dostarczyć te wartości za pomocą CSS. Ponadto chcemy sprawić, aby tekst notatek odstawał nieco od krawędzi paska bocznego w kierunku prawej krawędzi elementu `div` notatki. Dlatego tworzymy następujący kod:

    div.note h5, div.note p {text-align: left; margin-left: 1em; margin-right: 0;}
    div.note img {height: 30px; width: 30px; margin: 0;}
    </style>

Teraz musimy połączyć ikonę z linią oddzielającą za pomocą ciemnoniebieskiej poziomej linii. Dlaczego znowu nie skorzystać z triku, który posłużył nam do utworzenia linii oddzielającej? Wiemy, że ikona ma wysokość `30px` i znajduje się w prawym, górnym rogu notatki. Zatem możemy narysować w tle elementu `div` linię, która będzie znajdowała się w odległości `15px` od górnej krawędzi elementu `div` — w tym celu wstawimy ponownie 1-pikselowy plik, tym razem w kierunku poziomym, tak jak pokazano na rysunku 13.9.

    div.note {float: right; clear: right; border-width: 0;
      width: 18%; margin: 0 1% 0 0; padding: 0;
      text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif;
      background: transparent url(blue.gif) 50% 15px repeat-x;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%;}

##### Rysunek 13.9.

Za pomocą zaledwie kilku stylów zbliżyliśmy się do odtworzenia oryginalnego wyglądu książki

Teraz pozostało jeszcze określenie koloru tekstu i przesunięcie tekstu do góry, tak aby znalazł się bliżej linii, którą właśnie narysowaliśmy. Nie powinniśmy jednak przypisywać takiej samej wartości `color` do wszystkich notatek, ponieważ nadamy im, zależnie od typu notatki, trzy różne kolory: niebieski, zielony oraz czerwony. Dlatego właśnie przyda nam się drugie słowo w każdej klasie notatki.

    div.note img {height: 30px; width: 30px; margin: 0;}
    div.web {color: #399;}
    div.tip {color: #006;}
    div.warn, div.warn code {color: maroon;}
    </style>

##### Dziedziczenie stylów

Innym sposobem na to, aby tekst `code` ostrzeżenia wyglądał tak samo jak jego rodzic, jest użycie wartości `inherit` w nowej regule: `div.warn code {color: inherit;}`. Wartość ta jest dość dobrze obsługiwana przez różne przeglądarki, a my nie skorzystaliśmy z niej tylko dlatego, że nie jest ona bardziej skuteczna niż metoda, której my użyliśmy.

Wstawiliśmy selektor, który zmieni czcionkę tekstu ostrzeżenia umieszczonego w elemencie `code` na taką samą, jaką ma otaczający go tekst. W ten sposób utworzyliśmy regułę, która uchyla wcześniejszą regułę, określającą kolor czcionki wszystkich elementów `code` jako ciemnoniebieski.

Przy przesunięciu tekstu do góry musimy zachować pewną ostrożność. Możemy wprawdzie zdefiniować ujemny margines górny, ale nie chcemy przecież, aby tekst nachodził na ikony. Dlatego też musimy sprawić, aby każdy element, który pojawi się jako pierwszy w dowolnym typie notatki, miał prawy margines, zostawiający wystarczającą ilość miejsca na ikonę. W notatkach dotyczących sieci Web pierwszym elementem jest zawsze akapit.

    div.note img {height: 30px; width: 30px; margin: 0;}
    div.web p {margin: -10px 30px 0 1em;}
    div.web {color: #399;}

Wstawienie prawego marginesu o szerokości `30px`, czyli dokładnie takiej, jaką ma ikona, powinno zapobiec nachodzeniu tekstu na obraz. Teraz musimy zastosować podobne style w pierwszym elemencie notatek i ostrzeżeń, czyli w elemencie `h5`. Tytuły tych notatek nie są napisane kapitalikami, więc możemy pozbyć się tego stylu i przywrócić ich pierwotny wygląd.

    div.note img {height: 30px; width: 30px; margin: 0;}
    div.note h5 {margin: -5px 30px 0 1em; padding: 0;
      font-variant: normal;}
    div.web p {margin: -10px 30px 0 1em;}

Dopełnienie o wartości `0`, zdefiniowane dla tytułów notatek, ma charakter zabezpieczenia, ponieważ nigdy nie wiadomo, kiedy przeglądarka zdecyduje się użyć dopełnienia zamiast marginesów, aby utworzyć miejsce wokół elementów nagłówka.

Musimy jeszcze upewnić się, że tekst w każdej notatce będzie czytelny. W wielu przeglądarkach tekst elementu `code` jest mniejszy niż normalny tekst. W przypadku naszych notatek chcemy, aby tekst miał mniej więcej taki sam rozmiar jak tekst akapitu, tak jak przedstawiono na rysunku 13.10.

    div.web p {margin: -10px 30px 0 1em;}
    div.note code {font-size: 100%;}
    div.web {color: #399;}

##### Rysunek 13.10.

Niebieska notatka ma wygląd bardzo zbliżony do wersji drukowanej

Oczywiście poszczególne wiersze tekstu nie będą łamane dokładnie w tym samym miejscu co w wersji drukowanej książki, przez co notatki mogą być nieco dłuższe lub krótsze niż te, które widzisz na wydrukowanej stronie. Mimo to podobieństwo jest wystarczające, abyśmy mogli przejść do następnego zagadnienia, czyli wyróżniania w tekście kodu, który został napisany inną czcionką.

#### Bloki i fragmenty kodu

W podrozdziale zatytułowanym „Na początek” widzimy, że część tekstu została ujęta w elementach `code`. Przykładowo, spójrz na trzeci akapit:

    <p>
    Ponadto musimy upewnić się, że treść, którą chcemy umieścić na stronie, ma odpowiednią strukturę,
    tak aby można było w niej zastosować odpowiednie style. Akapity powinny być zawarte w elemencie
    <code>p</code>, nagłówki podrozdziałów w elementach <code>h3</code> i <code>h4</code>, notatki
    umieszczone na pasku bocznym powinny być odpowiednio sklasyfikowane jako elementy <code>div</code>
    o poszczególnych atrybutach <code>class</code> i tak dalej. Nie będziemy się jednak nad tym teraz
    zastanawiać, ponieważ na każdy element przyjdzie kolej podczas naszej pracy nad projektem.
    </p>

##### Walka z rozciągniętym kodem

Zależnie od tego, która czcionka monospace zostanie użyta przez przeglądarkę, elementy `code` mogą robić wrażenie nieco rozciągniętych. Jednym ze sposobów naprawienia takiego stanu rzeczy może być nadanie ujemnej wartości stylowi `letter-spacing`.

W książce takie fragmenty kodu są napisane ciemnoniebieską czcionką monospace. Jest to niewiarygodnie proste do odtworzenia, ale poczekajmy jeszcze chwilę. Bloki kodów mają taką samą czcionkę jak elementy `code` , ale nie są niebieskie. Gdy zajrzymy do kodu źródłowego, przekonamy się, że te bloki to elementy `pre`. Dlatego nasz kod będzie wyglądał następująco:

    p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
    code, pre {font-family: "Courier New", Courier, monospace;}
    code {color: #006;}
    div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
      border: 1px solid #006; border-width: 0 1px 1px 0;
      background: #BDF;}

Bloki kodów zamieszczone w książce często zawierają fragmenty wyróżnione kolorem ciemnoczerwonym, który symbolizuje zmiany dokonane w projekcie. Przyjrzyjmy się bliżej jednemu z takich bloków kodu dokumentu HTML.

    <pre>
    ul li {list-style: outside square url(diamond.gif);
      <b>margin-bottom: 0.5em;</b>}
    </pre>

Zmiany wyróżniono za pomocą elementu `b` , który jest wciąż niedocenianym elementem określającym czcionkę pogrubiającą. W książce zmiany mają kolor ciemnoczerwony i są wyróżnione za pomocą pogrubionej czcionki. Zamiast próbować skomplikowanych metod, takich jak zastąpienie elementów `b` elementami `span`, spróbujmy popracować trochę nad tym, co już mamy. Ponadto upewnimy się, że tekst bloku kodu zostanie nieco wcięty w porównaniu z normalnym tekstem i będzie od niego trochę mniejszy (patrz rysunek 13.11).

    code {color: #006;}
    pre {margin-left: 10%; font-size: 80%;}
    pre b {color: maroon; font-weight: normal;}
    div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
      border: 1px solid #006; border-width: 0 1px 1px 0;
      background: #BDF;}

##### Rysunek 13.11.

Fragmenty kodu oraz bloki kodu wyróżniają się w tekście dzięki zastosowaniu nowych stylów

#### Rysunki

Wreszcie doszliśmy do tej części naszego projektu, która dla nas będzie stanowić największe wyzwanie — rysunki oraz podpisy do nich. Odpowiednie zdefiniowanie tych struktur będzie wymagało nie tylko znajomości CSS, ale również trochę HTML-u.

Spójrzmy najpierw na kod rysunku użytego wcześniej w tym projekcie.

    <div class="figure">
    <img src="13CSS04.jpg" height="300" width="400" alt="figure">
    </div>
    <div class="caption">
    <h5>Rysunek 13.4.</h5>
    <p>
    Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu
    </p>
    </div>

Istnieje wiele sposobów na to, aby nadać rysunkom oraz podpisom do nich odpowiednią strukturę — jeden z nich jest naprawdę bardzo przydatny. Ponieważ rysunek jest zawarty w jednym elemencie `div`, a podpis do niego w drugim, łatwo możemy umieścić je obok siebie, wstawiając obraz z lewej, a podpis z prawej strony. Najpierw zróbmy rysunek.

    div.warn, div.warn code {color: maroon;}
    div.figure {float: left; width: 75%; margin: 0; padding: 0;}
    </style>

##### Dlaczego umieszczamy obrazy swobodnie?

Być może myślisz, że moglibyśmy po prostu pozwolić napisom „unosić się w przestrzeni” z prawej strony rysunku, jednak ta metoda ma pewne wady, o czym przekonasz się już wkrótce.

W ten sposób pozostawiamy wystarczającą ilość miejsca na to, aby podpis znalazł się w pasku bocznym, plus dodatkowe 5% (to pozwoli nam uniknąć niektórych problemów z IE dla Windows). Przenieśmy teraz podpis na prawo, korzystając z tych samych podstawowych deklaracji, których użyliśmy dla zdefiniowania notatek. Nasze postępy w pracy możesz zobaczyć na rysunku 13.12.

    div.figure {float: left; width: 75%; margin: 0; padding: 0;}
    div.caption {float: right; width: 18%; padding: 0 1% 0 0; margin: 0;
    voice-family: "\"}\""; voice-family:inherit;
      width: 19%;}
    </style>

##### Rysunek 13.12.

Rysunek oraz podpis do niego zostały umieszczone swobodnie na stronie, ale wciąż pozostało nam sporo pracy

Rysunek wykracza poza wyrównanie, ale tym zaczniemy się martwić dopiero wtedy, gdy nadamy podpisowi odpowiedni styl. Najprostszą czynnością jest wpisanie odpowiedniego tekstu do podpisu, a umieścimy go w elemencie `p`. Odtworzenie jego wyglądu zajmie tylko moment.

    div.caption {float: right; width: 18%; padding: 0 1% 0 0; margin: 0;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%;}
    div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif;
      color: #555;}
    </style>

Odtworzenie górnej krawędzi ramki podpisu może wydawać się proste, ponieważ musimy ustawić ją w samym elemencie `div`. Zwróć jednak uwagę na to, w jaki sposób linia ta wchodzi w główną kolumnę. Najpierw określimy wymiary ramki, a potem zobaczymy, co trzeba zmienić, aby osiągnąć wygląd, który nas interesuje.

    div.caption {float: right; width: 18%; margin: 0 1% 0 0; padding: 0;
      border-top: 1px solid #006;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%;}

Teraz nasza górna ramka zatrzymuje się na linii oddzielającej. Gdybyśmy nie nadali podpisowi swobodnego charakteru, linia zostałaby pociągnięta w poprzek całej strony, aż do lewej krawędzi ekranu. Dzięki temu, że elementy swobodne współdziałają z tłem oraz krawędziami, uniknęliśmy tego problemu.

Aby wydłużyć linię z lewej strony, musimy wstawić tam dopełnienie, a przy okazji dostosować pierwszą wartość `width`, aby IE dla Windows nie narobił zbyt dużego bałaganu. Niestety, program ten myśli, że wielkość każdego dopełnienia dodanego do swobodnego elementu została obliczona z uwzględnieniem rozmiaru tego elementu, więc jeśli nadamy dopełnieniu wartość `25%`, to miejsce na podpis pod rysunkiem zostałoby odpowiednio zwężone. Poza tym byłoby to zbyt duże dopełnienie dla przeglądarek, które poprawnie obliczają wielkość odstępu. Długi proces prób i błędów doprowadza nas do następującej kombinacji wartości, zilustrowanej na rysunku 13.13.

    div.caption {float: right; width: 30%; margin: 0 1% 0 0;
      padding: 0 0 0 40%;
      border-top: 1px solid #006;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%; padding-left: 10%;}

##### Rysunek 13.13.

Wydłużenie górnej krawędzi podpisu w głąb głównej kolumny przy użyciu dopełnienia

Nagle podpis przesunął się pod rysunek. Dodanie dopełnienia spowodowało rozszerzenie podpisu tak, że jego pojemnik nachodzi na pojemnik utworzony przez element `div` rysunku. Elementy swobodne nie powinny na siebie nachodzić, dlatego drugi z nich (podpis) został umieszczony pod pierwszym. Możemy tego uniknąć, zmniejszając po prostu atrybut `width` elementu `div` rysunku. Ponieważ szerokość całego podpisu wynosi `30%`, moglibyśmy zastosować wartość `70%`, ale żeby mieć pewność, że rysunek z podpisem na pewno nie będą nachodzić na siebie, zmniejszymy ją jeszcze trochę.

    div.figure {float: left; width: 67%; margin: 0; padding: 0;}

Teraz nasz podpis wrócił do miejsca, w którym powinien się znajdować, ale niektóre fragmenty kolejnego akapitu podążyły za nim! Przyczyna tkwi w tym, że przed ostatnimi zmianami, których dokonaliśmy, element `div` rysunku był taki szeroki, że nie pozostawało już miejsca na to, aby tekst, który go dotyczył, zmieścił się obok niego. Tak już nie jest dzięki zmianom, których dokonaliśmy w stylach podpisu.

Problem, z którym się przed chwilą zetknęliśmy, zwraca naszą uwagę na jeszcze inne, podobne zagadnienie. Załóżmy, że mamy notatkę, która powinna znajdować się bezpośrednio przed rysunkiem, ale kończy się poniżej górnej krawędzi rysunku. Podpis do rysunku zostałby wówczas przeniesiony na koniec notatki, a to wyglądałoby dość dziwnie. W CSS nie ma żadnego sposobu na to, aby wyrównać dwa swobodnie umieszczone elementy tak, aby znajdowały się w jednej linii. Możemy jednak posłużyć się kodem HTML, dzięki któremu osiągniemy pożądany cel.

    <hr>
    <div class="figure">
    <img src="13CSS04.jpg" height="300" width="400">
    </div>
    <div class="caption">
    <h5>Rysunek 13.4.</h5>
    <p>
    Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu
    </p>
    </div>
    <hr>

##### Ukryte elementy

Różnica między stylami `visibility: hidden` oraz `display: none` jest taka, że pierwszy z nich sprawia po prostu, że elementy są niewidoczne, umożliwia im jednak wpływanie na wygląd dokumentu. Drugi z wymienionych stylów całkowicie usuwa element z układu graficznego dokumentu, przez co nie ma on żadnego wpływu na wygląd dokumentu.

Wystarczyło wstawić element `hr` przed każdym rysunkiem i po każdym napisie — mamy dokładnie to, czego chcieliśmy. Teraz jeszcze tylko nadamy tym elementom atrybut `clear: both` i ustawimy tak, aby się nie pojawiały (patrz rysunek 13.14).

    div.warn, div.warn code {color: maroon;}
    hr {clear: both; visibility: hidden;}
    div.figure {float: left; width: 67%; margin: 0; padding: 0;}

##### Rysunek 13.14.

Niewidoczne elementy hr utrzymują rysunki i podpisy do nich w jednej linii, choć są oddzielone od siebie

##### Zaokrąglenie rogów

Aby uzyskać szczegółowe informacje na temat tego, jak wykorzystać obrazy tła do zaokrąglania rogów, zobacz rozdział 10., „Ucieczka z pudełka”.

Teraz pozostało jeszcze nadanie odpowiedniego stylu etykiecie podpisu (na przykład „Rysunek 13.4.”). Szybkie spojrzenie w książkę i już wiemy, że etykieta musi być umieszczona w niebieskim pojemniku i wyrównana z linią oddzielającą paska bocznego, ale nie powinna rozciągać się aż do końca górnej krawędzi podpisu. Utworzenie pojemnika wymaga wstawienia w prawym, dolnym rogu elementu `h5` niewielkiej grafiki w tle oraz określenia jej koloru. Rozciągnijmy też trochę litery.

    div.caption {float: right; width: 30%; margin: 0 1% 0 0;
      padding: 0 0 0 40%;
      border-top: 1px solid #006;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%; padding-left: 10%;}
    div.caption h5 {letter-spacing: 1px; color: black;
      background: #9BD url(captioncurve.gif) bottom right no-repeat;}
    div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif;
      color: #555;}

Jeszcze tylko niewielkie dopełnienie oraz marginesy i jesteśmy na miejscu. Aby wyrównać tekst etykiety z akapitem, musimy sprawdzić, jaka jest szerokość marginesów akapitu. Reguła, która definiuje marginesy dla akapitu podpisu, jest następująca:

    h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%;
      margin-left: 8%;}

##### Rezygnujemy z okręgów

Nie będziemy próbowali odtworzyć efektu małych okręgów, które są umieszczone na każdej etykiecie podpisu. Osiągnięcie takiego wyglądu jest z pewnością możliwe, ale, podobnie jak w przypadku pojemników otaczających obrazy podglądu, ten niewielki w sumie aspekt całego projektu kosztowałby nas zbyt wiele wysiłku.

Ta reguła działa bez zarzutu w odniesieniu do akapitów, ale niestety nie jest odpowiednia do zdefiniowania etykiety podpisu. Musimy określić nowe marginesy dla elementu `h5` i, dbając o spójność kodu, dodamy podobne marginesy do akapitów. Przy okazji zmienimy czcionkę etykiet na kapitaliki, ponieważ takiej właśnie czcionki użyto w książce.

    div.caption h5 {margin: 0 1em 0 0; padding: 0.33em 10px 0 1em;
      color: black; letter-spacing: 1px; font-variant: small-caps;
      background: #9BD url(captioncurve.gif) bottom right no-repeat;}
    div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif;
      color: #555; margin: 0; padding: 0.25em 1em;}

Podobnie jak w przypadku notatek umieszczonych na pasku bocznym, musimy upewnić się, że każdy tekst elementu `code` umieszczony w podpisach do rysunków będzie miał taki sam rozmiar jak otaczający go tekst. Efekt ten osiągniemy, dodając selektor do reguły, którą już zastosowaliśmy w odniesieniu do tekstu notatek.

    div.note code, div.caption code {font-size: 100%;}

Ostatnią rzeczą, którą musimy zrobić, jest przesunięcie rysunku bardziej w kierunku środka tekstu. Niestety, z uwagi na wszystkie zmiany, których wcześniej dokonaliśmy, nie możemy po prostu wycentrować obrazu, aby osiągnąć pożądany efekt. Nie możemy zapominać o tym, że element `div` zawierający rysunek ma teraz tylko `67%` szerokości elementu `body`. Zamiast centrowania obrazu wyrównamy więc rysunek do prawej, przenosząc go tak, aby jego prawa krawędź zrównała się z prawą krawędzią elementu `div` (patrz rysunek 13.15).

    div.figure {float: left; width: 67%; margin: 0; padding: 0;
      text-align: right;}

##### Rysunek 13.15.

Na zakończenie nadajemy rysunkom i podpisom do nich odpowiednie style

Nie jest to idealne rozwiązanie, ale będzie ono działało w miarę poprawnie w większości przeglądarek. Zapewnia ono mały, ale zauważalny odstęp między rysunkiem a górną ramką podpisu, taki sam, jaki widać w książce.

#### Listingi kodów i tabele

Aby już wszystko zapiąć na ostatni guzik, spójrzmy na dwie różne struktury, które, jak się okazuje, mają bardzo podobne style — to listingi kodów oraz tabele. Listing 13.1 zawiera przykład tego, co chcemy odtworzyć.

##### Listing 13.1.—Listing 13.1. Przykładowy listing

    div.web {color: #399;}
    div.tip {color: #006;}
    div.warn, div.warn code {color: maroon;}

Wystarczy jeden rzut oka na drukowaną wersję listingu i już wiemy, jaki kod będzie potrzebny do jego odtworzenia, być może z wyjątkiem nagłówka. Wstawimy go najpierw do elementu `h5` i otoczymy numer listingu elementem `span`. W ten sposób otrzymamy następujący kod:

    <h5><span>Listing 13.1.</span>Przykładowy listing</h5>

Teraz nadamy odpowiedni kolor numerom listingu, a element `span` wyposażymy w prawy margines, dzięki czemu tytuł listingu zostanie nieco odsunięty od jego numeru.

    h5 {font-size: 100%;}
    h5 span {color: #006; margin-right: 0.5em;}
    p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}

Jest jeszcze jedna drobnostka, która psuje nam cały efekt — element `h5` ma margines o szerokości `22%` i jest on zawarty w elemencie `div`, który również ma `22%` lewy margines. Musimy zmienić tę sytuację, jeśli nie chcemy dopuścić do tego, aby element `h5` został zbyt mocno wcięty. Dlatego zmienimy lewy margines elementu `h5`.

    div.listing pre {border: 1px solid #006; border-width: 1px 0;
      padding: 0.5em 1em; margin: 0.125em 0 1.5em;}
    div.listing h5 {margin-left: 0.5em;}
    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}

Jeśli zaś chodzi o kod listy, najbardziej sensowne wydaje się dodanie do niego elementu `pre`. Tak naprawdę zdefiniowaliśmy już regułę `div.listing pre`, którą wstawiliśmy na początku projektu, chcąc uniknąć problemów z IE dla Windows. Teraz przepiszemy ją, aby dodać górną i dolną ramkę, a także zmienimy nieco marginesy oraz dopełnienie (patrz rysunek 13.16).

    div.listing pre {border: 1px solid #006; border-width: 1px 0;
      padding: 0.5em 1em; margin: 0.125em 0 1.5em;}

##### Rysunek 13.16.

Nadanie listingom odpowiednich stylów to kwestia zaledwie kilku prostych reguł

Tabele przypominają nieco listingi tym, że posiadają górną i dolną ramkę, przy czym ich tytuł znajduje się bezpośrednio nad górną ramką. Istnieje jednak kilka różnic przedstawionych w tabeli 13.1.

##### Tabela 13.1.—Przykładowa tabela

Kolumna 1 | Kolumna 2 | Kolumna 3
--- | --- | ---
To | jest | typowy
przykład | tabeli | K?

Tytuł jest taki sam jak w listingu, a ponieważ pracujemy nad tabelą, kod będzie zawierał element `table`.

    <h5><span>Tabela 13.1</span> Przykładowa tabela</h5>
    <table cellspacing="0">
    <tr>
    <th>Kolumna 1</th><th>Kolumna 2</th><th>Kolumna 3</th>
    </tr>
    <tr>
    <td>To</td><td>jest</td><td>typowy</td>
    </tr>
    <tr>
    <td>przykład</td><td>tabeli</td><td>K?</td>
    </tr>
    </table>

##### Określanie szerokości tabeli

W wielu przeglądarkach szerokość tabeli jest domyślnie ustawiana tak, aby pomieściła całą treść. Dlatego my dokładnie określamy szerokość tabeli `(table width)`, tak aby nasza definicja zastąpiła domyślne zachowanie przeglądarki.

Być może kusi Cię, aby dodać do elementu `table` atrybut `class`, ale uwierz, że nie ma takiej potrzeby. Jedyne elementy `table` , które pojawią się w naszym projekcie, będą zawierały właśnie takie tabele jak ta z przykładu 13.1. Dlatego dodamy do nich górne i dolne ramki, zmienimy nieco rozmiar czcionki, dołączymy dolny margines, który oddzieli tabele od tekstu i zadeklarujemy ich szerokość za pomocą atrybutu `width`.

    div.listing h5 {margin-left: 0.5em;}
    table {border: 1px solid #006; border-width: 2px 0;
      font-size: 90%; margin-bottom: 1.5em; width: 70%;}
    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}

Ostatnią rzeczą, którą musimy się zająć, są nagłówki kolumn. Dodamy regułę, która zdefiniuje ich kolor, wyrówna tekst do lewej strony, a także wstawi dolną ramkę.

    table {border: 1px solid #006; border-width: 2px 0;
      font-size: 90%; margin-bottom: 1.5em; width: 70%;}
    th {color: #006; border-bottom: 1px solid #006; text-align: left;}
    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}

Na koniec dodamy trochę dopełnienia w komórkach tabeli, tak aby nie robiły wrażenia zbyt przepełnionych. Efekt możesz zobaczyć na rysunku 13.17.

    th {color: #006; border-bottom: 1px solid #006; text-align: left;}
    th, td {padding: 0.125em 0.66em;}
    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}

##### Rysunek 13.17.

Odtworzenie wyglądu tabeli sprowadza się tylko do napisania trzech reguł

### Analiza po ukończeniu projektu

Mimo że za pomocą CSS udało się osiągnąć wygląd bardzo podobny do układu graficznego książki, nie można nie zauważyć, że pominęliśmy kilka rzeczy. Brak możliwości załadowania czcionek jest jednym z największych ograniczeń w sieci Web, choć jest to też swoiste szczęście w nieszczęściu. Projektanci stron nie mogą liczyć na to, że każda przeglądarka wyświetli wybraną przez nich czcionkę, a to wymusza na nich pewną elastyczność w pracy nad projektem.

Inną, równie istotną przeszkodą podczas pracy nad tego typu projektem są jak zawsze ograniczenia dotyczące przeglądarek. W tym konkretnym projekcie dużym problemem był dla nas program Internet Explorer dla Windows, ale równie dobrze mogła to być dowolna inna przeglądarka — wszystko zależy od charakteru Twojego projektu. Na szczęście przeglądarki są na tyle zaawansowanymi programami, że z reguły istnieje możliwość obejścia problemu bez robienia zbyt dużego bałaganu.

Pominęliśmy również cztery różne aspekty projektu.

- W ogóle nie braliśmy pod uwagę nagłówka, który pojawia się u góry na każdej stronie książki. Numery stron nie mają znaczenia w przypadku dokumentów umieszczonych w sieci Web, tak samo nie było potrzeby umieszczania numeru projektu w innym miejscu oprócz nagłówka oraz elementu `title`.
- Pojemniki oraz ciemne tło znajdujące się za obrazami podglądu zostały pominięte z uwagi na trudności w ich odtworzeniu, a także dlatego, że nie wyglądałyby one dobrze w przeglądarce internetowej.
- Przyczyną pominięcia małych okręgów, które znajdują się przy każdej etykiecie podpisu do rysunku, jest przede wszystkim to, że dodanie ich do strony WWW kosztowałoby nas niewspółmiernie dużo wysiłku w porównaniu z efektem, który osiągnęlibyśmy.
- Podrozdział „Przykładowe modyfikacje” oraz szare ramki zawierające dodatkowe informacje (takie jak „Dopasowywanie czcionek w CSS” w tym projekcie) zostały pominięte głównie ze względu na ich długość.

Wziąwszy jednak wszystko pod uwagę, musimy przyznać, że zdecydowaną większość elementów udało się odtworzyć, a pominęliśmy naprawdę niewiele zagadnień. Ostateczną wersję utworzonego przez nas arkusza stylów przedstawia listing 13.2.

##### Listing 13.2.—Kompletny arkusz stylów

    <style type="text/css">
    body {margin: 0; padding: 0; color: black;
      background: white url(blue.gif) 80% 0 repeat-y;}
    h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%;
      margin-left: 8%;}
    div.listing pre {border: 1px solid #006; border-width: 1px 0;
      padding: 0.5em 1em; margin: 0.125em 0 1.5em;}
    div.listing h5 {margin-left: 0.5em;}
    table {border: 1px solid #006; border-width: 2px 0;
      font-size: 90%; margin-bottom: 1.5em; width: 70%;}
    th {color: #006; border-bottom: 1px solid #006; text-align: left;}
    th, td {padding: 0.125em 0.66em;}
    ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
    h1, h2, h3, h4 {font-variant: small-caps;}
    h3, h4, h5 {margin-top: 1.25em; margin-bottom: 0;}
    h1 {font-size: 300%; border-bottom: 2px solid white;
      margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}
    h2 {font-size: 200%; margin: 0 0 0.66em 10%;}
    h3 {font-size: 150%;}
    h4 {font-size: 110%;}
    h5 {font-size: 100%;}
    h5 span {color: #006; margin-right: 0.5em;}
    p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
    code, pre {font-family: "Courier New", Courier, monospace;}
    code {color: #006;}
    pre {margin-left: 10%; font-size: 80%;}
    pre b {color: maroon; font-weight: normal;}
    div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
      border: 1px solid #006; border-width: 0 1px 1px 0;
      background: #BDF;}
    div#masthead blockquote {font-size: 90%; font-style: italic;
      margin: 2em 22% 0.5em 10%;}
    div#attrib {font-size: 90%; font-style: italic;
      text-align: right; font-variant: small-caps;}
    div#previews {float: right; width: 33%; margin: 0; text-align: center;}
    div#previews img {width: 80%; margin-top: 1em;}
    ul li {list-style: outside square url(diamond.gif);
      margin-bottom: 0.5em;}
    div.note {float: right; clear: right; border-width: 0;
      width: 18%; margin: 0 1% 0 0; padding: 0;
      text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif;
      background: transparent url(blue.gif) 50% 15px repeat-x;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%;}
    div.note h5, div.note p {text-align: left;
      margin-left: 1em; margin-right: 0;}
    div.note img {height: 30px; width: 30px; margin: 0;}
    div.note h5 {margin: -5px 30px 0 1em; padding: 0;
      font-variant: normal;}
    div.web p {margin: -10px 30px 0 1em;}
    div.note code, div.caption code {font-size: 100%;}
    div.web {color: #399;}
    div.tip {color: #006;}
    div.warn, div.warn code {color: maroon;}
    hr {clear: both; visibility: hidden;}
    div.figure {float: left; width: 67%; margin: 0; padding: 0;
      text-align: right;}
    div.caption {float: right; width: 30%; margin: 0 1% 0 0;
      padding: 0 0 0 40%;
      border-top: 1px solid #006;
      voice-family: "\"}\""; voice-family:inherit;
      width: 19%; padding-left: 10%;}
    div.caption h5 {margin: 0 0.5em 0 0; padding: 0.33em 7px 0 0.5em;
      color: black; letter-spacing: 1px;
      background: #9BD url(captioncurve.gif) bottom right no-repeat;}
    div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif;
      color: #555; margin: 0; padding: 0.25em 0.5em;}
    </style>

### Przykładowe modyfikacje

Nie mamy zbyt wielu możliwości modyfikacji strony, gdy próbujemy odtworzyć układ graficzny książki, ale oto kilka propozycji, które możesz wypróbować.

1. Zmniejsz ilość miejsca poświęconego na nagłówek, nie zmieniając go jednak znacząco w porównaniu z wersją drukowaną. Nie musisz się starać, aby ramka znajdowała się w tej samej linii co obrazy podglądu, ponieważ i tak w większości przypadków nie są one wyrównane.
2. Napisz style, które odtworzą odpowiednio wygląd podrozdziału „Przykładowe modyfikacje”. Pamiętaj, na jakie kompromisy musieliśmy się zgodzić, umieszczając obrazy podglądu obok nagłówka, i przyjmij podobną postawę podczas pracy nad wyglądem tego podrozdziału.
3. Napisz style, które odtworzą szare prostokąty zawierające dodatkowe informacje — są to elementy `div`, których atrybut `class` ma wartość `aside`. Aby osiągnąć pełny efekt, konieczne będzie utworzenie dwóch obrazów, które wykorzystasz w nagłówku prostokąta. Nie masz wprawdzie możliwości umieszczenia obu obrazów w tle nagłówka, ale możesz pomyśleć nad tym, w jaki sposób zmienić kod HTML tak, aby dwa obrazy znalazły się w odpowiednim miejscu bez użycia elementu `img` w HTML, a przy wykorzystaniu CSS.