CSS cwiczenia.pdf

(410 KB) Pobierz
CSS. Æwiczenia
Autor: Maria Sokó³
ISBN: 83-246-1097-9
Format: A5, stron: 152
Przyk³ady na ftp: 797 kB
Usprawnij proces projektowania stron WWW
•
Jak osadzaæ style w dokumentach XHTML?
•
W jaki sposób formatowaæ tekst, tabele i ³¹cza?
•
Jak pozycjonowaæ elementy strony WWW?
U¿ytkownicy sieci przegl¹daj¹ witryny WWW nie tylko na monitorach komputerowych.
Czêsto tak¿e strony internetowe wyœwietlane s¹ na telefonach komórkowych,
urz¹dzeniach PDA i terminalach Blackberry. Programy u³atwiaj¹ce osobom
niepe³nosprawnym korzystanie z sieci odczytuj¹ treœci witryn WWW za pomoc¹
syntezatorów mowy. Jednak aby witryna WWW dzia³a³a prawid³owo w po³¹czeniu
z ró¿nymi urz¹dzeniami wyœwietlaj¹cymi j¹, niezbêdne jest zaprojektowanie jej tak,
aby elementy odpowiedzialne za jej wygl¹d by³y odseparowane od treœci. W tym celu
konsorcjum W3C zaproponowa³o w roku 1996 technologiê kaskadowych arkuszy
stylów – CSS. Dziêki stylom projektanci witryn mog¹ zdefiniowaæ kolorystykê,
liternictwo i inne aspekty wygl¹du strony niezale¿nie od jej treœci.
Ksi¹¿ka
„CSS.
Æwiczenia” to wprowadzenie do technologii kaskadowych arkuszy
stylów. Czytaj¹c j¹ i wykonuj¹c zawarte w niej æwiczenia nauczysz siê korzystaæ
ze stylów w projektach witryn WWW. Poznasz sposoby ³¹czenia opisów stylów
z dokumentami XHTML, zasady definiowania stylów dla tekstu i grafiki, jednostki miar
stosowane w stylach i metody pozycjonowania elementów na stronie. Dowiesz siê,
jak okreœliæ krój i rozmiar czcionki, wyró¿niæ hiper³¹cza, sformatowaæ tabele i listy
oraz przygotowaæ uk³ad strony WWW oparty na warstwach.
•
Najwa¿niejsze atrybuty dokumentów XHTML
•
Rodzaje stylów CSS
•
Jednostki miary i kolory w stylach
•
Formatowanie tekstu
•
Pozycjonowanie elementów strony
•
Definiowanie wygl¹du hiper³¹czy
•
Projektowanie uk³adu strony w oparciu o style CSS
Wydawnictwo Helion
ul. Koœciuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Do³¹cz do grona profesjonalistów stosuj¹cych w pracy najnowsze technologie
Spis treści
Rozdział 1. XHTML a CSS
Kod XHTML
Znaczniki
Podstawowe wymagania dotyczące kodu XHTML
Atrybut id
Atrybut lang
Obowiązkowe elementy XHTML
Przykładowy dokument XHTML
Kodowanie polskich znaków diakrytycznych
Wyświetlanie strony w przeglądarce
5
5
6
7
11
11
12
12
15
19
Rozdział 2. Kaskadowe arkusze stylów — podstawowe definicje
i zasady
Zasady ogólne
Typy kaskadowych arkuszy stylów
Grupowanie kodu
Klasy stylu
Zewnętrzny arkusz stylów zawierający klasy
21
22
23
31
32
37
Rozdział 3. Skalowalność arkusza stylów
Jednostki miar CSS
Jednostka em
Skalowanie obszaru
Skalowanie wcięć
Skalowanie obrazów
43
43
45
46
48
48
4
CSS •
Ć
wiczenia
Rozdział 4. Kolory
Atrybuty definiujące kolor
53
55
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
61
61
69
77
82
84
92
Rozdział 6. Model pudełkowy
Obramowania
Style pudełek
Pozycjonowanie
Warstwy
Przepełnienie
Obrazy
97
99
102
107
121
126
129
Rozdział 7. Odnośniki
Zmiana wyglądu odnośników
133
134
Dodatek A
Dodatek B
Znaczniki i elementy
Oznaczenia i kody kolorów
143
151
2
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:
22
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.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin