CSS reference

CSS - stručná reference kaskádových stylů
1. font a parametry písma
font, font-family, font-size, font-style, font-variant, font-weight
1.1 font
Nastavuje většinu parametrů textu najednou. Jednotlivé atributy naleznete v kapitolách 1.2 - 1.6 a line-height v kapitole 3.2
font: [ font-style ]
[ font-variant ] [ font-weight ] font-size [ line-height ] font-family
1.2 font-family
Nastavuje typ fontu. Název fontu je klasické jméno fontu (např. Arial), obecný název je typ fontu (viz tabulka níže). Zadat lze jeden
název, nebo více názvů oddělených čárkou. V případě, že prohlížeč daný font nenalezne, zkusí použít další font ze seznamu.
font-family: název fontu | obecný název [, název fontu | obecný název ... ]
Obecné názvy fontů:
serif
patkové písmo (např. Times)
sans-serif
bezpatkové písmo (např. Helvetica)
cursive
skloněné písmo (např. Zapf-Chancery)
fantasy
ozdobné písmo (např. Western)
monospace neproporcionální písmo (např. Courier)
1.3 font-size
Nastavuje velikost písma. Velikost lze nastavit čtyřmi různými způsoby.
font-size: absolutní velikost | relativní velikost | výška | procenta
absolutní
relativní
výška
procenta
nabývá jedné z hodnot: xx-small, x-small, small, medium, large, x-large, xx-large, skutečnou velikost určí prohlížeč
poměrná velikost ke zděděné velikosti - nabývá dvou různých hodnot: larger, smaller
skutečná výška písma - nejčastěji se zadává v bodech (např. 12pt), nebo v pixelech (20px)
poměrná část velikosti rodičovského elementu
1.4 font-style
Nastavuje sklon písma. Styl italic je klasická kurzíva, oblique je umělé skosení rovného písma.
font-style: normal | italic | oblique
1.5 font-variant
Umožňuje zobrazit písmo KAPITÁLKAMI.
font-variant: normal | small-caps
1.6 font-weight
Nastavuje tučnost písma. Šířka normal odpovídá šířce 400, bold šířce 700. Varianty bolder a lighter upravují velikost relativně vůči
velikosti zděděné.
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
2. barva popředí a parametry pozadí
background, background-attachment, background-color, background-image, background-position, background-repeat, color
2.1 background
Nastavuje všechny parametry pozadí najednou. Jednotlivé parametry jsou vedeny v kapitolách 2.2 - 2.6.
background: [ background-color ] [ background-image ] [ background-repeat ] [ background-attachment ]
[ background-position ]
Pozn: jednotlivé parametry jsou nepovinné, ale alespoň jeden musí být nastaven
2.2 background-attachment
Nastavuje, zda bude obrázek na pozadí scrollovat s textem, nebo zda bude obrázek umístěn pevně vzhledem k oknu prohlížeče.
background-attachment: scroll | fixed
© Martin Kruliš – pouze ke studijním účelům
strana 1 z 8
CSS - stručná reference kaskádových stylů
2.3 background-color
Nastavuje barvu pozadí.
background-color: barva | transparent
2.4 background-image
Specifikuje obrázek na pozadí.
background-image: url | none
2.5 background-position
Určuje pozici obrázku na pozadí. Tato pozice je určena relativně proti levému hornímu rohu dokumentu, nebo okna prohlížeče v závislosti
na nastavení atributu background-attachment (viz 2.2). Souřadnice lze zadat jednak číselně (v pixelech - px, nebo procentech - %), nebo
pomocí klíčových slov: top (nahoru), center (na střed), bottom (dolů) a left (doleva), center (na střed), right (doprava).
background-position: x-souřadnice y-souřadnice | [ top | center | bottom ] [ left | center | right ]
2.6 background-repeat
Určuje, zda se bude obrázek na pozadí opakovat (jako dlaždice).
background-repeat: repeat | repeat-x | repeat-y | no-repeat
2.7 color
Nastavuje barvu popředí (touto barvou je např. zobrazen text).
color: barva
3. zarovnání a vlastnosti textu
letter-spacing, line-height, text-align, text-decoration, text-indent, text-transform, vertical-align
3.1 letter-spacing
Nastavuje velikost mezer mezi písmeny (prokládání písma).
letter-spacing: normal | velikost
3.2 line-height
Nastavuje velikost mezer mezi řádky. Způsob zadávání číslo je desetinné číslo zakončené znakem procenta (číslo 1.2% odpovídá 1.2
násobku výchozí velikosti - stejně tak jako 120 procent)
line-height: normal | číslo | velikost | procenta
3.3 text-align
Určuje způsob zarovnání textu: doleva (left), doprava (right), na střed (center) a do bloku (justify)
text-align: left | right | center| justify
3.4 text-decoration
Nastavuje dodatečnou dekoraci textu: podtržení (underline), s čárou nad (overline), přeškrtnuté (line-through) a blikající (blink)
text-decoration: none | underline | overline | line-through | blink
3.5 text-indent
Nastavuje velikost horizontálního odsazení před prvním řádkem textu uvnitř bloku (např. uvnitř tagu P, DIV …). Odsazení se aplikuje
pouze před úplně prvním řádkem, nikoli po zalomení tagem BR. Velikost odsazení může být i záporná.
text-indent: velikost | procenta
© Martin Kruliš – pouze ke studijním účelům
strana 2 z 8
CSS - stručná reference kaskádových stylů
3.6 text-transform
Nastavuje změnu velikosti znaků: každé první písmeno velké (capitalize), na velká písmena (uppercase) a na malá písmena (lowercase).
text-transform: capitalize | uppercase | lowercase | none
Pozn: velkými písmeny je myšleno velká písmena abecedy (A, B, C …), nikoliv velikost fontu
3.7 vertical-align
Vertikální umístění textu: dolní index (sub), nebo horní index (super).
vertical-align: sub | super
4. okraje, mezery, odsazení a obtékání
margin, margin-bottom, margin-left, margin-right, margin-top, padding, padding-bottom, padding-left, padding- right, padding-top, clear,
float, height, width, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-color, border-left,
border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-style,
border-top, border-top-color, border-top-style, border-top-width, border-width
4.1 margin (margin-bottom, margin-left, margin-right, margin-top)
Nastavuje velikost vnější mezery (mezi okrajem a okolními elementy). Tento atribut akceptuje zadání jedné až čtyř hodnot.
1 hodnota
určuje okraje pro všechny čtyři strany
2 hodnoty
1. je pro horní a dolní okraj a 2. pro levý a pravý okraj
3 hodnoty
1. je pro horní okraj, 2. pro levý a pravý a 3. hodnota je pro spodní okraj
4 hodnoty
v pořadí horní, pravý, dolní a levý okraj (pomůcka: po směru hod. ručiček a začínáme na 12 hod.)
Pozn: jsou povoleny i záporné hodnoty s výjimkou horního a dolního okraje, v případě, že je objekt zarovnán v řádku.
margin: [ velikost | procenta | auto ] {1-4}
Další varianty - margin-bottom (dolní okraj), margin-left (levý okraj), margin-right (pravý okraj), margin-top (horní okraj) nastavují
velikost mezery pouze na příslušné straně objektu.
margin-bottom: [ velikost | procenta | auto ]
4.2 padding (padding-bottom, padding-left, padding-right, padding-top)
Nastavuje velikost vnitřní mezery (mezi okrajem a vnitřními elementy). Tento atribut akceptuje zadání jedné až čtyř hodnot.
1 hodnota
určuje okraje pro všechny čtyři strany
2 hodnoty
1. je pro horní a dolní okraj a 2. pro levý a pravý okraj
3 hodnoty
1. je pro horní okraj, 2. pro levý a pravý a 3. hodnota je pro spodní okraj
4 hodnoty
v pořadí horní, pravý, dolní a levý okraj (stejně jako u atributu margin)
Pozn: záporné hodnoty nejsou povoleny.
padding: [ velikost | procenta ] {1-4}
Další varianty - padding-bottom (dolní okraj), padding-left (levý okraj), padding-right (pravý okraj), padding-top (horní okraj) nastavují
velikost mezery pouze na příslušné straně objektu.
padding-top: [ velikost | procenta ]
4.3 clear
Nastavuje stranu, kterou ostatní objekty nesmí obtékat tento objekt. Nastavení na none znamená, že objekty můžou obtékat po obou
stranách, left znamená, že objekty nesmí obtékat vlevo (ale můžou vpravo), both znamená, že objekty nesmí obtékat nikde.
clear: none | left | right | both
4.4 float
Nastavuje, kterou stranou je objekt obtékán textem. Left umístí objekt napravo a text jej obtéká zleva, right naopak.
float: left | right | none
© Martin Kruliš – pouze ke studijním účelům
strana 3 z 8
CSS - stručná reference kaskádových stylů
4.5 height, width
Nastavují výšku (height) a šířku (width) objektu.
height: velikost | procenta | auto
width: velikost | procenta | auto
4.6 border (border-bottom, border-left, border-right, border-top)
Nastavuje všechny parametry okraje najednou. Atribut border nastavuje okraj okolo celého objektu, atributy border-bottom (spodní
okraj), border-left (levý okraj), border-right (pravý okraj), border-top (horní okraj) nastavují okraj jen na příslušné straně objektu.
Jednotlivé parametry naleznete rozepsané v následujících kapitolách (4.8 a 4.9)
border: [ border-width ] [ border-style ] barva
4.7 border-color (border-bottom-color, border-left-color, border-right-color, border-top-color)
Nastavuje barvu okraje. Další atributy (border-bottom-color, border-left-color, border-right-color, border-top-color), nastavují barvu
okraje jen na příslušné straně objektu.
border-color: barva
4.8 border-style (border-bottom-style, border-left-style, border-right-style, border-top-style)
Nastavuje typ okraje. Další atributy (border-bottom-style, border-left-style, border-right-style, border-top-style), nastavují typ okraje jen
na příslušné straně objektu.
border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
doted
dashed
solid
double
tečkovaná
čárkovaná
plná
dvojitá
groove
ridge
inset
outset
3D
3D
3D
3D
stínování
stínování
stínování
stínování
-
rýha
výstupek
snížený
vyzdvižený
4.9 border-width (border-bottom-width, border-left-width, border-right-width, border-top-width)
Nastavuje šířku okraje. Tento atribut akceptuje zadání jedné až čtyř hodnot.
1 hodnota
určuje šířku pro všechny čtyři strany
2 hodnoty
1. je pro horní a dolní okraj a 2. pro levý a pravý okraj
3 hodnoty
1. je pro horní okraj, 2. pro levý a pravý a 3. hodnota je pro spodní okraj
4 hodnoty
v pořadí horní, pravý, dolní a levý okraj
border-width: [ thin | medium | thick | velikost ] {1-4}
Další varianty (border-bottom-width, border-left-width, border-right-width, border-top-width) nastavují šířku okraje pouze na příslušné
straně objektu.
border-left-width: [ velikost | procenta ]
5. parametry seznamů
list-style, list-style-image, list-style-position, list-style-type
5.1 list-style
Nastavuje všechny parametry seznamu najednou. Jednotlivé parametry naleznete v následujících kapitolách.
list-style: [ list-style-type ] [ list-style-position ] [ list-style-image ]
Pozn: list-style-type lze uvést i za list-style-image. V případě, že prohlížeč nedokáže obrázek (podle list-style-image) stáhnout,
použije se tvar podle list-style-type.
5.2 list-style-image
Nastavuje obrázek, který je použit místo klasických odrážek.
list-style-image: url | none
© Martin Kruliš – pouze ke studijním účelům
strana 4 z 8
CSS - stručná reference kaskádových stylů
5.3 list-style-position
Nastavuje, zda má být odrážka umístěna uvnitř (inside), nebo vně (outside) oblasti seznamu (nejvíce se projeví při nastavení okrajů viz artibut border - kapitola 4.6)
list-style-position: inside | outside
5.4 list-style-type
Nastavuje typ odrážek v seznamu: kroužek (disc), kolečko (circle), čtvereček (square), čísla (decimal), malá římská (lower-roman),
velká římská (upper-roman), malá písmena (lower-alpha), velká písmena (upper-alpha)
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
6. další atributy CSS
display, @import, !important
6.1 display
Nastavuje způsob, jakým bude objekt zobrazen. Hodnota none, zakáže prohlížeči objekt zobrazit (nebude pro něho ani vynecháno
místo), ostatní hodnoty způsobí, že se objekt zobrazí obvyklým způsobem.
display: none | block | inline | list-item
6.2 @import
Importuje externí soubor tříd CSS stylů. Tento atribut se používá v hlavičce uvnitř tagu STYLE.
@import: url(url)
6.3 !important
Zvedne prioritu atributu, za kterým následuje.
<STYLE> P { color:red!important } </STYLE>
…
<P style=”color:green”> Tento text bude červený </P>
7. pseudo-elementy CSS
active, link, visited, hover, first-letter, first-line
7.1 podtřídy tagu A (active, link, visited, hover)
Třída A nastavuje atributy CSS pro tag A. Pomocí podtříd lze nastavit formátování tagu A při různých příležitostech: výchozí (link), myš
přejíždí nad odkazem (hover), při kliknutí na odkaz (active), již navštívený odkaz (visited)
A:link { text-decoration: none }
A:hover { text-decoration: underline }
- pokud uživatel přejede myší nad odkaz, text odkazu se podtrhne.
7.2 first-letter
Nastavuje CSS atributy speciálně jen pro první písmeno textu.
P:first-letter { color: blue }
- zobrazí první písmeno v tagu P modře
7.3 first-line
Nastavuje CSS atributy speciálně jen pro první řádek textu.
P:first-line { font-size: larger }
© Martin Kruliš – pouze ke studijním účelům
- zobrazí první řádek relativně větším písmem
strana 5 z 8
CSS - stručná reference kaskádových stylů
8. ochutnávka CSS 2
clip, cursor, filter, left, overflow, position, top, visibility, z-index
8.1 clip
Ořízne objekt. Všechny části objektu, které se nachází mimo nastavený obdélník (rect), nebudou viditelné. Obdélník se zadá pomocí čtyř
rozměrů. Pozn: clip lze použít pouze pokud je atribut position (viz 8.3) nastaven na relative, nebo absolute.
clip: rect(horní, pravý, dolní, levý) | auto
8.2 overflow
Tento atribut určuje, jak se má objekt zachovat, pokud se do něho text nevejde. Tento atribut lze použít jen u tagů DIV, SPAN a
TEXTAREA. Tento atribut funguje pouze pokud je nastaven position (viz 8.3) na relative nebo absolute a jsou dány pevné rozměry
objektu pomocí width a height (viz 4.5).
overflow: scroll | hidden | visible | auto
scroll
hidden
visible
auto
textem lze uvnitř objektu scrollovat
text bude oříznut
objekt se roztáhne
prohlížeč určí sám (většinou začne také scrollovat)
8.3 position
Určuje jakým způsobem bude objekt zarovnáván. Výchozí hodnota je static (objekt podléhá klasickému zarovnání HTML). Hodnota
absolute zapíná absolutní zarovnání vůči oknu prohlížeče (nastavení left a top na 0, 0 odpovídá zarovnání k levému hornímu okraji okna
prohlížeče). Hodnota relative určuje, že je objekt zarovnán podle pravidel HTML a poté je vychýlen (hodnota left=0 a top=0 že objekt
nebude vychýlen vůbec).
position: absolute | relative | static
8.4 left a top
Určuje levou (left) resp. horní (top) souřadnice objektu. Tyto atributy má smysl nastavovat pouze při absolutním, nebo relativním
zarovnání.
left: velikost | procenta | auto
top: velikost | procenta | auto
8.5 visibility
Nastavuje viditelnost objektu. Na rozdíl od atributu display (viz 6.1) pro skrytý objekt se rezervuje místo na stránce. Hodnota inherit
říká, že viditelnost bude zděděna od otcovského elementu.
visibility: visible | hidden | inherit
8.6 z-index
Nastavuje hloubku objektu. Čím větší je hodnota, tím výše je objekt při vykreslení. Výška objektu se projeví pouze pokud se překrývá s
jiným. Tento parametr lze použít pouze v kombinaci s atributem position (viz 8.3) nastaveným na absolute, nebo relative.
z-index: hodnota | auto
8.7 cursor
Nastavuje tvar kurzoru myši při pohybu nad objektem.
cursor: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize |
se-resize | sw-resize | s-resize | w-resize | text | wait | help
auto
prohlížeč sám vybere
n-resize
kurzor změna velikosti nahoru
crosshair
zaměřovací křížek
s-resize
kurzor změna velikosti dolů
default
základní tvar (obyčejná šipka)
w-resize
kurzor změna velikosti doleva
hand
ukazovátko ve tvaru ruky
e-resize
kurzor změna velikosti doprava
move
kurzor pro přesun objektů
nw-resize
kurzor změna velikosti doleva-nahoru
text
kurzor pro výběr textu
ne-resize
kurzor změna velikosti doprava-nahoru
wait
přesýpací hodiny
sw-resize
kurzor změna velikosti doleva-dolu
help
šipka s otazníčkem
se- resize
kurzor změna velikosti doprava-dolu
© Martin Kruliš – pouze ke studijním účelům
strana 6 z 8
CSS - stručná reference kaskádových stylů
8.8 filter
Nastavuje grafické filtry, které se mají aplikovat při zobrazení objektu. Tento atribut lze použít pouze u grafických tagů a u tagů DIV a
SPAN, které mají nastavené pevné rozměry, nebo jsou umístěny pomocí absolutního zarovnání (viz 8.3). Kromě obyčejných statických
filtrů lze nastavit i přechodové filtry, které lze uplatnit v kombinaci s Java skriptem. Filtry jsou definovány v kaskádových stylech verze 3
a v současné době je podporuje pouze Internet Explorer (doporučuji nepoužívat). Zde je ukázka několika statických filtrů.
filter: názevFiltru(parametr1, parametr2, …) [ názevFiltru(parametr1, parametr2, …) …]
Alpha(Opacity=průhlednost)
- nastavuje průhlednost objektu (0 je úplně průhledný, 100 je úplně viditelný)
Blur(Add=sloučit s původním, Direction=směr ve stupních, Strength=síla rozmazání)
- rozmaže objekt
Chroma(color=barva)
- nastaví průhlednou barvu objektu
DropShadow(color=barva, OffX=horiz. vzdálenost, OffY=vert. vzdálenost, Positive=1)
- vykreslí stín objektu
FlipH a FlipV
- převrátí objekt H - horizontálně, V - vertikálně
Glow(color=barva, strength=velikost)
- zobrazí záři okolo objektu
Gray - zobrazí objekt v šedotónové škále barev
Invert - invertuje barvy objektu
XRay - speciální úprava, která má vypadat, jako by byl objekt pod rentgenem
9. přílohy
9.1 Syntaxe v tomto dokumentu
Syntaxe jednotlivých atributů v tomto dokumentu je zobrazena neproporcionálním písmem (Courier New). Klíčová slova, která je
potřeba zapsat tak jak jsou uvedena v tomto dokumentu jsou psána tučně, text psaný kurzívou je třeba nahradit např. hodnotou barvy
(viz 9.2) nebo rozměrem (viz 9.3).
Znak svislítka (roury) „|“ je použit k oddělování možností, ze kterých je třeba vybrat právě jednu. Hranaté závorky [ ] ohraničují
volitelnou část. Složené závorky { } s číslem uvnitř určují počet opakování (tj. [ číslo ] {1-4} znamená, že lze zadat jedno až čtyři
čísla).
Příklad:
lze zadat:
atribut:
atribut:
atribut:
atribut:
[ číslo | procenta | auto ] {1-3}
10
5% auto
auto auto auto
9.2 Zadávání hodnot barev
Barvy lze zadávat třemi základními způsoby: názvem v angličtině (red, green, blue …), ve tvaru #RRGGBB jako v HTML, nebo ve
tvaru: RGB červená zelená modrá kde jsou jednotlivé složky zadány desetinným číslem v rozsahu 0 - 1.
9.3 Zadávání rozměrů a velikostí
Rozměry lze zadávat v několika různých jednotkách: pixely (px), body (pt), picas (pc, 1pc = 12pt), milimetry (mm), centimetry (cm),
palce (in, 1in = 2,54cm) a rovněž v relativních velikostech: šířka písmene „m“ v akt. fomtu (em), výška písmene „x“ v akt. fontu (ex).
Jednotky je třeba uvést těsně za zadávanou hodnotou.
Např: H1 { font-size: 12pt; width: 100px; text-indent: 3em; }
© Martin Kruliš – pouze ke studijním účelům
strana 7 z 8
CSS - stručná reference kaskádových stylů
Obsah:
1. font a parametry písma
1
font, font-family, font-size, font-style, font-variant, font-weight
2. barva popředí a parametry pozadí
1
background, background-attachment, background-color, background-image, background-position, background-repeat, color
3. zarovnání a vlastnosti textu
2
letter-spacing, line-height, text-align, text-decoration, text-indent, text-transform, vertical-align
4. okraje, mezery, odsazení a obtékání
3
margin, padding, clear, float, height, width, border, border-color, border-style, border-width
5. parametry seznamů
4
list-style, list-style-image, list-style-position, list-style-type
6. další atributy CSS
5
display, @import, !important
7. pseudo-elementy CSS
5
active, link, visited, hover, first-letter, first-line
8. ochutnávka CSS 2
6
clip, cursor, filter, left, overflow, position, top, visibility, z-index
9. přílohy
7
Rejstřík:
active
background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
clear
clip
color
cursor
display
filter
first-letter
first-line
float
font
font-family
5
1
1
2
2
2
2
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
3
6
2
6
5
7
5
5
3
1
1
© Martin Kruliš – pouze ke studijním účelům
font-size
font-style
font-variant
font-weight
height
hover
@import
!important
left
letter-spacing
line-height
link
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
position
text-align
text-decoration
text-indent
text-transform
top
vertical-align
visibility
visited
width
z-index
1
1
1
1
4
5
5
5
6
2
2
5
4
4
5
5
3
3
3
3
3
6
3
3
3
3
3
6
2
2
2
3
6
3
6
5
4
6
strana 8 z 8