Tworzenie i praca z arkuszami stylów CSS

Transkrypt

Ć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.
<link rel="Stylesheet" href="ścieŜka_do_pliku/styl.css" type="text/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.:
<style type="text/css">
h1{
color : red;
font-size : 34pt;
}
</style>
•
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.:
<h1 style="color : blue; font-size : 24pt;">Tytuł sekcji</h1>
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.
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
znaleźć 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
•
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
32
•
H2
o Kolor tekstu: zielony
•
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.
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 <i> ... </i>. Tekst zawarty w tym znaczniku
będzie koloru zielonego, tylko wtedy, gdy znajduje się pomiędzy znacznikami <h1> ...
</h1>, ale niekoniecznie bezpośrednio, może znajdować się dodatkowo w innym
znaczniku, jednak nadal jest potomnym dla znacznika <h1>
•
Selektor dziecka, np.: p > b { color: red }
Powyższa definicja dotyczy znacznika <b> ... </b>. Tekst zawarty w tym znaczniku
będzie koloru czerwonego, tylko wtedy, gdy znajduje się bezpośrednio pomiędzy
znacznikami <p> ... </p>, nie może znajdować się w innym znaczniku.
•
Selektor braci, np.: i + b { color: blue }
Powyższa definicja dotyczy znacznika <b> ... </b>. Tekst zawarty w tym znaczniku
będzie koloru niebieskiego, tylko wtedy, gdy występuje bezpośrednio po znacznikach
<i> ... </i>, 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 <b> (kolor tekstu: czerwony, rozmiar czcionki:
20pt), który zastosowany zostanie tylko wtedy, gdy znacznik znajdzie się w znaczniku
<div>
3. Stworzyć definicję stylu dla znacznika <i> (kolor tekstu: zielony), który zastosowany
zostanie tylko wtedy, gdy znacznik znajdzie się w znaczniku <H1> lub w kolejnych
potomnych znacznikach.
4. Stworzyć definicję stylu dla znacznika <U> (kolor tekstu: niebieski), który zastosowany
zostanie tylko wtedy, gdy znacznik znajdzie się bezpośrednio po znaczniku </b> .
5. Stworzyć stronę HTML testującą zależności zdefiniowanych stylów.
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 <td align=”left”> czy szerokość obrazka <img width=”300px”>. 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 <p> jak i akapit <div> jeśli będą posiadały parametr
align=”left” wyświetlone zostaną na czerwono.
35
Zadanie 3. Selektory atrybutów (parametrów) znacznika
1. Stworzyć styl nadający kolor czerwony wszystkim tekstom objętych znacznikiem <div>
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.:
<div class="wazny_tekst"> ... </div>
<p class="wazny_tekst"> ... </p>
<td class="wazny_tekst"> ... </td>
W każdym z tych przypadków tekst zawarty pomiędzy znacznikami będzie koloru
czerwonego. W drugim przypadku tylko znacznik <a> może mieć klasę „ciekawe_linki”. Jeśli
inny znacznik niż <a> będzie mieć klasę „ciekawe_linki” styl nie zostanie zastosowany.
<p class="ciekawe_linki">Strony warte polecenia:</p>
<a href="http://google.com" class="ciekawe_linki">Google</a>
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.:
<div id="obramowany"> ... </div>
<p id="w_ramce"> ... </p>
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 <a>, 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 wskaź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).
37
Wygląd łącza dla konkretnego stanu może zostać zdefiniowany ogólnie, dla wszystkich
znaczników <a>, 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 <div>. 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 <td>. 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 <a>, tak aby każdy link w dokumencie był koloru
niebieskiego, pogrubiony, bez podkreślenia. Natomiast po najechaniu na niego
wskaźnikiem myszy link powinien być pomarańczowy, pogrubiony i podkreślony.
6. Utworzone style przetestować w dokumencie HTML
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
background-attachment
background-color
background-image
background-position
background-repeat
Opis
Wartości
Określa jak ma być osadzony obrazek scroll
tła. Czy ma być zablokowany, czy
fixed
powinien przewijać się ze stroną
inherit
color-rgb
color-hex
Definiuje kolor tła elementu
color-name
transparent
inherit
url(URL)
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
elementu
bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit
repeat
Określa, czy obrazek tła powinien się repeat-x
powtarzać, jeśli tak to ile razy i w
repeat-y
jakich kierunkach.
no-repeat
inherit
39
Właściwości tekstu
Właściwości
Opis
Wartości
color
Określa kolor tekstu
direction
Określa kierunek tekstu
line-height
Określa odstęp pomiędzy kolejnymi liniami tekstu
letter-spacing
Określa odległość pomiędzy literami
text-align
Określa wyrównanie tekstu
text-decoration
Określa „dekorację” (styl) tekstu: podkreślenie,
przekreślenie, miganie itd.
text-indent
Określa wcięcie akapitu
text-shadow
Określa kolor efektu cienia tekstu
text-transform
Zamienia tekst na małe/duże litery, kapitaliki
vertical-align
Określa pionowe wyrównanie tekstu
word-spacing
Określa odległości pomiędzy wyrazami
color
ltr
rtl
normal
number
length
%
normal
length
left
right
center
justify
none
underline
overline
line-through
blink
length
%
none
color
length
none
capitalize
uppercase
lowercase
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
normal
length
40
Właściwości czcionki
Właściwości
font-family
font-size
font-style
font-variant
font-weight
Opis
Wartości
family-name
generic-family
inherit
xx-small
x-small
small
medium
large
x-large
Określa rozmiar czcionki
xx-large
smaller
larger
length
%
inherit
normal
italic
Określa styl tekstu
oblique
inherit
normal
Określa wariant czcionki
small-caps
inherit
normal
bold
bolder
lighter
100
200
300
Określa „wagę” czcionki (stopień pogrubienia)
400
500
600
700
800
900
inherit
Określa czcionkę
41
Właściwości obramowań
Właściwości
Opis
Wartości
border
Specyfikacja obramowania w jednej deklaracji
border-bottom
Specyfikacja dolnego obramowania w jednej
deklaracji
border-bottom-color
border-bottom-style
border-bottom-width
Kolor dolnego obramowania
Styl dolnego obramowania
Szerokość dolnego obramowania
border-color
Kolor obramowania
border-left
Specyfikacja lewego obramowania w jednej
deklaracji
border-left-color
border-left-style
border-left-width
Kolor lewego obramowania
Styl lewego obramowania
Szerokość lewego obramowania
border-right
Specyfikacja prawego obramowania w jednej
deklaracji
border-right-color
border-right-style
border-right-width
Kolor prawego obramowania
Styl prawego obramowania
Szerokość prawego obramowania
border-style
Określa styl wszystkich ram
border-top
Specyfikacja górnego obramowania w jednej
deklaracji
border-top-color
border-top-style
border-top-width
Kolor górnego obramowania
Styl górnego obramowania
Szerokość górnego obramowania
border-width
Określa grubość obramowania
border-width
border-style
border-color
border-bottom-width
border-bottom-style
border-bottom-color
border-color
border-style
border-width
color_name
hex_number
rgb_number
transparent
inherit
border-left-width
border-left-style
border-left-color
border-color
border-style
border-width
border-right-width
border-right-style
border-right-color
border-color
border-style
border-width
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
border-top-width
border-top-style
border-top-color
border-color
border-style
border-width
thin
medium
thick
length
inherit
42
Właściwości tabel i komórek
Właściwości
Opis
width
height
Szerokość
Wysokość
text-align
Określa wyrównanie tekstu
vertical-align
Określa pionowe wyrównanie tekstu
Odległość tekstu od krawędzi komórki
padding
background-color Kolor tła
Wartości
length
length
left
right
center
justify
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
length
kolor
Właściwości list
Właściwości
Opis
list-style-image
Określa obrazek jako symbol punktu
list-style-position
Pozycja punktów listy
list-style-type
Określa styl punktu
Wartości
URL
none
inherit
inside
outside
inherit
none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
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
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
45

Tworzenie i praca z arkuszami stylów CSS

Transkrypt

Podobne dokumenty

„CSS – kaskadowe arkusze stylów

TI/PZS1/PG/2012, 2014/2015

Zadanie 3

Format plików XML i CSS

(wyświetlania) stron WWW. CSS został opracowany przez

Zestaw 4 ()

Kaskadowe arkusze stylów – składnia stylów

WWW2 Tworzenie stron w HTML + CSS projektowanie

1 Temat: Kaskadowe arkusze stylów CSS i box model Opis istoty

Kaskadowe arkusze stylów - BK-S