Informacje ogólne

Informacje ogólne
Arkusze styli zwi kszaj kontrol nad wygl dem strony, poprzez
zastosowanie szeregu opcji przypisywanych do danych elementów
samego HTML'a.
Dzieki nim mo na okre li takie cechy jak: rodzaje czcionek, sposób
formatowania tekstu, kolory, tła, marginesy itp. Same style nadpisuj
atrybutów znaczników HTML'a, dodaj c swoje
niejako wi kszo
rozsze enia.
Obecnie zalecane jest stosowanie styli zamiast takich atrybutów jak:
align, face, size itp. Dzi ki stylom mo na te w do znaczny sposób
ograniczy ilo wykorzystywanych rodzajów znaczników.
Kaskadowo
stylów
Informacja o stylu mo e by zapisana w oddzielnym pliku b d w samym dokumencie HTML. Od
lokalizacji stylu zale y zasi g jego oddziaływania.
•
•
•
•
Importowany arkusz stylów (imported Style Sheet). Zewn trzny arkusz stylów, który został
importowany (doł czony) do innego arkusza.
Zewn trzny arkusz stylów (external Style Sheet). Zwykły plik tekstowy z rozszerzeniem .css
zawieraj cy definicje stylów. Odwołania do zewn trznego arkusza stylów znajdowa si
mog w dowolnym dokumencie HTML.
Styl osadzony (embedded style). Styl o zasi gu lokalnym - jego oddziaływanie ograniczone
jest do dokumentu, w którym został umieszczony.
Styl wpisany (in-line style). Styl o zasi gu lokalnym, doł czany do okre lonego znacznika
HTML i okre laj cy sposób wy wietlania tylko tego elementu.
Kaskadowo stylów objawia si w przypadku korzystania z przynajmniej dwóch z wymienionych
wcze niej rodzajów arkuszy. W przypadku konfliktu (gdy jaki element znajduje si w zasi gu
wi cej ni jednego stylu), obowi zuje zasada, e styl znajduj cy si „bli ej” formatowanego
elementu znosi działanie stylu odległego. Najwy szy priorytet ma wówczas styl wpisany, drugim w
kolejno ci jest styl osadzony, nast pnie zewn trzny, a na ko cu importowany.
Przykładowo, styl wprowadzony w nagłówku HEAD dokumentu HTML (styl osadzony) b dzie miał
pierwsze stwo przed stylem pochodz cym z pliku arkusza (zewn trznym). Sam jednak zostanie
„zneutralizowany” przez styl umieszczony w obr bie znacznika formatowanego elementu - np. H1
(styl wpisany).
Składnia stylu
Definicja stylu składa si z dwóch cz ci - selektorów okre laj cych elementy HTML, do których
b dzie odnosi si styl oraz deklaracji stylu. Definicj umieszcza si w znaczniku STYLE lub w
zewn trznym pliku (arkuszu stylów) z zachowaniem nast puj cej składni:
selektor1, selektor2, ... , selektorn
{
własno
własno
...
}
1: warto
2: warto
1;
2;
Na deklaracj stylu składa si lista par własno :warto oddzielonych rednikiem i ograniczonych
nawiasami klamrowymi. Własno to atrybut znacznika HTML, który podlega specyfikacji CSS (np.
wielko czcionki dla akapitu), warto – dookre lenie własno ci (np. 12px).
Przykłady:
P { text-indent: 10pt } – wci cie akapitu o gł boko ci 10 punktów
H1, H2 { font-style: bold } – wytłuszczona czcionka dla nagłówków typu H1 i H2
A { color: red; text-decoration: none } - odsyłacz w kolorze czerwonym, bez podkre lenia
Umieszczanie stylu w dokumencie
Specyfikacja HTML 4.0 okre la w jakim miejscu opis wygl du mo e si znajdowa :
•
•
w dokumencie HTML;
w osobnym pliku *.css.
Aby umie ci opis wygl du wewn trz dokumentu HTML nale y u y znacznika <style>. W sekcji
head wstawiamy np:
<style type="text/css">
H1 { color: red }
</style>
Bardziej praktyczne jest zastosowanie zewn trznego arkuszu stylów. Takie rozwi zanie ma dwie
zalety:
•
•
tre opisu mo e by zmieniana bez modyfikacji ródłowego dokumentu HTML,
pliki CSS mog by współdzielone przez kilka dokumentów.
W celu przył czenia zewn trznego opisu wygl du dokumentu nale y wykorzysta znacznik <link> i
w sekcji head wstawi :
<LINK rel="stylesheet" href="przyklad.css" type="text/css">
Znacznik <link> zawiera:
•
•
•
typ: "stylesheet";
nazw i poło enie opisu wygl du wewn trz atrybutu "href";
typ opisu wygl du okre lonego przez: "text/css".
Nast pnie tworzymy plik tekstowy (np. w notatniku) zawierajacy styl:
H1 { color: red }
Plik zapisujemy z rozsze eniem *.css
Dziedziczenie
Dziedziczenie jest zwi zane z hierarchi znaczników HTML'a. Polega na tym i warto ci
przypisane danemu znacznikowi b d te miały zastosowanie dla znaczników mu podległych czyli zawartych w jego ciele.
Przyporz dkowuj c znacznikowi <body> jak własno (np.: kolor) b dzie ona te nadana
wszystkim pozostałym znacznikom poza <head> i <html>.
Warto nadana elementowi <p> zostanie odziedziczona przez znacznik <font>. Niestety nie
zawsze wszystko wygl da tak jak powinno, np.: Netscape nie dziedziczy wła ciwo ci dla
elementów tabeli.
Warto
Odnosi si do
ę
Opis
Przykład
ś
Wła ciwo
ć
ś
ć
ś
ś
Czcionka
Okre la typ czcionki
font-style
Okre la styl czcionki
nazwa czcionki
wszystkie
elementy
{font-family: Arial}
Przykład: Tekst
normal,
italic,
oblique
wszystkie
elementy
{font-style: italic}
Przykład: Tekst
normal,
small-caps
wszystkie
elementy
{font-variant: smallcaps}
Przykład: TEKST
normal,
bold,
bolder,
lighter,
100, 200, 300, 400, 500, 600, 700, 800,
900
wszystkie
elementy
{font-weight: bolder}
Przykład: Tekst
xx-small, x-small, small, medium, large,
x-large, xx-large,
larger, smaller,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px)
wszystkie
elementy
{font-size: 20px}
Przykład: Tekst
font-family,
font-size,
font-variant,
font-weight,
font-size
wszystkie
elementy
{font: 12pt sans-serif
bold italic}
Przykład: Tekst
ś
font-family
ć
ś
ś
font-variant
Okre la grubo
czcionki
font-size
Okre la rozmiar czcionki
font
Zawiera w sobie wszystkie wła ciwo ci
dotycz ce czcionki
ą
ś
ś
ś
font-weight
ę
Odnosi si do
Przykład
ć
Warto
Okre la odległo
mi dzy wyrazami
normal,
wszystkie elementy {word-spacing: 1.2em}
punkt (pt),
Przykład: Tekst
inch (in),
centymetr (cm),
wzgl dem
(em),
piksel (px)
mi dzy literami
normal,
wszystkie elementy {letter-spacing: 0.2em}
punkt (pt),
Przykład: T e k s t
inch (in),
centymetr (cm),
wzgl dem
(em),
piksel (px)
ś
vertical-align
Okre la poło enie tekstu w pionie wzgl dem elementu
poprzedzaj cego
ą
ę
Ŝ
Okre la czy tekst ma by podkre lony, przekre lony, itd.
ś
textdecoration
none,
underline,
overline,
line-through,
blink
wszystkie elementy {text-decoration: linethrough}
Przykład: Tekst
baseline,
elementy
sub,
wewn trzne
super,
top,
text-top,
middle,
bottom,procent
ę
ś
ć
ś
ę
ę
letter-spacing Okre la odległo
ć
ś
ś
ę
ę
word-spacing
ś
Opis
ś
Wła ciwo
ć
ś
ć
ś
ś
Tekst
{vertical-align: top}
ś
capitalize,
uppercase,
lowercase,
none
wszystkie elementy
left,
right,
center,
justify
elementy b d ce blokiem {text-align: center}
{text-transform: uppercase}
Przykład: TEKST
text-indent
Okre la odległo
line-height
Okre la odległo
ć
ą
procent,
elementy b d ce blokiem {text-indent: 20%}
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem
(em),
piksel (px)
ć
ę
ą
mi dzy dwoma s siednimi liniami normal,
wszystkie elementy
liczba,
procent,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem
(em),
piksel (px)
ę
ś
ś
ę
od lewego marginesu
ę
ś
ś
ą
Okre la poło enie tekstu wewn trz elementu
ą
text-align
ę
Ŝ
ś
text-transform Okre la sposób przemiany tekstu
{line-height: 120%}
Odnosi si do
ę
Warto
Przykład
nazwa koloru,
warto hex
wszystkie
elementy
{color: red}
Przykład: Tekst
{color: rgb(0,0,255)}
Przykład: Tekst
nazwa koloru,
warto hex
wszystkie
elementy
{background-color:
#FF5500}
none,
adres URL
wszystkie
elementy
{background-image:
url(tlo.gif)}
repeat,
repeat-x,
repeat-y,
no-repeat
wszystkie
elementy
{background-repeat:
repeat-x}
scroll,
fixed
wszystkie
elementy
{background-attachment:
scroll}
[top, center,
bottom],
[left, center,
right],
procent,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px)
elementy
{background-position:
b d ce blokiem 100% 30%}
background-color
Okre la kolor tła
backgroundimage
Okre la grafik pełni ca rol tła
backgroundrepeat
Okre la powtrzalno
backgroundattachment
Okre la czy tło ma si przesuwa
wraz z zawarto ci (scroll) czy ma
by stałe (fixed)
backgroundposition
Okre la pozycj pocz tkow tła
ę
ą
ć
ą
ę
ą
ą
ę
ś
ć
ą
ś
ę
ć
ś
tła
ś
ś
ę
ś
ś
ś
Okre la kolor czcionki
ć
color
ć
ś
Opis
ś
Wła ciwo
ć
ś
ć
ś
ś
Kolor i tło
ą
ś
Zawiera w sobie wszystkie
wła ciwo ci dotycz ce tła
ś
background
backgroundcolor,
backgroundimage,
backgroundrepeat,
backgroundattachment,
backgroundposition
wszystkie
elementy
{background: red
url(tlo.jpg) left top norepeat}
Okre la odległo
ę
Odnosi si do
Przykład
od górnej kraw dzi strony auto,
wszystkie elementy {margin-top: 3em}
procent,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
od prawej kraw dzi strony auto,
wszystkie elementy {margin-right: 4px}
procent,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
ś
ć
ś
ć
od dolnej kraw dzi strony auto,
wszystkie elementy {margin-bottom: 13%}
procent,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
ę
margin-bottom Okre la odległo
ę
ś
ś
ę
ę
ć
ś
ś
ę
margin-right
Warto
ę
Okre la odległo
ć
margin-top
ś
Opis
ś
Wła ciwo
ć
ś
ć
ś
ś
Elementy kwadratowe
od lewej kraw dzi strony
auto,
wszystkie elementy {margin-left: 4em}
procent,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
ę
Okre la odległo
ę
margin-left
ś
ć
ś
ś
Okre la odległo
dolna, lewa
od kraw dzi strony według kolejno ci: górna, prawa,
padding-top
Okre la górny odst p elementu
padding-right
Okre la prawy odst p elementu
paddingbottom
Okre la dolny odst p elementu
auto,
procent,
punkt (pt),
inch (in),
centymetr
(cm),
wzgl dem
(em),
piksel (px)
wszystkie
elementy
{margin: 2em 3em 1em
4em}
procent,
punkt (pt),
inch (in),
centymetr
(cm),
wzgl dem
(em),
piksel (px)
wszystkie
elementy
{padding-top: 0.2em}
procent,
punkt (pt),
inch (in),
centymetr
(cm),
wzgl dem
(em),
piksel (px)
wszystkie
elementy
{padding-right: 12px}
procent,
punkt (pt),
inch (in),
centymetr
(cm),
wzgl dem
(em),
piksel (px)
wszystkie
elementy
{padding-bottom: 0.4em}
ę
ę
ś
ę
ę
ś
ę
ę
ś
ę
ę
margin
ś
Okre la lewy odst p elementu
procent,
wszystkie elementy
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem
(em),
piksel (px)
padding
Okre la odst p elementu według kolejno ci: górna, prawa, dolna,
lewa
border-top-width
Okre la szeroko
border-rightwidth
Okre la szeroko
{padding-left: 7%}
ś
procent,
wszystkie
punkt (pt),
elementy
inch (in),
centymetr (cm),
wzgl dem
(em),
piksel (px)
{padding: 2em 1em 3em
4em}
thin,
wszystkie
medium,
elementy
thick,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem
(em),
piksel (px)
{border-top-width: thin}
thin,
wszystkie
medium,
elementy
thick,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem
(em),
piksel (px)
{border-right-width: medium}
ś
ć
ś
ć
prawej granicy (ramki) elementu
ę
ę
ś
górnej granicy (ramki) elementu
ś
ę
ę
ś
ę
ę
padding-left
ś
ś
ć
dolnej granicy (ramki) elementu
ś
ś
ć
lewej granicy (ramki) elementu
thin,
medium,
thick,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
wszystkie elementy {border-bottom-width: thick}
thin,
medium,
thick,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
wszystkie elementy {border-left-width: 3px}
Okre la szeroko
border-leftwidth
Okre la szeroko
border-width
Okre la szeroko granicy (ramki) elementu według kolejno ci: górna, thin,
medium,
prawa, dolna, lewa
thick,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
border-color
Okre la kolor granicy (ramki) elementu
border-style
Okre la styl granicy (ramki) elementu
wszystkie elementy {border-width: thin thick
medium thick}
wszystkie elementy {border-color: red}
none,
dotted,
dashed,
solid,
double,
groove,
ridge,
inset,
outset
wszystkie elementy {border-style: double}
ś
ć
nazwa koloru,
warto hex
ś
ś
ę
ś
ć
ś
ś
ę
ę
border-bottomwidth
ś
ś
ć
, kolor i styl górnej granicy (ramki) elementu
ś
ś
ć
, kolor i styl prawej granicy (ramki) elementu
ś
ś
ć
, kolor i styl dolnej granicy (ramki) elementu
ś
ś
ć
, kolor i styl lewej granicy (ramki) elementu
ś
ś
ć
ś
ć
border-top
Okre la szeroko
border-right
Okre la szeroko
border-bottom
Okre la szeroko
border-left
Okre la szeroko
border
Okre la szeroko , kolor i styl granicy (ramki) elementu według
kolejno ci: górna, prawa, dolna, lewa
width
Okre la szeroko
height
Okre la wysoko
border-rightwidth,
border-style,
color
wszystkie elementy {border-right: }
border-bottomwidth,
border-style,
color
wszystkie elementy {border-bottom: }
border-left-width, wszystkie elementy {border-left:}
border-style,
color
elementu (np. grafiki)
auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
elementy b d ce
blokiem
{width: 80px}
elementu (np. grafiki)
auto,
punkt (pt),
inch (in),
centymetr (cm),
wzgl dem (em),
piksel (px)
elementy b d ce
blokiem
{height: 170px}
left,
right,
none
wszystkie elementy {float: left}
ą
ę
ę
ć
ś
ś
ę
ą
wszystkie elementy {border: }
ę
border-width,
border-style,
color
ś
ś
border-top-width, wszystkie elementy {border-top: thin blue solid}
border-style,
color
float
clear
none,
left,
right,
both
wszystkie elementy
{clear: right}
ą
ę
ę
ć
Okre la w jaki sposób nale y obchodzi si z odst pami wewn trz normal,
pre,
elementu
nowarp
Ŝ
white-space
ś
Okre la w jaki sposób dany element ma by wy wietlony
ę
wszystkie elementy
Przykład
{display: none}
elementy b d ce blokiem {white-space: pre}
ą
ś
block,
inline,
list-item,
none
display
Odnosi si do
ę
Warto
ć
Opis
ś
Wła ciwo
ć
ś
ć
ś
ś
Klasyfikacja
list-style-type
disc,
elementy z display = listcircle,
item
square,
decimal,
lowerroman,
upperroman,
lower-alpha,
upper-alpha,
none
{list-style-type: lower-roman}
list-style-image
adres URL,
none
elementy z display = listitem
{list-style-image:
url(rysunek.gif)}
list-styleposition
inside,
outside
elementy z display = listitem
{list-style-position: outside}
list-style
disc,
elementy z display = listcircle,
item
square,
decimal,
lowerroman,
upperroman,
lower-alpha,
upperalpha,
none,
inside,
outside,
adres URL,
none
{list-style: circle outside}
Grupowanie
Je eli kilka selektorów posiada te same deklaracje, to mo na je zgrupowana w jedn deklaracj ,
a poszczególne elementy b d oddzieli przecinkami.
Na przykład:
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
mo na zapisa równie jako:
H1, H2, H3 { font-family: sans-serif }
Atrybuty selektorów
CSS2 pozwala autorom zaw
a opisy wygl du poszczególnych elementów.
Na przykład mo na opisa wygl d elementów o konkretnych atrybutach zdefiniowanych w
dokumencie.
Atrybuty selektorów mog wygl da nast puj co:
[att]
kiedy element ma atrybut 'att' i jak kolwiek jego warto
[att=val]
kiedy warto
.
atrybutu 'att' jest równa 'val'.
[att~=val] kiedy warto atrybutu 'att' jest słowem lub zbiorem słów oddzielonych 'spacj ', a jedno
z tych słów jest równe warto ci 'val'. Warto 'val' nie mo e zawiera 'spacji'.
[att|=val] kiedy warto
atrybutu 'att' rozpoczyna si wyrazem okre lonym przez warto
'val'.
Dla przykładu, poni sza instrukcja dotyczy wszystkich znaczników H1, które maj okre lony
atrybut title:
H1[title] { color: blue; }
Poni szy przykład dotyczy przypadku, kiedy znacznik SPAN musi posiada warto
atrybutu class:
example
SPAN[class=example] { color: blue; }
Inny przykład pokazuje wyst powanie dwóch atrybutów w znaczniku SPAN:
SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Poni szy przykład pokazuje jak ukry wszystkie elementy, których warto
równa 'fr' (tzn. kiedy j zyk jest francuski):
atrybutu LANG jest
*[LANG=fr] { display : none }
Poni szy przykład pokazuje wykorzystanie "|=" i dotyczy znaczników, których warto
LANG rozpoczynaj si od 'en' (np.: 'en', 'en-US', 'en-cockney'):
*[LANG|="en"] { color : red }
atrybutu
Klasy
<style>
.nazwa_klasy1 {definicja_stylu}
element.nazwa_klasy2 {definicja_stylu}
</style>
Odwołanie do tak zadeklarowanych klas:
<dowolny_znacznik class="nazwa_klasy1">
<element class="nazwa_klasy2">
W opisie wygl du u ytym w HTML autorzy mog u ywa kropki (.) jako alternatywnego rozwi zania w stosunku
do "~=" w przypadku atrybutu o nazwie class. Czyli, DIV.wartosc jest równowa ny zapisowi
DIV[class~=wartosc].
Na przykład, mo na przypisa informacj o wygl dzie do wszystkich elementów, których atrybut
class~="wartosc":
*.wartosc { color: green }
lub inaczej:
.wartosc { color: green }
Poni szy przykład dotyczy tylko znacznika <code>, którego atrybut class~="wartosc":
code.wartosc { color: green }
Wykonanie tej instrukcji w pierwszej linii poni szego dokumentu HTML nie spowoduje ustawienia koloru tekstu
na zielony, za w drugiej linii tak:
<code>Ten tekst nie jest w kolorze zielonym.<code>
<code class="wartosc">Ten tekst jest w kolorze zielonym.</code>
W przypadku wi kszej ilo ci warto ci atrybutu class, ka da warto musi by oddzielona kropk ".".
Poni szy przykład pokazuje instrukcj , w której znacznik P powinien mie za warto ci atrybutu class wyrazy:
wart1 i wart2 oddzielone klawiszem spacji:
P.wart1.wart2 { color: green}
Instrukcja ta zadziała w przypadku, gdy class="wart1 jest jakas tam i wart2 tez", ale nie zadziała je eli
class="wart1 jest jakas tam".
Identyfikatory
Dzi ki identyfikatorom dany styl mo na przypisa tylko do okre lonych elementów. Deklaracja styli
przy u yciu identyfikatorów:
<style>
#nazwa_id1 {definicja_stylu}
element#nazwa_id2 {definicja_stylu}
</style>
Odwołanie do tak zadeklarowanych identyfikatorów:
<dowolny_znacznik id="nazwa_id1">
<element id="nazwa_id2">
Selektory potomne
Czasami autorzy chc wyró ni elementy, które zawieraj si wewn trz innych elementów w
dokumencie (np. element I, który znajduje si w elemencie P). Nast puj ce deklaracje:
Deklaracja:
p i{color:cyan; font-weight:bold;}
B dzie wykorzystywana przez element i, pod warunkiem e znajduje si on bezpo rednio w ciele
znacznika p
np.
<p>tekst<i>tekst</i>tekst</p>
Deklaracja:
p * i{color:cyan; font-weight:bold;}
B dzie wykorzystywana przez element i, pod warunkiem e znajduje si on w ciele znacznika p
(wcze niej mo e wyst powa jeszcze w ciele innego znacznika)
np.
<p>tekst<b>tekst<i>tekst</i>tekst</b>tekst</p>
Selektor dziecka
Selektor 'dziecko' wyst puje wtedy, gdy znacznik 'dziecko' znajduje si wewn tz innego znacznika.
Np.
<h1> tekst<h3>tekst </h3>tekst </h1>
Selektor 'dziecko' składa si z dwóch lub wi cej selektorów oddzielonych znakiem ">".
Poni sza instrukcja ustawia wygl d wszystkich znaczników P, które s 'dzie mi' w stosunku do znacznika
BODY:
BODY > P { line-height: 1.3 }
Poni szy przykład przedstawia kombinacj selektorów potomnych i selektorów 'dzieci':
DIV OL>LI P
Opis: w tym przypoadku znacznik P jest elementem potomnym w stosunku do LI; znacznik LI musi by
'dzieckiem' znacznika OL; znacznik OL musi by elementem potomnym w stosunku do DIV.
Selektor uniwersalny
Warto ci uniwersalne mo emy nadawa na poziomie BODY albo stosuj c uniwersalny selektor z gwiazdk :
* { color : red } /* cały tekst b dzie czerwony */
*.classname {color : red } /* wszystkie elementy o klasie classname b d czerwone */
H1 * PRE { color:red } /* wszystkie bloki PRE zawarte w H1 b d czerwone */
k
t
ś
s
e
c
e
y
o
m
t
j
ą
i
k
u
f
d
S
S
C
l
e
t
y
s
e
w
a
o
w
t
d
s
P
o
Atrybut
Opis atrybutu
Warto ci
krój pisma
np. Tahoma, Arial, Times New Roman
font-style
styl czcionki
normal, italic, oblique
font-variant
wariant czcionki
normal, small-caps
font-weight
waga kroju
lighter, normal, bold, bolder, warto ci
liczbowe od 100 do 900
font-size
rozmiar czcionki
warto ci liczbowe, np. 12px, 9 pt
ś
ś
font-family
ś
Własno ci czcionek
ś
Parametry tekstu
Atrybut
Opis atrybutu
Warto ci
warto ci liczbowe
letter-spacing
odst p mi dzy
znakami
warto ci liczbowe
text-decoration
dekoracja tekstu
underline, overline, strikethrough
(przekre lony)
vertical-align
pionowe ustawienie
tekstu
bottom, middle, top, text-top, textbottom, baseline, sub, super, warto ci
procentowe
text-align
poziome ustawienie
tekstu
left, center, right, justify
(wy rodkowany), warto ci procentowe
text-transform
transformacja tekstu
np. na du e litery = uppercase;
capitalize, lowercase, none
text-indent
wielko
text-height
wysoko
ś
ś
ś
ć
warto ci liczbowe
Ŝ
linii
ś
ę
ć
ś
ś
wci cia tekstu warto ci liczbowe
ć
Ŝ
Ŝ
ś
Ŝ
ś
ś
ś
ś
ę
ę
ę
odst p mi dzy
wyrazami
ę
word-spacing
ą
ą
ą
Za pomoc własno ci przedstawionych w powy szej tabeli mo emy dowolnie formatowa tekst u ywaj c naprzykład nastepuj cych selektorów: p, text,
h1...h6, a, div, li, blockquote, code itd.
Przykłady:
p { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: normal; color: #002448; text-decoration:
none}
li { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: normal; color: #330099;
text-decoration: none}
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-style: normal; font-weight: bold; color: #2C2C43;
text-decoration: none}
code { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; font-weight: bold; color: #666666;
text-decoration: none}
Kolorowe tło
pierwszy akapit
drugi akapit
trzeci akapit
W ramach znacznika <p> wstaw styl definiuj cy kolor tła:
style='background:#CCCC99'
przykładowy kod html:
<p style='background:#CCCC99'>pierwszy akapit<br></p>
<p style='background:#E0E0E0'>drugi akapit<br></p>
<p style='background:#9DA2BF'>trzeci akapit<br></p>
Styl ten poprawnie interpretowany jest przez IE, natomiast Netscape interpretuje go cz ciowo. Aby uzyska ten
efekt nale y w sekcji HEAD wstawi poni szy znacznik styli wraz z kilkoma definicjami:
<style type="text/css">
<!-a:link {
font-family: arial;
text-decoration: none;
color: blue;
}
a:visited {
font-family: arial;
text-decoration: none;
color: blue;
}
a:hover {
color: red;
font-family: arial;
text-decoration: none;
}
a:active {
font-family: arial;
text-decoration: none;
color: blue;
}
-->
</style>
ZNACZENIE POSZCZEGÓLNYCH STYLI:
•
•
•
•
a:link - oznacza kolor i atrybuty linku "normalnego",
a:visited - okre la kolor i atrybuty linku odwiedzonego,
a:hover - okre la kolor i atrybuty linku pod wietlonego,
a:active - okre la kolor i atrybuty linku aktywnego.
ATRYBUTY:
•
•
•
•
font-family: - okre la krój czcionki (np. Arial, Verdana),
text-decoration: - okre la czy link ma by podkre lony (underline), czy nie podkre lony (none),
color: - okre la kolory (np. Red, Blue, #FFCC00),
font-size: - rozmiar czcionki (np. np. 12px, 9 pt).
Tworzenie pod wietlanych linków przedstawione zostało na stronie pod wietlane linki. W celu u ycia kilku, ró ego
rodzaju pod wietlanych linków, nale y w kodzie stylu linku zdefiniowa klasy:
Kod podstawy: (definiowanie stylu podstawowych linków)
a:link {}
a:active {}
a:visited {}
a:hover {}
Kod zawieraj cy klasy: (definiowanie stylów ró nych linków)
a.klasa:link {}
a.klasa:active {}
a.klasa:visited {}
a.klasa:hover {}
gdzie:
klasa - zdefiniowana przez Ciebie (dowolna, ale zaczynaj ca si od litery) nazwa klasy.
KOD ODNO NIKA WYKORZYSTUJ CEGO ZDEFINIOWAN KLAS :
<a href="strona.html" class="klasa">odno nik</a>
ś
PRZYKŁADY:
ś
pod wietlany link I, pod wietlany link II
A.right:link { color: #336699; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold;
line-height: normal; text-decoration: none}
A.right:visited { color: #9999FF; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold;
text-decoration: none}
A.right:hover { color: #996699; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold;
text-decoration: none}
A.right:active { color: #009999; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal;
text-decoration: none}
A.left:link { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold;
color: #CC0000; text-decoration: none}
A.left:hover { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold;
color: #FF9900; text-decoration: none}
A.left:visited { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold;
color: #336600; text-decoration: none}
A.left:active { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold;
color: #009999; text-decoration: none}
Gdzie right i left to dwie klasy
Uwaga!!!
Istotna jest kolejno aby działała funkcja hover - je eli umie cimy definicj hover po visited to efekt hover
b dzie widoczny tylko przed klikni ciem.