css.-cwiczenia ebook.pdf

CSS• Ćwiczenia

Rozdział 4.

Kolory

Atrybuty definiujące kolor

Rozdział 5.

Tekst

Atrybuty stylu odnoszące się do czcionki

Rozmieszczanie tekstu w pionie i w poziomie

Marginesy i wcięcia

Marginesy wewnętrzne — padding

Formatowanie fragmentów tekstu

Trójkolumnowa strona WWW utworzona

za pomocą formatowania CSS

Rozdział 6.

Model pudełkowy

Obramowania

Style pudełek

102

Pozycjonowanie

107

Warstwy

121

Przepełnienie

126

Obrazy

129

Rozdział 7.

Odnośniki

133

Zmiana wyglądu odnośników

134

Dodatek A

Znaczniki i elementy

143

Dodatek B

Oznaczenia i kody kolorów

151

Kaskadowe arkusze stylów

— podstawowe

definicje i zasady

Kaskadowe arkusze stylów (ang. Cascading Style Sheets — CSS ),

zalecana przez W3C metoda stosowania stylów, to narzędzie,

które pozwoli Ci zapanować nad układem stron i serwisów

WWW. Bez arkuszy CSS nie ma nowoczesnych stron WWW. Nie tylko

jednak o standardy tu chodzi — kaskadowe arkusze stylów to także

ogromna oszczędność czasu, o czym bez wątpienia przekonasz się,

wprowadzając w kodzie swoich stron różne poprawki.

Dlaczego kaskadowe arkusze stylu nazywają się „kaskadowymi”?

Wynika to ze sposobu ich działania; prawie każdy element podrzędny

(a więc na przykład element <span> zawarty wewnątrz elementu <p> )

dziedziczy atrybuty stylu elementu nadrzędnego, a wybrane z nich

może samodzielnie nadpisywać. W efekcie powstaje swoista kaskada

definicji stylu, której wyższe stopnie narzucają wygląd stopniom niż-

szym, a te z kolei mogą anulować wybrane elementy definicji i zastą-

pić je własnymi, które z kolei spróbują narzucić własnym elementom

podrzędnym.

W przypadku występowania różnych arkuszy stylów na jednej stronie

stopień ich ważności rośnie w następującej kolejności:

CSS• Ćwiczenia

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).

Arkusze CSS są obsługiwane — w mniej lub bardziej zgodny ze stan-

dardem sposób — przez wszystkie nowoczesne, graficzne przeglądarki

WWW (Internet Explorer, Opera oraz Mozilla Firefox), przy czym za

implementację wzorcową można uważać przeglądarkę Firefox.

Zasady ogólne

1. Twórz uniwersalne arkusze stylów — tak aby można było z nich

korzystać w różnych dokumentach.

2. Pamiętaj o skalowalności dokumentów — ponieważ dokumenty

będą wyświetlane w dynamicznych środowiskach i na różnym

sprzęcie, szczególnie istotne jest wybranie odpowiednich

jednostek miary — jednostki względne powinny mieć przewagę

nad absolutnymi (dotyczy to na przykład szerokości marginesów,

wielkości czcionki itp.). Więcej informacji na ten temat

znajdziesz w rozdziale 3.

3. Licz się z czytelnikiem — niektórzy czytelnicy będą korzystali

z własnych ustawień. Twoje arkusze stylów powinny to brać

pod uwagę. W jaki sposób? Odpowiednie definicje stylów powinny

być umieszczane we właściwych miejscach. Na przykład te,

które są stosowane do całego dokumentu, umieszczaj w sekcji

<body> — i tylko tam. W ten sposób czytelnik bez trudu

wprowadzi odpowiednie zmiany.

4. Testuj arkusze stylów — testuj je w kilku przeglądarkach,

aby nie sprawić swoim czytelnikom niemiłej niespodzianki.

Jeśli korzystasz z właściwości CSS, która nie jest obsługiwana

powszechnie, upewnij się, że strona wygląda względnie

poprawnie nawet w mniej zaawansowanych przeglądarkach.

Rozdział 2. • Kaskadowe arkusze stylów

5. Uwzględniaj struktury dokumentu — arkusze stylów umożliwiają

oddzielenie wyglądu strony od jej struktury logicznej. Zawsze

zaczynaj od zapisania kodu strony standardowymi znacznikami

nagłówków, akapitów tekstu i tabel, a dopiero później nakładaj

na gotowy dokument style modyfikujące jego wygląd.

6. Dostarczaj nazwy rodzin czcionek — pamiętaj, że dokument

będzie wyświetlany na różnych komputerach, z różnym

„wyposażeniem” w czcionki. Podanie nazwy ich rodziny pozwala

na zachowanie charakteru strony. Unikaj też „egzotycznych”

krojów pisma, jest bowiem wysoce prawdopodobne, że może

ich brakować. Najlepiej ograniczać się do czcionek dostępnych

standardowo w systemach operacyjnych Windows i Linux.

7. Zachowaj umiar w stosowaniu ujemnych marginesów — ujemne

marginesy pozwalają uzyskać ciekawe efekty, ale nie wszystkie

przeglądarki radzą sobie z nimi. Jeśli stosujesz takie marginesy,

testuj stronę w różnych przeglądarkach.

8. Upraszczaj formy — konstruując arkusz stylów, zachowaj umiar.

Możesz użyć wielu różnych krojów pisma i zapełnić stronę

kolorami, lecz nie wpłynie to pozytywnie na przekaz informacji.

Typy kaskadowych arkuszy stylów

Kiedyś, w epoce poprzedzającej wprowadzenie arkuszy, wygląd strony

zależał od użytej przeglądarki. To ona decydowała o sposobie roz-

mieszczenia zawartości dokumentu. Arkusze stylów dają twórcy ści-

słą kontrolę nad wyglądem strony. Pozwalają także oddzielić zawartość

(treść i konstrukcję strony) od wyglądu i formatowania. Ułatwia to

ewentualne późniejsze zmiany.

Istnieją trzy odmiany arkuszy: osadzone , wpisane i łączone .

Styl wpisany

Style wpisane są to atrybuty stylu wprowadzane w ramach atrybutu

style dowolnego, interesującego Cię znacznika HTML. Zaletą tej meto-

dy jest jej bezpośredniość — możesz zmienić wygląd dowolnego, naj-

mniejszego choćby elementu strony całkowicie niezależnie od wyglądu

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: