Kod HTML strony z rys. 1 składa się z prostych znaczników, tj.{html}

{/html}, {html}

{/html}, {html}

{/html}. Są też dwa odnośniki. Jeden wewnątrz akapitu, drugi luźno umieszczony w kodzie strony. Utwórzmy teraz styl CSS (przyklad_2.css). Umieścimy w nim taki oto kod:

BODY { font-family: Verdana; }

W CSS dziedziczenie to jedna z podstawowych reguł. Kod HTML tworzy pewną hierarchię. Na jej górze jest znacznik {html}{/html}, nieco niżej {html}{/html}, a na dalszym planie znaczniki {html}

{/html}, {html}

{/html}, {html}{/html}, {html}{/html} itd.

Jeśli ustalimy styl dla znacznika {html}{/html}, będzie on obowiązywał we wszystkich elementach znajdujących się niżej w hierarchii. Lecz i od tej zasady są wyjątki, bo ustalony domyślny rozmiar tekstu dla sekcji {html}{/html} wcale nie obejmie nagłówków {html}

{/html}, {html}

{/html}, które mają własny rozmiar.

W projektowaniu stron WWW spotykamy się z problemem kompatybilności. Każdy użytkownik może mieć inną rozdzielczość ekranu, używać innego systemu operacyjnego, innej przeglądarki. Zmiennych jest więc bardzo dużo, a przecież nie będziemy tworzyli stylów dla każdej przeglądarki osobno.

Czcionka, którą wybraliśmy wcale nie musi występować na komputerze użytkownika. Stosuje się nazwy, które określają rodziny, do których może należeć czcionka.

Wyróżniamy takie rodziny:

• sans-serif (np. Arial, Verdana, Helvetica, Switzerland),
• serif (np. Times New Roman, Garamond),
• monospace (o stałej szerokości znaków, np. Courier New, Monospace),
• cursive (np. Comic Sans MS),
• fantasy (np. Book Antiqua).

Na stronach WWW stosuje się czcionki bezszeryfowe, bo łatwiej czyta się je z ekranu. Jak ustawić warunek: jeżeli nie ma czcionki, to wyświetl czcionkę z rodziny x?

BODY { font-family: Verdana, Helvetica, Arial, sans-serif; }

Z praktyki wynika, że lepiej stworzyć dłuższą listę nazw czcionek, niż polegać na nazwie rodziny. Określając czcionkę wieloczłonową, korzystamy z cudzysłowu:

font-family: \"Times New Roman\";

Jednostki w CSS

W HTML-u mieliśmy do czynienia w zasadzie z dwiema jednostkami. Mogliśmy zadeklarować, że dany element ma mieć x pikseli lub że ma stanowić x% czegoś. W CSS sprawa się komplikuje, bo jednostek przybywa, ale za to zyskujemy możliwość tworzenia bardziej kompatybilnych stron.

Piksele. Piksele to najpopularniejsza jednostka stosowana przez webmasterów, co wcale nie oznacza, że najlepsza. O ile łatwo jest stworzyć stronę, która będzie wyglądała tak samo w każdej przeglądarce, o tyle zupełnie nie będzie możliwe jej skalowanie (zakładka: Widok | Rozmiar tekstu). To utrudnienie dla niedowidzących i problem dla drukujących strony WWW (nie mogą zmniejszyć rozmiaru strony).

Punkt i pica. Jednostki typowo drukarskie (poligraficzne). Punkt odpowiada 1/72 cala, natomiast pica 1/6 cala. Czasami webmasterzy stosują tę jednostkę do określania rozmiaru czcionki na stronach WWW. Jest to jednak praktyka niepoprawna. Punkty i pice możemy wykorzystywać w arkuszach stylów przeznaczonych dla stron do wydruku.

Emy. 1 em to wysokość litery M przy domyślnym rozmiarze czcionki w systemie operacyjnym. Jest to bardzo dobra jednostka do definiowania rozmiaru czcionki, bo skalowalna.

Procenty. Określenie rozmiaru czcionki na 100% oznacza wyświetlenie jej w domyślnym rozmiarze. Też niezła, bo skalowalna.

Bezwzględne rozmiary czcionek

W CSS określono typowe rozmiary czcionek, posługując się słowami kluczowymi. Nie jest to najlepsza metoda określania wielkości. W rzeczywistości bezwzględne wartości nie są bezwzględne, bo każda przeglądarka nieco inaczej wyświetla poszczególne rozmiary.

Bezwzględne rozmiary czcionek: xx-small, x-small, small, medium, large, x-large, xx-large.

Wyrównywanie tekstu

Wprowadzimy trochę zmian na stronę – wyrównamy do obu stron (wyjustujemy) tekst umieszczony w akapitach. Do arkusza stylów dodamy linijkę:

P { text-align: justify; }

Tekst możemy wyrównywać:

• do lewej (text-align: left;),
• wyśrodkować (text-align: center;),
• do prawej (text-align: right;),
• wyjustować (text-align: justify;).

Styl zostanie zastosowany do wszystkich akapitów. Jeżeli pierwszy z nich, czyli nazwisko i data, nazwiemy \”author\”, wstęp \”intro\”, a treść \”text\”, to możemy ustalić dla nich odmienne style. Powstanie kod HTML:

Jan Kowalski, 01 02 2006
Lorem ipsum[...]
Nagłówek H2
Vestibulum neque[...]

Chcemy, by obydwa akapity tekstu były koloru niebieskiego, ale pierwszy był wyśrodkowany, a drugi wyjustowany. Zmienimy też rozmiar czcionek na mniejszy. Akapit \”autor\” pozostanie czarny:

BODY { font-family: Verdana, sans-serif;}
P { color: blue; font-size: 0.8em; }
P.intro { text-align: center; }
P.text { text-align: justify; }
P.author { color: black; }

Na tym przykładzie bardzo dobrze widać, jak działa dziedziczenie w CSS. Najpierw ustaliliśmy domyślny kolor dla wszystkich akapitów – niebieski.

Aby akapit \”autor\” nie został wyświetlony w tym kolorze, musieliśmy przywrócić czarny kolor czcionki. Warto zwrócić też uwagę, że odnośnik powrotu nie zmienił rozmiaru, pozostając przy domyślnym.

Wszystko dlatego, że nie znajduje się on wewnątrz żadnego akapitu, więc obowiązują go ustalenia z BODY, gdzie nie określono żadnego domyślnego koloru czcionki.

Odstępy między wierszami

Im więcej drobnego tekstu, tym trudniej podążać za wierszami przy czytaniu. W typografii stosuje się wtedy większe odstępy między wierszami. Tekst wygląda bardziej profesjonalnie, lecz zajmuje więcej miejsca. Dodajmy więc kolejną linijkę do naszych stylów:

P.text, P.intro { line-height: 1.5; }

Odstępy między słowami i znakami

Aby zwiększyć odstępy pomiędzy poszczególnymi znakami lub słowami w tekście, możemy skorzystać z właściwości:

• word-spacing – wyraża odległość pomiędzy słowami,
• letter-spacing – definiuje odstępy pomiędzy znakami w tekście.

W obu przypadkach stosujmy jednostkę em.

Pogrubianie i kursywa

Tworząc strony w oparciu o arkusze stylów zamiast znaczników {html}{/html} i {html}{/html} używamy znacznika {html}{/html}, wzbogaconego o nazwę klasy, np. {html}{/html}.

W jej deklaracji możemy skorzystać z dwóch właściwości:

• font-weight, która pozwoli pogrubić tekst, i to stopniując pogrubienie,
• font-style, która utworzy kursywę.

Właściwość font-weight może być określona relatywnie bądź absolutnie. Relatywne wartości to \”bolder\” oraz \”lighter\”, które czynią nasz tekst \”bardziej wytłuszczonym\” lub \”mniej wytłuszczonym\”. Istnieje 9-stopniowa skala od 100 do 900, której możemy używać jako wartości. Do uzyskania efektu pogrubienia najbezpieczniej używać najprostszej wartości:

.pogrub { font-weight: bold; }

Do utworzenia kursywy wykorzystuje się właściwość font-style. Może ona przyjąć wartości: normal, oblique, italic.

W zasadzie normal i oblique są traktowane przez przeglądarki jako tożsame. Interesująca nas kursywa zostanie więc zaimplementowana następująco:

.kursywa { font-style: italic; }

Wcięcia

Większość dokumentów drukowanych rozpoczyna się od wcięcia, widocznego przy każdym akapicie. Uzupełnijmy zatem naszą linijkę stylem dla klasy P.text:

P.text { text-align: justify; text-indent: 5em;  }

Transformacje tekstu

Jeśli chcemy w tekście zamienić wszystkie litery z małych na duże, wykonujemy to następująco:

.duzelitery { text-transform: uppercase; }

Inne wartości text-transform:

• lowercase – zamienia wszystkie litery na małe,
• capitalize – wszystkie słowa rozpoczynają się od dużej litery.

Tło

Zajmiemy się teraz nagłówkami. Nie wyglądają one zachęcająco. Zmienimy więc ich rozmiar i nadamy im jasnoszare tło.
Musimy dodać następujące linie kodu:

H1 { font-size: 1.5em; }
H2 { font-size: 1.1em; }
H1, H2 { background-color: #F0F0F0; }

Za nadanie koloru tła odpowiada atrybut background-color.

Odnośniki

Standardowa obsługa odnośników przez przeglądarki nie wygląda dobrze. W CSS z łatwością zmienimy wszystkie właściwości związane z odnośnikami. Sprawimy, by wszystkie odnośniki miały kolor jaśniejszy od pozostałej części tekstu, a po naprowadzeniu wskaźnika myszki na odnośnik znikało charakterystyczne podkreślenie łącza. Gdy użytkownik kliknie dany odnośnik, czyli odwiedzi daną stronę, ma on zamienić się na jeszcze jaśniejszy odcień niebieskiego:

A:Link { color: #4B8BFF; }
A:Hover, A:Active { text-decoration: none; }
A:Visited { color: #98BCFE; }

Korzystamy tu z pseudoklas:

• link – strona nieodwiedzona,
• hover – kursor nad łączem,
• active – kliknięto łącze,
• visited – odwiedzono stronę.

Kluczową rolę odgrywa właściwość odpowiedzialna za ozdabianie tekstu.
text-decoration może przyjmować wartości:

• underline – podkreśla wskazany tekst (lepiej nie stosować, jeśli nie jest to odnośnik),
• overline – tworzy linię nad tekstem,
• line-through – przekreśla tekst,
• none – usuwa wszystkie zadeklarowane ozdobniki.

Powyższe deklaracje można składać. By wszystkie odnośniki były podkreślone i nadkreślone, zmieniamy deklarację A na:

A { font-size: 12px; text-decoration: underline overline; }

Stosując tę samą właściwość możemy podkreślić nasze nagłówki.

Listy

Style pozwalają też na zamianę domyślnego punktora listy. Wykorzystujemy do tego celu właściwość list-style-type.

Może ona przyjąć następujące wartości:

• disc – koło,
• circle – okrąg,
• square kwadrat,
• decimal-leading-zero – 01, 02, 03,
• decimal – 1, 2, 3,
• lower-roman – i, ii, iii,
• upper-roman – I, II, III,
• lower-alpha – a, b, c,
• upper-alpha – A, B, C,
• none – brak punktora.

Chcąc zmienić punktor na kwadratowy, tworzymy następujący styl:

UL { list-style-type: square; }

Możemy też całkowicie pozbawić listę punktorów, wybierając wartość \”none\”, albo załadować własny punktor w postaci grafiki:

UL { list-style-image: url(\'bullet.gif\'); }

Może cię także zainteresować

Czy Google Instant zwiększyło koszt reklamy?

HTML5 – co może pójść nie tak?

6 sposobów zdobywania wiedzy na temat użytkowników strony

10 błędów związanych z logo strony

Sztuczki z ExtJS (część I)