CSS ćwiczenia - Maria Sokół.pdf

(6788 KB) Pobierz
Jak
osadzać
style
w
dokumentach
XHTML?
Jak
pozycjonować
elementy
strony
WWW?
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
5
5
6
7
Kodowanie
polskich
znaków
diakrytycznych
Wyświetlanie
strony
w
przeglądarce
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
Rozdzi
at
3.
SkalowaIność
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
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
Pozycjonowanie
Warstwy
Przepełnienie
Obrazy
Rozdział
7.
Odnośniki
Zmiana
wyglądu
odnośników
Dodatek
A
Znaczniki
i
elementy
Dodatek
B
Oznaczenia
i
kody
kolorów
XHTML
a
CSS
Kod
XHTML
Zanim
zaczniemy
umieszczać
w
kodzie
Strony
WWW
defini­
cje
stylów
CSS,
przypomnijmy
sobie,
co
to
jest
język
XHTML
i
jak
wygląda
podstawowa
struktura
dokumentu.
XHTML
(ang.
extensible
HyperText
Markup
Language)
to
rozszerzalny
język
hipertekstowego
znakowania,
niemal
identyczny
z
HTML
4.01.
XHTML
ma
prostszą
oraz
bardziej
przejrzystą
formę
niż
HTML
i
jest
aplikacją
języka
XML
(ang.
extensible
Markup
Language,
język
ela­
stycznego
znakowania).
Od
26
stycznia
2000
roku
XHTML
1.0
jest
oficjalnym
standardem
sieciowym.
Rekomendacja
W3C
oznacza,
że
specyfikacja
jest
stabilna
i
przetestowana.
W
sieci
umieszczanych
jest
coraz
więcej
stron
WWW,
rośnie
też
liczba
źle
zrobionych
stron
stron
napisanych
niepopraw­
nie.
Taki
kod
HTML:
<html>
<head>
<title>Błędny
kod
<body>
HTML
!</title>
<hl>TU
JEST
</body>
EWIDENTNY
BŁĄD!
będzie
wyświetlany
poprawnie
w
większości
przeglądarek,
mimo
że
zawiera
błąd
składni
brakuje
w
nim
znacznika
zamykającego
</hl>.
6
CSS
Ćwiczeni‘a
takich
błędów.
Dlatego
połączenie
języków
XML
i
HTML
daje
nadzieję
na
stworzenie
dobrego
i
stabilnego
narzędzia.
Dokumenty
XHTML
interpretowane
przez
wszystkie
urządzenia
radzące
sobie
z
językiem
XML.
XHTML
pozwala
tworzyć
dokumenty
o
poprawnej
strukturze,
które
działają
we
wszystkich
przeglądarkach
i
kompatybilne
wstecznie.
XML
nie
toleruje
XHTML
to
kolejna
generacja
języka
HTML,
ale
niewątpliwie
trochę
czasu
upłynie,
zanim
ludzie
i
urządzenia
dostosują
się
do
nowej
wersji.
Należy
jednak
pamiętać,
że
między
HTML
4.01
a
XHTML
nie
ma
wielu
różnic,
nie
będzie
więc
to
proces
długotrwały.
Podstawowe
wymagania
to
kod
pisany
małymi
literami
znaczników
chyba
możesz
je
spełnić.
i
zamykanie
Znaczniki
Jeśli
wyświetlisz
kod
źródłowy
strony
WWW,
zobaczysz,
że
zawiera
szereg
poleceń
języka
XHTML
umieszczonych
w
nawiasach
kątowych.
Twory
te
noszą
nazwę
znaczników.
Znaczniki
informują
przeglądarkę,
jak
wyświetlić
stronę
WWW
na
ekranie.
Znaczniki
stosowane
w
parach:
<znacznik
otwierający>
</znacznik
zamykającym
na
przykład:
<html>
</html>
Zwróć
uwagę
na
ukośnik
(/),
który
odróżnia
znacznik
zamykający
od
otwierającego.
Taką
parę
znaczników
nazywa
się
elementem.
W
przypadku
elementów
takich
jak
na
przykład
img,
br
lub
hr
a
więc
tak
zwanych
elementów
pustych
lub
samozamykających
się
ko­
nieczne
jest
dodanie
znacznika
zamykającego
lub
zakończenie
znacz
­
nika
otwierającego
znakami
/>:
<imp<>iiroq>
lub:
<img
/>
Znaczniki,
oprócz
nazwy
znacznika,
mogą
zawierać
w
nawiasie
ostro-
kątnym
dodatkowe
informacje
tak
zwane
atrybuty:
<(azvia
atrybutt“"wartośćr
atryUut2="zaatoćć2">........
</nazwa>
<nazwa
rtrybutl-Wartość!'
atrybut2-"wartość2"
/>
Zgłoś jeśli naruszono regulamin