CSS_cwiczenia_cwcss.pdf

CSS. Ěwiczenia

Autor: Maria SokĀ

ISBN: 83-246-1097-9

Format: A5, stron: 152

PrzykĀady na ftp: 797 kB

Wydawnictwo Helion

ul. Koľciuszki 1c

44-100 Gliwice

tel. 032 230 98 63

e-mail: helion@helion.pl

Usprawnij proces projektowania stron WWW

¤ Jak osadzaě style w dokumentach XHTML?

¤ W jaki sposb 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 komrkowych,

urzĴdzeniach PDA i terminalach Blackberry. Programy uĀatwiajĴce osobom

niepeĀnosprawnym korzystanie z sieci odczytujĴ treľci witryn WWW za pomocĴ

syntezatorw 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

stylw Ï 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

stylw. CzytajĴc jĴ i wykonujĴc zawarte w niej ěwiczenia nauczysz siķ korzystaě

ze stylw w projektach witryn WWW. Poznasz sposoby ĀĴczenia opisw stylw

z dokumentami XHTML, zasady definiowania stylw dla tekstu i grafiki, jednostki miar

stosowane w stylach i metody pozycjonowania elementw na stronie. Dowiesz siķ,

jak okreľliě krj i rozmiar czcionki, wyrŃniě hiperĀĴcza, sformatowaě tabele i listy

oraz przygotowaě ukĀad strony WWW oparty na warstwach.

¤ NajwaŃniejsze atrybuty dokumentw XHTML

¤ Rodzaje stylw CSS

¤ Jednostki miary i kolory w stylach

¤ Formatowanie tekstu

¤ Pozycjonowanie elementw strony

¤ Definiowanie wyglĴdu hiperĀĴczy

¤ Projektowanie ukĀadu strony w oparciu o style CSS

DoĀĴcz do grona profesjonalistw 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

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

Rozdział 3. Skalowalność arkusza stylów

Jednostki miar CSS

Jednostka em

Skalowanie obszaru

Skalowanie wcięć

Skalowanie obrazów

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.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: