Článek vytištěný ze serveru WebTip

Název článku: Praktická příručka CSS - Přehled všech vlastností CSS
Datum publikování: 11.02. 2002
URL článku: http://www.webtip.cz/art/wt_tech_html/wt_css_prehled.html (kliknětě pro návrat)

Všechna práva vyhrazena (c) 2000 Grafika Publishing s.r.o.
Doslovné ani částečně přebírání tohoto materiálu není povoleno bez předchozího písemného svolení vydavatele - společnosti Grafika Publishing s.r.o.

Praktická příručka CSS - Přehled všech vlastností CSS

Následující tabulka je shrnutím všech vlastností CSS2. Ke každé vlastnosti zde najdete všechny její povolené hodnoty; výchozí hodnotu, kterou má vlastnost nastavenu, dokud jí není přiřazena hodnota jiná; množinu prvků, v nichž lze vlastnost použít; určení, zda hodnoty této vlastnosti zdědí potomci daného prvku; v případě, že lze použít procentní hodnotu, je zde uvedeno, k čemu se procentní poměr vztahuje; a v posledním sloupci je uvedena skupina médií, pro něž je daná vlastnost platná.

Podrobnější popis každé vlastnosti je uveden v příslušných dílech příručky CSS. Odkaz od jména vlastnosti vede vždy na část příručky, která se touto vlastností a související problematikou zabývá. Odkazy se otevírají v novém okně.

Název Možné hodnoty Výchozí hodnota Kde lze použít
(prázdné = všechny prvky)		 Dědí se?
(prázdné = nedědí se)		 Procenta
(prázdné = nelze použít)		 Média
azimuth <úhel> | [[  left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind  ] | leftwards | rightwards | inherit center   ano   aurální
background [ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit       jen v background-position vizuální
background-attachment scroll | fixed | inherit scroll       vizuální
background-color <barva> | transparent | inherit transparent       vizuální
background-image <uri> | none | inherit none       vizuální
background-position [ [ <procenta> | <velikost> ]{1,2} | [ [ top | center | bottom ] || [ left | center | right ] ] ] | inherit 0% 0% blokové a nahrazované prvky   relativní k rozměrům boxu vizuální
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit repeat       vizuální
border [ border-width || border-style || <barva>  ] | inherit viz dílčí vlastnosti       vizuální
border-collapse collapse | separate | inherit collapse table a inline-table prvky ano   vizuální
border-color <barva>{1,4} | transparent | inherit viz dílčí vlastnosti       vizuální
border-spacing <velikost> <velikost>? | inherit 0 table a inline-table prvky ano   vizuální
border-style <border-style>{1,4} | inherit viz dílčí vlastnosti       vizuální
border-top
border-right
border-bottom
border-left 		[ border-top-width || border-style || <barva>  ] | inherit viz dílčí vlastnosti       vizuální
border-top-color
border-right-color
border-bottom-color
border-left-color 		<barva> | inherit hodnota vlastnosti color       vizuální
border-top-style
border-right-style
border-bottom-style
border-left-style 		<border-style> | inherit none       vizuální
border-top-width
border-right-width
border-bottom-width
border-left-width 		<border-width> | inherit medium       vizuální
border-width <border-width>{1,4} | inherit viz dílčí vlastnosti       vizuální
bottom <velikost> | <procenta> | auto | inherit auto pozicované prvky   vztahuje se k výšce omezujícího bloku vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
caption-side top | bottom | left | right | inherit top table-caption prvky ano   vizuální
clear none | left | right | both | inherit none blokové prvky     vizuální
clip <tvar> | auto | inherit auto blokové a nahrazované prvky     vizuální
color <barva> | inherit závisí na prohlížeči   ano   vizuální
content [ <řetězec> | <uri> | <počítadlo> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit prázdný řetězec pseudo-prvky :before a :after     všechna
counter-increment [ <identifikátor> <celé-číslo>? ]+ | none | inherit none       všechna
counter-reset [ <identifikátor> <celé-číslo>? ]+ | none | inherit none       všechna
cue [ cue-before || cue-after ] | inherit         aurální
cue-after <uri> | none | inherit none       aurální
cue-before <uri> | none | inherit none       aurální
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit auto   ano   vizuální, interaktivní
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
direction ltr | rtl | inherit ltr   ano   vizuální
display inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline       všechna
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
elevation <úhel> | below | level | above | higher | lower | inherit level   ano   aurální
empty-cells show | hide | inherit show table-cell prvky ano   vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
float left | right | none | inherit none všechny prvky kromě pozicovaných a generovaného obsahu     vizuální
font [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit viz dílčí vlastnosti   ano povoleno ve font-size a line-height vizuální
font-family [[ <family-name> | <generic-family> ],]* [ <family-name> | <generic-family> ] | inherit závisí na prohlížeči   ano   vizuální
font-size <absolutní-velikost> | <relativní-velikost> | <velikost> | <procenta> | inherit medium   ano, dědí se počítaná hodnota vzathuje se k velikosti písma rodičovského prvku vizuální
font-size-adjust <číslo> | none | inherit none   ano   vizuální
font-stretch normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal   ano   vizuální
font-style normal | italic | oblique | inherit normal   ano   vizuální
font-variant normal | small-caps | inherit normal   ano   vizuální
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal   ano   vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
height <velikost> | <procenta> | auto | inherit auto všechny prvky kromě nenahrazovaných inline prvků a sloupců a skupin sloupců v tabulkách     vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
left <velikost> | <procenta> | auto | inherit auto pozicované prvky   vztahuje se k šířce omezujícího bloku vizuální
letter-spacing normal | <velikost> | inherit normal   ano   vizuální
line-height normal | <číslo> | <velikost> | <procenta> | inherit normal   ano vztahuje se k velikosti písma prvku samotného vizuální
list-style [ list-style-type || list-style-position || list-style-image ] | inherit   prvky s display: list-item ano   vizuální
list-style-image <uri> | none | inherit none prvky s display: list-item ano   vizuální
list-style-position inside | outside | inherit outside prvky s display: list-item ano   vizuální
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit disc prvky s display: list-item ano   vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
margin <margin-width>{1,4} | inherit       vztahuje se k rozměrům omezujícího bloku vizuální
margin-top
margin-right
margin-bottom
margin-left		 <margin-width> | inherit 0     vztahuje se k rozměrům omezujícího bloku vizuální
marker-offset <velikost> | auto | inherit auto prvky s display: marker     vizuální
marks [ crop || cross ] | none | inherit none kontext stránky     vizuální, stránková
max-height <velikost> | <procenta> | none | inherit none všechny prvky kromě nenahrazovaných inline prvků a prvků tabulek   vztahuje se k výšce omezujícího bloku vizuální
max-width <velikost> | <procenta> | none | inherit none všechny prvky kromě nenahrazovaných inline prvků a prvků tabulek   vztahuje se k šířce omezujícího bloku vizuální
min-height <velikost> | <procenta> | inherit 0 všechny prvky kromě nenahrazovaných inline prvků a prvků tabulek   vztahuje se k výšce omezujícího bloku vizuální
min-width <velikost> | <procenta> | inherit závisí na prohlížeči všechny prvky kromě nenahrazovaných inline prvků a prvků tabulek   vztahuje se k šířce omezujícího bloku vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
orphans <celé-číslo> | inherit 2 blokové prvky ano   vizuální, stránková
outline [ outline-color || outline-style || outline-width ] | inherit viz dílčí vlastnosti       vizuální, interaktivní
outline-color <barva> | invert | inherit invert       vizuální, interaktivní
outline-style <border-style> | inherit none       vizuální, interaktivní
outline-width <border-width> | inherit medium       vizuální, interaktivní
overflow visible | hidden | scroll | auto | inherit visible blokové a nahrazované prvky     vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
padding <padding-width>{1,4} | inherit viz dílčí vlastnosti     relativní k šířce omezujícího bloku vizuální
padding-top
padding-right
padding-bottom
padding-left		 <padding-width> | inherit

0

     relativní k šířce omezujícího bloku vizuální
page <identifikátor> | auto auto blokové prvky ano   vizuální, stránková
page-break-after auto | always | avoid | left | right | inherit auto blokové prvky     vizuální, stránková
page-break-before auto | always | avoid | left | right | inherit auto blokové prvky     vizuální, stránková
page-break-inside avoid | auto | inherit auto blokové prvky ano   vizuální, stránková
pause [ [ <time> | <procenta> ]{1,2} ] | inherit závisí na prohlížeči     viz popis pause-before a pause-after ve specifikaci CSS aurální
pause-after <time> | <procenta> | inherit závisí na prohlížeči     viz specifikaci CSS aurální
pause-before <time> | <procenta> | inherit závisí na prohlížeči     viz specifikaci CSS aurální
pitch <frequency> | x-low | low | medium | high | x-high | inherit medium   ano   aurální
pitch-range <číslo> | inherit 50   ano   aurální
play-during <uri> mix? repeat? | auto | none | inherit auto       aurální
wt_cssserial_009.html#position static | relative | absolute | fixed | inherit static všechny prvky kromě generovaného obsahu     vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
quotes [ <řetězec> <řetězec> ]+ | none | inherit závisí na prohlížeči   ano   vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
richness <číslo> | inherit 50   ano   aurální
right <velikost> | <procenta> | auto | inherit auto pozicované prvky   vztahuje se k šířce omezujícího bloku vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
size <velikost>{1,2} | auto | portrait | landscape | inherit auto kontext stránky     vizuální, stránková
speak normal | none | spell-out | inherit normal   ano   aurální
speak-header once | always | inherit once prvky s informací v záhlaví tabulky ano   aurální
speak-numeral digits | continuous | inherit continuous   ano   aurální
speak-punctuation code | none | inherit none   ano   aurální
speech-rate <číslo> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit medium   ano   aurální
stress <číslo> | inherit 50   ano   aurální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
table-layout auto | fixed | inherit auto table a inline-table prvky     vizuální
text-align left | right | center | justify | <řetězec> | inherit závisí na prohlížeči a směru textu blokové prvky ano   vizuální
text-decoration none | [ underline || overline || line-through || blink ] | inherit none       vizuální
text-indent <velikost> | <procenta> | inherit 0 blokové prvky ano vztahuje se k šířce omezujícího bloku vizuální
text-shadow none | [ <barva> || <velikost> <velikost> <velikost>? ,]* [ <barva> || <velikost> <velikost> <velikost>? ] | inherit none       vizuální
text-transform capitalize | uppercase | lowercase | none | inherit none   ano   vizuální
top <velikost> | <procenta> | auto | inherit auto pozicované prvky   vztahuje se k výšce omezujícího bloku vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
unicode-bidi normal | embed | bidi-override | inherit normal všechny prvky, ale viz specifikaci CSS     vizuální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <procenta> | <velikost> | inherit baseline inline prvky a table-cell prvky   vztahuje se k line-height prvku samotného vizuální
visibility visible | hidden | collapse | inherit inherit       vizuální
voice-family [[ <specific-voice> | <generic-voice> ],]* [ <specific-voice> | <generic-voice> ] | inherit závisí na prohlížeči   ano   aurální
volume <číslo> | <procenta> | silent | x-soft | soft | medium | loud | x-loud | inherit medium   ano vztahuje se ke zděděné hodnotě aurální
Název Možné hodnoty Výchozí hodnota Kde lze použít Dědí se? Procenta Média
white-space normal | pre | nowrap | inherit normal blokové prvky ano   vizuální
widows <celé-číslo> | inherit 2 blokové prvky ano   vizuální, stránková
width <velikost> | <procenta> | auto | inherit auto všechny prvky kromě nenahrazovaných inline prvků a řádky a skupiny řádků v tabulkách   vztahuje se k šířce omezujícího bloku vizuální
word-spacing normal | <velikost> | inherit normal   ano   vizuální
z-index auto | <celé-číslo> | inherit auto pozicované prvky     vizuální

A na úplný závěr ještě jeden odkaz na stránky, které byste si měli určitě přečíst, pokud chcete výše uvedené někdy v praxi používat - malý katechismus dobrého webdesignéra.


Autor: Staníček Petr
E-mail: pixy@pixy.cz