Ćwiczenie 3
Temat:
Tworzenie i praca
z arkuszami stylów
CSS
Cel ćwiczenia:
Celem ćwiczenia jest zapoznanie studenta z możliwościami formatowania
wyglądu strony internetowej za pomocą kaskadowych arkuszy stylów CSS.
Student zapozna się z metodami osadzania stylów w dokumencie, definiowania
stylów dla poszczególnych selektorów, selektorów pseudoklas oraz
pseudoelementów.
Celem tego ćwiczenie nie jest testowanie poszczególnych właściwości
wyglądu stron internetowych, a raczej przedstawienie sposób pracy z
arkuszami stylów.
Kaskadowe arkusze stylów CSS - Wstęp
Kaskadowe arkusze stylów (CSS z ang. Cascading Style Sheets) to rodzaj języka skryptowego,
interpretowanego po stronie przeglądarki klienta, służącego do opisu wyglądu
poszczególnych elementów stron internetowych. CSS powstał z potrzeby rozszerzenia
możliwości definiowania wyglądu stron internetowych. Pozwolił oddzielić aspekt treści
strony od kwestii jej formatowania. Zaletą styli CSS jest fakt, że do raz zdefiniowanego stylu
dla danego elementu strony można się odwoływać wielokrotnie bez konieczności
wielokrotnego powtarzania dyrektyw formatowanie. Arkusz składa się z reguł definiujących
styl dla danego elementu strony internetowej (np. akapitu, tabeli itd., pola formularza).
Reguła składa się z selektora oraz deklaracji stylu. Natomiast deklaracja stylu składa się z
poszczególnych właściwości i ich wartości.
selektor{
właściwość_A: wartość1;
właściwość_B: wartość2;
}
Selektorem może być każdy znacznik HTML. Przykładem definicji właściwości znacznika h1
oraz h2 jest zapis:
h1{
color: red;
font-size: 34pt;
}
h2{
color: blue;
font-size: 30pt;
}
Osadzanie stylów CSS
Style mogą zostać osadzone w dokumencie za pomocą trzech metod:
" Poprzez osadzenie łącza do zewnętrznego pliku stylów, za pomocą znacznika link,
który musi znajdować się w sekcji head dokumentu, np.

Tworzenie i praca z arkuszami stylów CSS 30
" Poprzez definicję stylu w nagłówku dokumentu, za pomocą znacznika style. Pamiętać
należy, że definicja stylu musi znajdować się w sekcji head dokumentu, np.:

" Poprzez bezpośrednią definicję stylu w parametrze  style znacznika którego styl ma
dotyczyć. Pamiętać należy, że kolejne właściwości należy oddzielać znakiem  ; np.:

Tytuł sekcji

Kaskadowa struktura stylów CSS  Kolejność interpretacji
Nazwa  kaskadowe arkusze stylów wywodzi się z faktu, iż style interpretowane są
hierarchicznie. Na pierwszym miejscu brany jest pod uwagę styl przeglądarki internetowej.
Styl ten został zdefiniowany przez autorów (programistów) tworzących przeglądarkę, i to oni
zadecydowali, jaki rozmiar, kolor, czy wyrównanie domyśle posiada tekst zawarty w sekcji
jakiegoś znacznika, jeśli nie ma jawnie zdefiniowanego wyglądu. Następnie pod uwagę brany
jest styl zdefiniowany w zewnętrznym pliku CSS (za pomocą znacznika link). W następnej
kolejności pod uwagę brany jest styl zdefiniowany w nagłówku strony, a na końcu styl
zdefiniowany w parametrze style konkretnego znacznika. Schemat interpretacji stylów
przedstawia poniższy rysunek:
Schemat kolejności interpretacji stylów strony internetowej.
Tworzenie i praca z arkuszami stylów CSS 31
Oznacza to, iż zawsze pierwszeństwo ma definicja, która jest  najbliższa znacznikowi
(interpretowana jako ostatnia).
Zadanie 1. Dołączanie styli do strony  zasady pierwszeństwa
Celem ćwiczenia jest dołączenie do strony internetowej stylów CSS za pomocą trzech
możliwych metod. Potrzebne do wykonania ćwiczenia właściwości i ich możliwe wartości
znalez
ć można w załączniku 1 do tego ćwiczenia. W celu realizacji zadania postępuj wg
poniższych zaleceń:
1. Stworzyć prostą stronę internetową, zawierającą znaczniki:
" Div (stworzyć dwa osobne akapity tekstu objęte znacznikami div)
" H1
" H2
" TD (wykonać prostą tabelę 4x4)
2. Zdefiniować style:
2.1. W zewnętrznym pliku tekstowym o nazwie styl_01.css. Plik za pomocą znacznika link
dołączyć do strony internetowej. W pliku styli zdefiniować wygląd znaczników :
" DIV:
o Kolor tekstu: czerwony
o Rozmiar czcionki: 32
" H1
o Kolor tekstu: niebieski
o Rozmiar czcionki: 32
" BODY
o Zdefiniować obrazek tła, tak aby znajdował się w prawym dolnym
rogu strony, nie powtarzał się na stronie oraz aby nie przewijał się
razem ze stroną lecz znajdował się zawsze w tym samym miejscu
mimo, że strona będzie się przewijała.
2.2. W nagłówku dokumentu HTML zdefiniować styl dla znaczników:
" DIV
o Kolor tekstu: niebieski
Tworzenie i praca z arkuszami stylów CSS 32
o Rozmiar czcionki: 22
" H2
o Kolor tekstu: zielony
o Rozmiar czcionki: 22
" TD
o Wyrównanie tekstu pionowe: do środka
o Wyrównanie tekstu poziome: do lewej
o Wysokość komórki: 100px
o Szerokość komórki: 100px
2.3. W jednym ze znaczników DIV, stworzyć parametr STYLE, a następnie zdefiniować w
nim kolor tekstu na czerwony, oraz rozmiar tekstu na 15pt.
3. Sprawdzić w przeglądarce efekt działania definicji stylów. Zwrócić szczególną uwagę na
znaczniki DIV który definiowany był w każdym z możliwych sposobów. Jakie
właściwości przyjął ostatecznie tekst objęty tym znacznikiem ?
Grupy i rodziny selektorów
Zbiorowe definiowanie stylów może być zrealizowane dla grup selektorów lub dla rodzin
selektorów. W celu zdefiniowania wyglądu dla więcej niż jednego selektora wystarczy
wypisać nazwy selektorów których styl ma dotyczyć rozdzielone znakiem przecinka: np.:
h1, h2, div, p
{
color: Black;
}
W powyższym przykładzie zdefiniowany został kolor tekstu dla grupy znaczników. Oczywiście
zastosowane będą tylko właściwości które odnoszą się do danego znacznika. Przykładowo,
grupując znacznik rysunku (img) i komórki (td) należy mieć świadomość, że niektóre
właściwości zadziałają tylko dla komórki, a niektóre tylko dla rysunku.
Tworzenie i praca z arkuszami stylów CSS 33
Definicja stylu może być także zależna od miejsca, gdzie znajduje się formatowany znacznik
(w jakiej zależności rodzinnej występuje). Wyróżnia się trzy rodzaje zależności:
" Selektor potomka, np.: h1 i { color: green }
Powyższa definicja dotyczy znacznika ... . Tekst zawarty w tym znaczniku
będzie koloru zielonego, tylko wtedy, gdy znajduje się pomiędzy znacznikami

...

, ale niekoniecznie bezpośrednio, może znajdować się dodatkowo w innym
znaczniku, jednak nadal jest potomnym dla znacznika

" Selektor dziecka, np.: p > b { color: red }
Powyższa definicja dotyczy znacznika ... . Tekst zawarty w tym znaczniku
będzie koloru czerwonego, tylko wtedy, gdy znajduje się bezpośrednio pomiędzy
znacznikami

...

, nie może znajdować się w innym znaczniku.
" Selektor braci, np.: i + b { color: blue }
Powyższa definicja dotyczy znacznika ... . Tekst zawarty w tym znaczniku
będzie koloru niebieskiego, tylko wtedy, gdy występuje bezpośrednio po znacznikach
... , nie może znajdować się dodatkowo w innym znaczniku, .
Zadanie 2. Grupy i rodziny selektorów.
Przetestować grupowanie oraz zależności rodzinne selektorów:
1. Zdefiniować wyrównanie tekstu do lewej strony dla grupy znaczników: div, p oraz td.
2. Stworzyć definicję stylu dla znacznika (kolor tekstu: czerwony, rozmiar czcionki:
20pt), który zastosowany zostanie tylko wtedy, gdy znacznik znajdzie się w znaczniku

3. Stworzyć definicję stylu dla znacznika (kolor tekstu: zielony), który zastosowany
zostanie tylko wtedy, gdy znacznik znajdzie się w znaczniku

lub w kolejnych
potomnych znacznikach.
4. Stworzyć definicję stylu dla znacznika (kolor tekstu: niebieski), który zastosowany
zostanie tylko wtedy, gdy znacznik znajdzie się bezpośrednio po znaczniku .
5. Stworzyć stronę HTML testującą zależności zdefiniowanych stylów.
Tworzenie i praca z arkuszami stylów CSS 34
Selektory atrybutów (parametrów) znacznika
Większość znaczników w języku HTML może posiadać parametry takie jak np. wyrównanie w
komórce czy szerokość obrazka . Możliwe jest
określenie stylu dla danego znacznika w zależności od jego parametrów. Nadanie stylu
danemu znacznikowi uzależnić można od sytuacji, w której:
" Parametr istnieje, np.: td[width]{text-align: center}
Jeśli komórka ma określony parametr szerokości (jego wartość jest nieistotna) styl
zostanie zastosowany
" Parametr istnieje i wynosi, np.: div[align="left"]{color:blue}
Jeśli akapit ma określony parametr wyrównania tekstu i jest to wyrównanie  do
lewej to styl zostanie zastosowany
" Parametr istnieje, a jego wartość zawiera określony wyraz, np.:
img[Alt~="Fotografia"]{width: 450px}
Jeśli znacznik obrazka posiada parametr  alt a jego częścią jest wyraz  Fotografia to
styl zostanie zastosowany
" Parametr istnieje, a jego wartość rozpoczyna się od określonego wyrazu, np.:
img[Alt|="Fotografia"]{height: 300px; width: 350}
Jeśli znacznik obrazka posiada parametr  alt a jego wartość rozpoczyna się od
wyrazu  Fotografia to styl zostanie zastosowany.
Parametry można także łączyć, np.: div[class][align="left"] { color: red }
W powyższym przypadku styl zostanie zastosowany do akapitów, które posiadają określony
(jakikolwiek) atrybut klasy oraz atrybut wyrównania tekstu do lewej.
Możliwe jest także pominięcie nazwy znacznika, dla którego dany parametr ma istnieć
poprzez zastosowanie symbolu gwiazdki *:
*[align="left"] { color: red }
W takim przypadku zarówno paragraf

jak i akapit

jeśli będą posiadały parametr
align= left wyświetlone zostaną na czerwono.
Tworzenie i praca z arkuszami stylów CSS 35
Zadanie 3. Selektory atrybutów (parametrów) znacznika
1. Stworzyć styl nadający kolor czerwony wszystkim tekstom objętych znacznikiem

posiadających parametr wyrównania tekstu do strony prawej.
2. Stworzyć styl nadający kolor niebieski wszystkim tekstom objętych dowolnym
znacznikiem posiadającym parametr wyrównania tekstu do strony lewej.
3. Przetestować powyższe definicje stylów.
Klasy selektorów oraz selektor ID
Klasa jest nazwą własną danego stylu zdefiniowanego dla jednego selektora lub w przypadku
użycia symbolu * dana klasa może zostać wywołana dla wszystkich selektorów. Nazwa klasy
może zawierać tylko litery i cyfry (najlepiej nie używać polskich znaków) oraz znaki  -
(minus) oraz  _ (podkreślenie). Poniżej przykład definicji dwóch klas:
*.wazny_tekst {
color: red;
}
a.ciekawe_linki {
color:green;
}
Pierwsza klasa  wazny_tekst to klasa ogólna, może zostać zastosowana we wszystkich
znacznikach w których znajduje się tekst, np.:

...

...

...
W każdym z tych przypadków tekst zawarty pomiędzy znacznikami będzie koloru
czerwonego. W drugim przypadku tylko znacznik może mieć klasę  ciekawe_linki . Jeśli
inny znacznik niż będzie mieć klasę  ciekawe_linki styl nie zostanie zastosowany.

Strony warte polecenia:

Google
Tworzenie i praca z arkuszami stylów CSS 36
Style mogą być także definiowane za pomocą selektora ID. Analogicznie jak w przypadku
klasy, identyfikator może być przypisany do jednego selektora, lub może zostać zdefiniowany
ogólnie, np.:
#w_ramce {
border : 1px solid black ;
}
div#obramowany {
border : 2px solid red ;
}
Odwołania do tak zdefiniowanych stylów realizuje się za pomocą parametru id, np.:

...

...

Atrybut id nadaje unikalną nazwę dla wybranego znacznika (pola, akapitu). W jednym
dokumencie może istnieć tylko jeden element o takiej samej nazwie ID. Dlatego styl dla
parametru ID definiuje się najczęściej dla elementów, które występują na stronie tylko raz.
Pseudoklasy
W celu zastosowanie różnych stylów elementów w zależności od ich stanu stosuje się
określenia pseudoklas. Wyróżnić można następujące pseudoklasy:
" :link  pseudoklasa nieodwiedzanego jeszcze łącza (linka)
" :visited  pseudoklasa odwiedzonego już łącza
" :hover  pseudoklasa wskazywanego myszą łącza
" :active  pseudoklasa wybranego (klikniętego) łącza
" :focus  pseudoklasa elementu, który został zaznaczony, lub wybrany klawiszem
tabulatora
Wszystkie powyższe pseudoklasy mogą zostać użyte ze znacznikiem , natomiast
ostatnia może dodatkowo dotyczyć wszystkich elementów formularzy. Pozwala to
określić inny wygląd łącza (linku) zanim został wybrany (kliknięty) oraz inny wygląd po
najechaniu nad link wskaz
nikiem myszy. W przypadku pól formularzy, pseudoklasa :focus
pozwala na zdefiniowanie innego wyglądu nieaktywnych pół oraz innego dla pola w
którym znajduje się kursor (edytowanego pola).
Tworzenie i praca z arkuszami stylów CSS 37
Wygląd łącza dla konkretnego stanu może zostać zdefiniowany ogólnie, dla wszystkich
znaczników , np.:
a:link {color:blue; text-decoration:none}
lub dla konkretnej klasy łącza:
a.ciekawe_linki:link {color:blue; text-decoration:none}
Zadanie 4. Klasy, pseudoklasy, selektor ID
Stworzyć:
1. Klasę stylów  wazny_tekst dla znaczników

. Tekst tej klasy będzie koloru
niebieskiego.
2. Klasę stylów  wyroznione dla wszystkich znaczników. Tekst tej klasy będzie pogrubiony
oraz pisany kursywą.
3. Klasę stylów  wyrozniona_kom dla znaczników . Tekst w komórce tej klasy będzie
wyrównany do środka (zarówno w poziomie i pionie), pogrubiony oraz posiadał będzie
żółte tło.
4. Styl dla pola tekstowego o nazwie ID= nazwisko . Pole będzie koloru szarego (#c4c4c4).
Jednak podczas edycji pole będzie miało kolor biały.
5. Odpowiednie style dla znacznika , tak aby każdy link w dokumencie był koloru
niebieskiego, pogrubiony, bez podkreślenia. Natomiast po najechaniu na niego
wskaz
nikiem myszy link powinien być pomarańczowy, pogrubiony i podkreślony.
6. Utworzone style przetestować w dokumencie HTML
Tworzenie i praca z arkuszami stylów CSS 38
ĆWICZENIE 3 - DODATEK 1- Najważniejsze właściwości i ich wartości
Właściwości tła
Właściwości Opis Wartości
Określa jak ma być osadzony obrazek scroll
background-attachment tła. Czy ma być zablokowany, czy fixed
powinien przewijać się ze stroną inherit
color-rgb
color-hex
background-color Definiuje kolor tła elementu color-name
transparent
inherit
url(URL)
background-image Określa obrazek tła elementu none
inherit
top left
top center
top right
center left
center center
Określa pozycję obrazka w tle center right
background-position
elementu bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit
repeat
Określa, czy obrazek tła powinien się repeat-x
background-repeat powtarzać, jeśli tak to ile razy i w repeat-y
jakich kierunkach. no-repeat
inherit
Tworzenie i praca z arkuszami stylów CSS 39
Właściwości tekstu
Właściwości Opis Wartości
color Określa kolor tekstu color
ltr
direction Określa kierunek tekstu
rtl
normal
number
line-height Określa odstęp pomiędzy kolejnymi liniami tekstu
length
%
normal
letter-spacing Określa odległość pomiędzy literami
length
left
right
text-align Określa wyrównanie tekstu
center
justify
none
underline
Określa  dekorację (styl) tekstu: podkreślenie,
text-decoration overline
przekreślenie, miganie itd.
line-through
blink
length
text-indent Określa wcięcie akapitu
%
none
text-shadow Określa kolor efektu cienia tekstu color
length
none
capitalize
text-transform Zamienia tekst na małe/duże litery, kapitaliki
uppercase
lowercase
baseline
sub
super
top
text-top
vertical-align Określa pionowe wyrównanie tekstu
middle
bottom
text-bottom
length
%
normal
word-spacing Określa odległości pomiędzy wyrazami
length
Tworzenie i praca z arkuszami stylów CSS 40
Właściwości czcionki
Właściwości Opis Wartości
family-name
font-family Określa czcionkę generic-family
inherit
xx-small
x-small
small
medium
large
x-large
font-size Określa rozmiar czcionki
xx-large
smaller
larger
length
%
inherit
normal
italic
font-style Określa styl tekstu
oblique
inherit
normal
font-variant Określa wariant czcionki small-caps
inherit
normal
bold
bolder
lighter
100
200
300
font-weight Określa  wagę czcionki (stopień pogrubienia)
400
500
600
700
800
900
inherit
Tworzenie i praca z arkuszami stylów CSS 41
Właściwości obramowań
Właściwości Opis Wartości
border-width
border Specyfikacja obramowania w jednej deklaracji border-style
border-color
border-bottom-width
Specyfikacja dolnego obramowania w jednej
border-bottom border-bottom-style
deklaracji
border-bottom-color
border-bottom-color Kolor dolnego obramowania border-color
border-bottom-style Styl dolnego obramowania border-style
border-bottom-width Szerokość dolnego obramowania border-width
color_name
hex_number
border-color Kolor obramowania rgb_number
transparent
inherit
border-left-width
Specyfikacja lewego obramowania w jednej
border-left border-left-style
deklaracji
border-left-color
border-left-color Kolor lewego obramowania border-color
border-left-style Styl lewego obramowania border-style
border-left-width Szerokość lewego obramowania border-width
border-right-width
Specyfikacja prawego obramowania w jednej
border-right border-right-style
deklaracji
border-right-color
border-right-color Kolor prawego obramowania border-color
border-right-style Styl prawego obramowania border-style
border-right-width Szerokość prawego obramowania border-width
none
hidden
dotted
dashed
solid
border-style Określa styl wszystkich ram double
groove
ridge
inset
outset
inherit
border-top-width
Specyfikacja górnego obramowania w jednej
border-top border-top-style
deklaracji
border-top-color
border-top-color Kolor górnego obramowania border-color
border-top-style Styl górnego obramowania border-style
border-top-width Szerokość górnego obramowania border-width
thin
medium
border-width Określa grubość obramowania thick
length
inherit
Tworzenie i praca z arkuszami stylów CSS 42
Właściwości tabel i komórek
Właściwości Opis Wartości
width Szerokość length
height Wysokość length
left
right
text-align Określa wyrównanie tekstu
center
justify
baseline
sub
super
top
text-top
vertical-align Określa pionowe wyrównanie tekstu
middle
bottom
text-bottom
length
%
padding Odległość tekstu od krawędzi komórki length
background-color Kolor tła kolor
Właściwości list
Właściwości Opis Wartości
URL
list-style-image Określa obrazek jako symbol punktu none
inherit
inside
list-style-position Pozycja punktów listy outside
inherit
none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
list-style-type Określa styl punktu
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
Tworzenie i praca z arkuszami stylów CSS 43
ĆWICZENIE 3  DODATEK 2 - Miary
Miary absolutne
" in - cal, (1in = 2.54cm)
" cm - centymetr, 1cm
" mm - milimetr, 1mm
" pt - punkt, 1pt = 1/72in
" pc - pika, 1pc = 12pt
Miary względne
" em - wysokość czcionki elementu
" ex - x-height - wysokość litery x
" px - piksele, w odniesieniu do rozdzielczości tła
" % - procent szerokości/wysokości elementu ograniczającego
Tworzenie i praca z arkuszami stylów CSS 44
ĆWICZENIE 3 - DODATEK 3 - Firebug
Narzędzie Firebug
Istnieje wiele narzędzi ułatwiających analizę już gotowych stron pod względem budowy kodu
HTML oraz arkuszy stylów CSS. Narzędzie Firebug jest programem (dodatkiem do
przeglądarki Firefox) umożliwiającym inspekcję kodu HTML i CSS gotowych już stron.
Nowatorską funkcją programu jest możliwość pracy w trybie ciągłej inspekcji (włączenie
trybu zostało zaznaczone na poniższym screenie za pomocą czerwonego kwadratu), który
umożliwia wyświetlanie w dwóch dolnych oknach kodu HTML oraz CSS aktualnie
wskazywanej myszką sekcji oglądanej strony. Co więcej, narzędzie umożliwia zmiany
wartości właściwości CSS oglądanej strony tak, że efekty zmian są od razu widoczne w oknie
przeglądarki. Zmiany oczywiście dokonywane są tylko na naszym komputerze i przestają
działać po odświeżeniu strony.
Zarówno przeglądarka Firefox, jak i dodatek Firebug są darmowymi programami, które mogą
zostać pobrane ze stron:
" Przeglądarka Firefox: http://www.mozilla.com
" Dodatek Firebug: http://getfirebug.com
"
Tworzenie i praca z arkuszami stylów CSS 45