Kurs WWW
Paweł Rajba
Paweł Rajba
pawel@ii.uni.wroc.pl
http://pawel.ii.uni.wroc.pl/
Kurs WWW
Paweł Rajba
Paweł Rajba
pawel@ii.uni.wroc.pl
http://pawel.ii.uni.wroc.pl/
CSS – Cascading Style Sheets
Dlaczego powstał CSS?
Jak tego używać?
Walidator
http://jigsaw.w3.org/css-validator/
Wstawienie arkusza CSS
Bezpośrednio w dokumencie
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Moja strona domowa</TITLE>
<STYLE type="text/css">
H1 { color: red }
P { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Moja fantastyczna strona domowa</H1>
<P>Tutaj zobaczycie to, czego nigdzie indziej...
</BODY>
</HTML>
Wstawienie arkusza CSS
Poprzez odwołanie do innego dokumentu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Moja strona domowa</TITLE>
<LINK rel="StyleSheet" type="text/css"
href="mojstyl.css" >
</HEAD>
<BODY>
<H1>Moja fantastyczna strona domowa</H1>
<P>Tutaj zobaczycie to, czego nigdzie indziej...
</BODY>
</HTML>
Reguły CSS
Reguła składa się z dwóch części
selektora (np. H1)
deklaracji (np. color:blue)
Deklaracja również składa się z dwóch części
właściwości (np. color)
wartości (np. blue)
Drzewo dokumentu
Rozpatrzmy poniższy dokument
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Moja strona domowa</TITLE>
</HEAD>
<BODY>
<H1>Moja fantastyczna strona domowa</H1>
<P>Tutaj zobaczycie to, czego nigdzie indziej...
<UL>
<LI>Tygrysy</LI>
<LI>Zebry</LI>
<LI>Małpiszony</LI>
</BODY>
</HTML>
Drzewo dokumentu
I odpowiadające mu drzewko
HTML
BODY
HEAD
TITLE
H1
P
UL
LI
LI
LI
Terminologia
Rodzic (parent) - element B zawiera
bezpośrednio pewną ilość elementów. Jest
on rodzicem tych elementów.
Dziecko (child) – element A jest dzieckiem
elementu B, kiedy B jest rodzicem A
Potomek (descendant) – element A jest
potomkiem elementu B, kiedy
A jest dzieckiem B lub
A jest dzieckiem C, który jest potomkiem B
Terminologia
Przodek (ancestor) – element A jest
przodkiem elementu B, kiedy B jest
potomkiem A
Brat/siotra (sibling) – element A jest bratem
elementu B, kiedy A i B mają wspólnego
rodzica. A jest poprzedzającym bratem B,
kiedy występuje wcześniej w drzewie
dokumentu; A jest następującym bratem B,
kiedy występuje później w drzewie
dokumentu
Terminologia
Element wcześniejszy (preceding element)
– element A jest wcześniejszy niż element B,
kiedy
A jest przodkiem B lub
A jest poprzedzającym bratem B
Element późniejszy (following element) –
element A jest późniejszy niż element B,
kiedy B jest elementem wcześniejszym niż
element A
Kilka uwag
grupowanie
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 {
font-weight: bold;
font-size: 12pt;
}
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
H1, H2, H3 { font-family: sans-serif }
Kilka uwag
Jednostki
długości:
relatywne:
em – szerokość znaku M
ex – wysokość linii
px – 1 pixel
absolutne
in – cale (2.54 cm)
cm, mm
pt – punkty (1/72 cala)
pc – picas (12 pt)
procentowe: np. 120%
Kilka uwag
kolorki
H1 { color: maroon }
P { color: #f00 } /* #rgb */
P { color: #ff0000 } /* #rrggbb */
P { color: rgb(255,0,0) } /* 0 - 255 */
P { color: rgb(100%, 0%, 0%)
}
napisy
"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''
Kilka uwag
Komentarze /* ... */
Dwa różne obiekty: "napis", stała
color: "red"
– źle
Można przełamywać wiersze
A[TITLE="a not s\
o very long title"]
{/*...*/}
A[TITLE="a not so very long title"]
{/*...*/}
Selektory
Universal selector
piszemy *, jeżeli po * jest coś jeszcze, to *
można pominąć
dopasowuje się do każdego elementu drzewa
dokumentu
*.gruby .gruby (równoważne)
*#myid #myid (równoważne)
Type selectors
dopasuje się do każdego wystąpienia
konkretnego elementu
H1 { font-family: sans-serif }
Selektory
Descendant selectors
dopasuje się do elementu, który jest dzieckiem
innego elementu
przykład: chcemy żeby nagłówek H1 był
innego koloru oraz żeby wyróżniony tekst
zmieniał kolor. Weźmy dwie reguły:
H1 { color: red }
EM { color: red }
No i jest kłopot z poniższym:
<H1>To jest <EM>bardzo</EM> ważny tekst</H1>
Selektory
Rozwiązanie
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
Inny przykład:
DIV * P –
dopasuje się do P które jest potomkiem
czegoś, co jest potomkiem DIV
Selektory
Child selectors
dopasuje się do elementu, który jest dzieckiem
innego elementu
BODY > P { color: red }
DIV OL>LI P { color: green }
Adjacent sibling selectors
H1 + H2 { margin-top: 5mm }
H1.opener + H2 { margin-top: 5mm }
(dotyczy H2)
Selektory
Attribute selectors
[att]
– dopasuje się wtedy, gdy atrybut
att
jest ustawiony, niezależnie od jego wartości
H1[title] { color : blue }
[att=val]
– dopasuje się wtedy, gdy atrybut
att
jest ustawiony na wartość
val
SPAN[class="main"] { color : red }
SPAN[align="left"][class="g"] {color: blue}
Selektory
[att~=val]
– dopasuje się wtedy, gdy
wartością atrybutu
att
jest lista, w której jeden
z elementów jest równy dokładnie
val
P[align~="left"] { color : green }
// dopasuje się dla np. rel="left right"
[att|=val]
– dopasuje się wtedy, gdy
wartością atrybutu
att
jest lista, w której
elementem jest
val
lub słowo rozpoczynające
się słowem
val-
*[lang|="en"] { color : blue }
// dopasuje się wtedy, gdy atrybut lang
// będzie ustawiony na np. "en", "en-US"
Selektory
Class selectors
W języku HTML możemy użyć kropki
"."
jako
alternatywę dla składni
"class~="
.
DIV.value to to samo co DIV[class~=value]
Przykład:
.zielony { color : green }
<H1 class="zielony">Zielony nagłówek</H1>
P.czerwony.gruby
{ color: red; font-weight: bold }
<P class="czerwony gruby maly">
Ojojoj</P>
Selektory
ID selectors
Każdy element HTML może mieć atrybut o
nazwie id. Atrybut ten wyróżnia spośród
innych to, że jego wartości są w obrębie
dokumentu unikalne.
Przykład:
reguła H1#chapter1 { text-align: center }
dopasuje się do <H1 id="chapter1">...</H1>
Pseudo-klasy
:first-child
dopasowuje się do elementu będącego
pierwszym dzieckiem swojego rodzica.
DIV > P:first-child { color: navy }
<DIV>
<P>Ala ma kota</P>
<P>Ala ma dwa koty</P>
</DIV>
<DIV>
<H1>Ala ma kota</H1>
<P>a tu nie działa</P>
</DIV>
Pseudo-klasy
:link
– link nieodwiedzony
:visited
– link odwiedzony
:hover
– myszka nad linkiem
:active
– link aktywny
:focus
– focus ustawiony na linka
:lang(C)
dopasowuje się, kiedy element jest w języku C
:lang(fr) > Q { quotes: '« ' ' »' }
Pseudo-klasy
Przykłady
A.external:visited { color: blue }
<A class="external"
href="http://www.wp.pl/">WP</A>
A:link { color: red }
A:visited { color: blue }
A:visited:hover { color: black }
A:hover { color: yellow }
A:active { color: lime }
A:focus { background: yellow }
Pseudo-elementy
:first-line
P:first-line { text-transform: uppercase }
<P>To jest bardzo długi tekst, który nie
zmieści się w jednym wierszu i trzeba go
wyświetlić w kilku wierszach. Zostaną
wówczas dodane fikcyjne tagi.</P>
<P><P:first-line>To jest bardzo długi tekst,
który nie</P:first-line> zmieści się w
jednym wierszu i trzeba go wyświetlić w
kilku wierszach. Zostaną wówczas dodane
fikcyjne tagi.</P>
Pseudo-elementy
:first-letter
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style:
italic; font-weight: bold; float:left }
SPAN { text-transform: uppercase }
</STYLE>
<P><SPAN>The first</SPAN> few words of an
article in The Economist.</P>
Pseudo-elementy
<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>
he first
</SPAN>
few words of an article in
the Economist.
</P>
Przykład z http://www.w3.org/
Własności kolorów i tła
color
– kolor tekstu
P { color: red }
H1 { color: rgb(255,0,0) }
background-color
– kolor tła
H1 { background-color: #F00 }
background-image
– obrazek tła
BODY { background-image: url("marble.gif") }
P { background-image: none }
Własności kolorów i tła
background-repeat
– jak powtarzać obrazek
repeat
– powtarzanie w pionie i w poziomie
repeat-x
– powtarzanie w poziomie
repeat-y
– powtarzanie w pionie
no-repeat
– po prostu narysować
BODY {
background-color: white;
background-image: url("pendant.gif");
background-repeat: repeat-y;
}
Własności kolorów i tła
background-attachment
– zaczepienie obrazka
scroll (domyślne) – z tekstem
fixed – z oknem
background-position
– pozycja obrazka
procenty
długości
top, center, bottom
left, center, right
Własności kolorów i tła
BODY { background: url("banner.jpeg") right top }
/* 100% 0% */
BODY { background: url("banner.jpeg") top
center } /* 50% 0% */
BODY { background: url("banner.jpeg") center }
/* 50% 50% */
BODY { background: url("banner.jpeg") bottom }
/* 50% 100% */
BODY {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
Własności kolorów i tła
background
– grupuje różne własności
background-color
background-image
background-repeat
background-attachment
background-position
background: fixed yellow url("pov.jpg") center
repeat-x;
Własności czcionek
font-family
– rodzina czcionek
nazwa-rodziny
Times
Arial
rodzina-ogólna
serif
sans-serif
cursive
fantasy
monospace
P { font-family: Arial, Helvetica, sans-serif }
Własności czcionek
font-style
normal
italic
oblique
H1 { font-style: italic }
H1 EM { font-style: normal }
font-variant
normal
small-caps
P { font-variant: small-caps }
Własności czcionek
font-weight
100, 200, 300, 400, 500, 600, 700, 800, 900
normal – to samo co 400
bold – to samo co 700
bolder
lighter
P { font-weight: normal }
H1 { font-weight: 700 }
BODY { font-weight: 400 }
STRONG { font-weight: bolder }
Własności czcionek
font-stretch
ultra-condensed
extra-condensed
condensed
semi-condensed
normal (domyślne)
semi-expanded
expanded
extra-expanded
ultra-expanded
wider, narrower
Własności czcionek
font-size
stałe: xx-small | x-small | small | medium
large | x-large | xx-large
relatywnie: larger | smaller
wielkości: 12pt
procentowo: 120%
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Własności czcionek
font
– opisuje zestaw własności
font-style, font-variant, font-weight, font-size,
line-height, font-family
stałe
caption
icon
menu
message-box
small-caption
status-bar
Własności czcionek
Przykłady:
P { font: 12pt Arial,sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook",
serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif;
font-stretch: condensed }
BUTTON P { font: menu }
Własności tekstu
text-indent
- wcięcie akapitu
jednostki: długości lub procenty
P { text-indent: 3em }
text-align
- wyrównywanie
wartości: left | right | center | justify
DIV.center { text-align: center }
text-decoration
wartości: none | underline | overline |
line-through | blink
P { text-decoration: none }
A[href] { text-decoration: underline }
Własności tekstu
text-shadow
H1 { text-shadow: 0.2em 0.2em }
H2 { text-shadow: 3px 3px 5px red }
H2 { text-shadow: 3px 3px red, yellow -3px
3px 2px, 3px -3px }
letter-spacing
wartości: normal lub długości
word-spacing
wartości: normal lub długości
Własności tekstu
text-transform
capitalize | uppercase | lowercase | none
H1 { text-transform: uppercase }
white-space
normal | pre | nowrap
P.pre { white-space: pre }
P { white-space: normal }
TD[nowrap] { white-space: nowrap }
CSS – Box model
Dla każdego elementu drzewa dokumentu
jest tworzony prostokątny blok, w którym ten
element się znajduje. Model ten omawia
dodatkowe parametry takich prostokątów.
Każdy blok zawiera 4 obszar
content
padding
border
margin
CSS - Box model
ze strony W3 Konsorcjum
CSS – Box model
Marginesy
właściwości
margin-top
margin-right
margin-bottom
margin-left
margin
wartości
długości (np. 3 cm)
procenty (np. 120%)
auto
CSS – Box model
Marginesy c.d.
domyślne wartości: 0
margin – skrót dla margin-top, margin-right,
margin-bottom, margin-left
w zależności od ilości ustawionych wartości
mamy
1 wartość – ustawia wszystkie strony
2 wartości – #1: top i bottom, #2: left i right
3 wartości – #1: top, #2: left i right, #3: bottom
4 wartości – #1: top, #2: right, #3: bottom, #4: left
CSS – Box model
Marginesy - przykłady
BODY { margin: 2em }
BODY { margin: 1em 2em }
BODY { margin: 1em 2em 3em }
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
CSS – Box model
Marginesy – uwagi
marginesy mogą czasamy zostać
skolapsowane (collapse); oznacza to, że 2 lub
więcej marginesów zostanie zamienione na
jeden, zwykle ten o największej wartości
marginesy poziome nie kolapsują się
marginesy bloków, których pozycje są
absolutne lub relatywne nie kolapsują się
CSS – Box model
Padding
właściwości
padding-top
padding-right
padding-bottom
padding-left
padding
wartości (domyślnie 0)
długości (np. 1cm)
procenty (na podstawie wielkości zawartości, np.
120%)
CSS – Box model
Border – wielkość
właściwości
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
wartości
długościami (np. 1cm)
thin, medium, thick (thin<=medium<= thick)
CSS – Box model
Border – kolor
właściwości
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
wartości
kolor
transparent (wtedy border jest przeźroczyty, ale
ma grubość)
CSS – Box model
Border – styl
właściwości – styl
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style
CSS – Box model
Border – styl
wartości
none – brak
hidden – prawie to samo co none; różnica w
kontekście konfliktu rozdzielczości w tabelkach
dotted – kropki
dashed – krótkie kreski
solid – ciągła linia
double – podwójna linia (w połączeniu z border-
width:thin daje to pojedynczą linię)
groove – jakby wyrzeźbione
ridge – podobne do ridge
inset – jakby osadzone
outset – podobne do inset
CSS – Box model
Border – skróty
właściwości
border-top
border-bottom
border-right
border-left
border
wartości
width style color
CSS – Box model
Border – przykłady
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black
} /* bordel-color-left: black */
CSS – rodzaje wartości
specified
computed
actual
CSS – rodzaje wartości
Specified values
ustalanie wartości odbywa się wg
następujących kryteriów:
uzyskujemy wartość z kaskady (np. w arkuszu
wprost mamy wartość dla danej właściwości)
jeśli wartość jest dziedziczona, to używamy tej
wartości
użyj wartości domyślnej
CSS – rodzaje wartości
Computed values
wartości specified mogą być absolutne (red,
2mm) lub relatywne (auto, 2em, 120%). Dla
wartości absolutnych obliczeń wykonywać nie
trzeba, natomiast dla relatywnych jak
najbardziej.
CSS – rodzaje wartości
Actual values
Wartość ostatecznie przypisana. Może się
różnić od computed, gdy np. zostanie
obliczona wielkość czcionki na 15px, a w
systemie takiej nie ma i wtedy zostanie
wybrana wielkość 14px.
actual value to computed lub specified value
po zaokrągleniach, przybliżeniach
Reguła import
Powoduje wczytanie reguł z zewnętrznego
pliku
@import "mystyle.css"
@import url("mystyle.css")
Inheritance (dziedziczenie)
Elementy dziedziczą wartości po swoim
rodzicu z drzewa dokumentu, jeśli to
dziedziczenie jest dopuszczone.
<H1>To jest <EM>ważny</EM> nagłówek</H1>
Jeśli kolor w EM nie jest ustawiony, a H1 ma
kolor czerwony, to EM też będzie miało kolor
czerwony.
Kaskada
Arkusze styli mogą mieć trzy różne źródła
pochodzenia
author
user
user agent
Kaskada – wyszukiwanie wartości
1. Znaleźć wszystkie deklaracje, które dopasowują się do
elementu i właściwości (wyszukanie odpowiednich
selektorów)
2. Pierwsze sortowanie jest wg wag i źródła
pochodzenia:
domyślnie, reguły autora mają wyższy priorytet od reguł
usera
jeśli reguła jest !important to porządek ten się ulega
odwróceniu
reguły !important są ważniejsze od reguł normalnych
reguły user agenta mają najniższy priorytet
Kaskada – wyszukiwanie wartości
3. Drugie sortowanie jest wg szczegółowości:
bardziej szczegółowe selektory mają wyższy
priorytet od tych ogólnych.
4. Ostatecznie, jeśli dwie reguły mają ten sam
priorytet, to wygrywa ta, która pojawiła się
później.
Kaskada – wyszukiwanie wartości
/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }
/* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
text-indent: 1em
font-style: italic
font-size: 12pt
font-family: sans-serif
Typy mediów
Określenie rodzaju medium
w arkuszu stylów:
@import url("loudvoice.css") aural;
@media print {
/* definicja arkusza styli */
}
jako atrybut znacznika LINK
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
Typy mediów
Rozpoznawane typy mediów:
all
– wszystkie rodzaje urządzeń
aural
– urządzenia generujące mowę; do tego typu jest
przeznaczony osobny zestaw styli
braille
– przeznaczone dla urządzeń dotykowych
braille’a
embossed
– przeznaczone dla stronicowanych
drukarek braille’a
handheld
– przeznaczone dla urządzeń podręcznych
(mały ekran, czarno-białe, słaba przepustowość)
– przeznaczone dla drukarek oraz do
wyświetlania na ekranie w trybie print preview
Typy mediów
Rozpoznawane typy mediów c.d.:
projection
– przeznaczone do prezentacji na
projektorach, druków transparentów, itp.
screen
– do wyświetlania na kolorowych
ekranach komputerów
tty
– do wyświetlania na urządzeniach o
ustalonej siatce znaków, np. terminali
tekstowych
tv
– do wyświetlania na urządzeniach typu
television (niska rozdzielczość, kolor,
dźwięk,...)