Referenční přehled CSS1
Stránka č. 1 z 9
Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje nejdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading Style Sheets, level 1, jsou však uspořádány do přehledných tabulek. © Jiří Kosek, 1997
Obsah z z z z z z z z z
Vlastnosti písma Vlastnosti pro nastavení barev a pozadí Vlastnosti textu Vlastnosti boxů Klasifikační vlastnosti Řízení pozice (Zatím se nachází ve fázi vývoje; z formálního hlediska se nejedná o standard.) Použitá syntaxe Jednotky Druhy elementů
Vlastnosti písma Aplikuje se na
Dědí se?
záleží na prohlížeči
všechny elementy
ano
normal | italic | oblique
normal
všechny elementy
fontvariant
normal | smallcaps
normal
fontweight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size
Vlastnost fontfamily
font-style
Možné hodnoty
seznam písem
Implicitní hodnota
Interpretace procentních hodnot
Popis
--
rodina písma
ano
--
styl písma: normal=normální, italic=kurzíva, oblique=skloněné
všechny elementy
ano
--
varianta písma: normální nebo kapitálky
normal
všechny elementy
ano
--
duktus písma (tj. "jak bude písmo silné")
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | délka | procento
medium
všechny elementy
ano
relativně k rodičovské velikosti písma
velikost písma
[font-style || font-
implicitní
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
použitelné pro
5.12.2002
Referenční přehled CSS1
font
Stránka č. 2 z 9
variant || fontweight]? font-size [/ line-height]? font-family
hodnoty jednotlivých vlastností
všechny elementy
ano
font-size a lineheight
komplexní nastavení vlastností písma
Vlastnosti pro nastavení barev a pozadí Vlastnost
Implicitní hodnota
Možné hodnoty
Aplikuje se na
Dědí se?
Interpretace procentních hodnot
Popis
barva
záleží na prohlížeči
všechny elementy
ano
--
barva
backgroundcolor
barva | transparent
transparent
všechny elementy
ne
--
barva pozadí
backgroundimage
URL | none
none
všechny elementy
ne
--
obrázek na pozadí
backgroundrepeat
repeat | repeat-x | repeat-y | norepeat repeat
--
směry, ve kterých se bude obrázek na pozadí opakovat
ne
--
pozadí se pohybuje se stránkou (scroll) nebo je jako přibité (fixed)
ne
vztahují se k velikosti vlastního elementu
poloha obrázku na pozadí (udává se X a Y pozice)
ne
pouze u backgroundposition
komplexní nastavení vlastností pozadí
color
všechny elementy
všechny elementy
backgroundattachment
scroll | fixed
backgroundposition
[procento | délka] {1,2} | [top | 0% 0% (odpovídá center | bottom] top left) || [left | center | right]
background
background-color || background-image || background-repeat || background-attachment || background-position
scroll
blokové a nahrazované elementy
implicitní hodnoty všechny jednotlivých elementy vlastností
ne
Vlastnosti textu Vlastnost
Možné hodnoty
Implicitní hodnota
Aplikuje se na
Dědí se?
Interpretace procentních hodnot
Popis
wordspacing
normal | délka
normal
všechny elementy
ano
--
o kolik se má zvětšit mezislovní mezera
letterspacing
normal | délka
normal
všechny elementy
ano
--
o kolik se má zvětšit mezera mezi jednotlivými písmeny
textdecoration
none | [underline || overline || line-through || blink]
--
"ozdoba" text: underline=podtržení, overline=čára nad, linethrough=čára přes, blink=blikání
none
všechny elementy
ne
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
5.12.2002
Referenční přehled CSS1
verticalalign
Stránka č. 3 z 9
baseline | sub | super | top | text-top | middle | bottom | textbottom | procento
texttransform
capitalize | uppercase | lowercase | none
text-align
left | right | center | justify
text-indent délka | procento
line-height
normal | číslo | délka | procento
baseline
inline elementy
none
všechny elementy
záleží na prohlížeči
blokové elementy
0
blokové elementy
normal
všechny elementy
vztahují se na hodnotu lineheight elementu
vertikální zarovnání
--
převod textu na: capitalize=kapitálky, uppercase=velká písmena; lowercase=malá písmena
ano
--
zarovnání textu: left=na levý praporek, right=na pravý praporek, center=centrování, justify=do bloku
ano
vztahují se k šířce rodičovského elementu
velikost odstavcové odrážky (odsazení první řádky odstavce)
ano
relativně k velikosti písma elementu
výška řádky; číslo udává násobek velikosti písma (většinou by měl být alespoň 1.2)
ne
ano
Vlastnosti boxů Vlastnost
Možné hodnoty
margintop
délka | procento | auto
marginright
délka | procento | auto
marginbottom
délka | procento | auto
marginleft
délka | procento | auto
margin
[délka | procento | auto] {1,4}
Implicitní hodnota
Aplikuje se na
0
všechny elementy
0
všechny elementy
0
všechny elementy
0
všechny elementy
implicitní hodnoty jednotlivých vlastností
všechny elementy
Dědí se?
Interpretace procentních hodnot
Popis
no
vztahují se k šířce rodičovského elementu
velikost horního okraje
ne
vztahují se k šířce rodičovského elementu
velikost pravého okraje
ne
vztahují se k šířce rodičovského elementu
velikost spodního okraje
ne
vztahují se k šířce rodičovského elementu
velikost levého okraje
vztahují se k šířce rodičovského elementu
komplexní nastavení velikosti okrajů 4 hodnoty: nahoře, vpravo, dole, vlevo 3 hodnoty: nahoře, vpravo a vlevo, dole 2 hodnoty: nahoře a dole, vpravo a vlevo 1 hodnota: nohoře a vpravo a dole a vlevo
ne
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
5.12.2002
Referenční přehled CSS1
paddingtop
délka | procento
paddingright
délka | procento
paddingbottom
paddingleft
délka | procento
délka | procento
Stránka č. 4 z 9
0
všechny elementy
0
všechny elementy
0
všechny elementy
0
všechny elementy
ne
vztahují se k šířce rodičovského elementu
velikost vnitřního horního okraje
ne
vztahují se k šířce rodičovského elementu
velikost vnitřního pravého okraje
ne
vztahují se k šířce rodičovského elementu
velikost vnitřního dolního okraje
ne
vztahují se k šířce rodičovského elementu
velikost vnitřního levého okraje komplexní nastavení velikostí vnitřního okraje 4 hodnoty: nahoře, vpravo, dole, vlevo 3 hodnoty: nahoře, vpravo a vlevo, dole 2 hodnoty: nahoře a dole, vpravo a vlevo 1 hodnota: nohoře a vpravo a dole a vlevo
0
všechny elementy
ne
vztahují se k šířce rodičovského elementu
thin | medium | thick | délka
medium
všechny elementy
ne
--
šířka horní části rámečku
borderrightwidth
thin | medium | thick | délka
medium
všechny elementy
ne
--
šířka pravé části rámečku
borderbottomwidth
thin | medium | thick | délka
medium
všechny elementy
ne
--
šířka spodní části rámečku
borderleft-width
thin | medium | thick | délka
medium
všechny elementy
ne
--
šířka levé části rámečku
padding
[délka | procento] {1,4}
bordertop-width
borderwidth
[thin | medium | thick | délka] {1,4}
implicitní hodnoty jednotlivých vlastností
všechny elementy
ne
--
komplexní nastavení šířky rámečku 4 hodnoty: nahoře, vpravo, dole, vlevo 3 hodnoty: nahoře, vpravo a vlevo, dole 2 hodnoty: nahoře a dole, vpravo a vlevo 1 hodnota: nohoře a vpravo a dole a vlevo
bordercolor
barva {1,4}
hodnota vlastnosti color
všechny elementy
ne
--
barva rámečku
borderstyle
[none | dotted | dashed | solid | double | groove | ridge | inset
--
nastavení tvaru rámečku: 4 hodnoty: nahoře, vpravo, dole, vlevo 3 hodnoty: nahoře, vpravo a vlevo, dole 2 hodnoty: nahoře a dole, vpravo a vlevo
none
všechny elementy
ne
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
5.12.2002
Referenční přehled CSS1
Stránka č. 5 z 9
| outset] {1,4}
1 hodnota: nohoře a vpravo a dole a vlevo
bordertop
border-top-width || border-style || barva
implicitní hodnoty jednotlivých vlastností
všechny elementy
ne
--
nastavení vlastností horní části rámečku
borderright
border-top-width || border-style || barva
implicitní hodnoty jednotlivých vlastností
všechny elementy
ne
--
nastavení vlastností pravé části rámečku
borderbottom
border-top-width || border-style || barva
implicitní hodnoty jednotlivých vlastností
všechny elementy
ne
--
nastavení vlastností spodní části rámečku
borderleft
border-top-width || border-style || barva
implicitní hodnoty jednotlivých vlastností
všechny elementy
ne
--
nastavení vlastností levé části rámečku
border
border-width || border-style || barva
implicitní hodnoty jednotlivých vlastností
všechny elementy
ne
--
komplexní nastavení vlastností rámečku
width
délka | procento | auto
auto
blokové a nahrazované elementy
ne
vztahují se k šířce rodičovského elementu
šířka
height
délka | auto
auto
blokové a nahrazované elementy
ne
--
výška
none
všechny elementy
--
left, right = plovoucí objekt (např. obrázek obtékaný textem), none = normální objekt
none
všechny elementy
--
čekání na skončení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách
float
left | right | none
clear
none | left | right | both
ne
ne
Klasifikační vlastnosti Vlastnost
display
whitespace
Možné hodnoty block | inline | list-item | none
normal | pre | nowrap
Implicitní hodnota
block
normal
Aplikuje se na
všechny elementy
blokové elementy
Dědí se?
Interpretace procentních hodnot
ne
--
druh elementu
--
způsob práce s mezerami: normal=normální, pre=mezery se zachovají, nowrap=text se nebude zalamovat do řádek
ano
Popis
disc | circle |
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
5.12.2002
Referenční přehled CSS1
list-styletype
square | decimal | lower-roman | upperroman | lower-alpha | upperalpha | none
Stránka č. 6 z 9
disc
elementy, které mají display: list-item
ano
--
druh odrážek v seznamech
none
elementy, které mají display: list-item
ano
--
obrázek použitý jako odrážka v seznamu
ano
--
umístění odrážky: outside=před textem, inside=v textu položky seznamu
ano
--
komplexní nastavení vzhledu položek seznamu
list-styleimage
URL | none
list-styleposition
inside | outside
outside
elementy, které mají display: list-item
list-style
list-style-type || list-style-position || list-styleimage
implicitní hodnoty jednotlivých vlastností
elementy, které mají display: list-item
Implicitní hodnota
Aplikuje se na
Řízení pozice Vlastnost
position
Možné hodnoty
absolute | relative | static
left
délka | procento | auto
top
délka | procento | auto
width height
clip
délka | procento | auto
auto | rect ([délka | auto] [délka | auto] [délka | auto] [délka | auto])
static
auto
všechny elementy
všechny elementy
auto
všechny elementy
auto
elementy blokové, nahrazované a s position: absolute
auto
elementy s position: absolute
Interpretace procentních hodnot
Dědí se?
Popis
--
způsob pozicování elementu; static odpovídá běžnému formátování
--
posunutí elementu vpravo; záporná hodnota posune vlevo
ne
--
posunutí elementu dolů; záporná hodnota posune nahoru
ne
vztahují se k šířce (výšce) rodičovského elementu
šířka a výška elementu
--
definice obdélníkové části elementu, která bude viditelná (standardně je viditelný celý element)
ano
ne
ne
způsob zobrazení elementů, jejichž obsah se nevejde do vyhrazeného prostoru:
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
5.12.2002
Referenční přehled CSS1
overflow
z-index
visibility
Stránka č. 7 z 9
none | clip | scroll
none
elementy s relativní nebo absolutní pozicí
ne
--
none = obsah elementu přeteče, clip = obsah elementu bude oříznut, scroll = po obsahu půjde skrolovat
auto | číslo
auto
elementy s relativní nebo absolutní pozicí
ne
--
pozice elementu na pseudoose z
--
viditelnost elementu: visible = viditelný, hidden = neviditelný
inherit | visible | hidden
inherit
všechny elementy
pro inherit
Použitá syntaxe A|B
Právě jedna z entit A a B
A || B
Alespoň jedna z entit A a B v libovolném pořadí
[ ... ]
Skupiny
? {A,B}
Předcházející entita je nepovinná Předcházející entita se opakuje nejméně A-krát a nejvíce B-krát
Jednotky Délkové jednotky Délkové údaje se zapisují jako celá nebo desetinná čísla s nebo bez znaménka. Dvojice písmen identifikující jednotky musí být připojena ihned za číslem. Relativní jednotky: em
Výška aktuálního písma. Odpovídá šířce písmene 'M'.
ex
Výška písmene 'x'.
px
Pixely -- 1 pixel odpovídá jednomu bodu obrazovky.
in
Palce. 1 in = 2,54 cm = 72 pt
cm
Centimetry.
mm
Milimetry. 10 mm = 1 cm
pt
Body. 1 pt = 1/72 in = 1/12 pc
Absolutní jednotky:
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
5.12.2002
Referenční přehled CSS1
pc
Stránka č. 8 z 9
Pica. 1 pc = 12 pt
Procenta Procenta se zapisují jako celá nebo desetinná čísla s nebo bez znaménka, za kterými ihned následuje znak '%'. Hodnoty zadané jako procento se relativně vztahují k nějaké jiné hodnotě, od které se odvodí absolutní velikost. Pokud používáme procenta, musíme si vždy uvědomit, od které hodnoty se bude absolutní velikost odvíjet. Většinou se jedná o šířku elementu.
Čísla Číslo je celé nebo desetinné s nebo bez znaménka.
Barvy Při specfikování barev máme několik možností. Tou první je použití jména barvy. Jména jsou stejná jako v HTML a jsou následující: aqua (jasná modrozelená), black (černá), blue (modrá), fuchsia (anilínová červeň), gray (šedivá), green (zelená), lime (citrónově zelená), maroon (kaštanová), navy (tmavá modř), olive (olivová), purple (purpurová), red (červená), silver(stříbrná), teal (tmavá modrozelená), white (bílá), yellow (žlutá). Druhou možností je zapsat barvu přímo v RGB notaci pomocí červené, zelené a modré složky barvy. Jsou celkem čtyři možnosti: #rgb #rrggbb rgb(r, g, b)
př. #f00 je červená př. #ffff00 je žlutá r, g, b jsou od 0 do 255
rgb(r%, g%, b%) r, g, b jsou od 0 do 100
URL Zápis URL si nejlépe ukážeme na příkladě: url(http://www.server.cz/info/img/logo.gif)
Závorky, čárky, mezery a uvozovky musíme zapsat tak, že jim předřadíme zpětné lomítko '\'.
Seznam písem Písma zadáváme jako čárkami odděleněný seznam jejich názvů. Písma uvedná dříve mají větší prioritu. Jako poslední písmo v seznamu bychom měli vždy uvést obecný název písma: serif sans-serif
klasické patkové písmo (např. Times) bezpatkové písmo (např. Helvetica nebo Arial)
cursive
kurzíva
fantasy
ozdobné písmo
monospace
neproporcionální písmo (např. Courier)
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
5.12.2002
Referenční přehled CSS1
Stránka č. 9 z 9
Druhy elementů Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. H1 a P). Inline elementy jsou běžnou součástí textu na řádce. Nemají okolo sebe žádné zalomení řádek (např. STRONG). Nahrazované elementy jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG a OBJECT). Stránku připravil Jiří Kosek,
[email protected] Poslední modifikace: 09-11-97
file://C:\www\texty\Referenční%20přehled%20CSS1.htm
5.12.2002
