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
- 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
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se? | Interpretace procentních hodnot | Popis |
---|---|---|---|---|---|---|
font-family | seznam písem | záleží na prohlížeči | všechny elementy | ano | — | rodina písma |
font-style | normal | italic | oblique |
normal |
všechny elementy | ano | — | styl písma: normal=normální, italic=kurzíva, oblique=skloněné |
font-variant | normal | small-caps |
normal |
všechny elementy | ano | — | varianta písma: normální nebo kapitálky |
font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
normal |
všechny elementy | ano | — | duktus písma (tj. „jak bude písmo silné“) |
font-size | 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 | [font-style || font-variant || font-weight]? font-size [/ line-height]? font-family |
implicitní hodnoty jednotlivých vlastností | všechny elementy | ano | použitelné pro font-size a line-height | komplexní nastavení vlastností písma |
Vlastnosti pro nastavení barev a pozadí
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se? | Interpretace procentních hodnot | Popis |
---|---|---|---|---|---|---|
color | barva | záleží na prohlížeči | všechny elementy | ano | — | barva |
background-color | barva | transparent |
transparent |
všechny elementy | ne | — | barva pozadí |
background-image | URL | none |
none |
všechny elementy | ne | — | obrázek na pozadí |
background-repeat | repeat | repeat-x | repeat-y | no-repeat |
repeat |
všechny elementy | ne | — | směry, ve kterých se bude obrázek na pozadí opakovat |
background-attachment | scroll | fixed |
scroll |
všechny elementy | ne | — | pozadí se pohybuje se stránkou (scroll) nebo je jako přibité (fixed) |
background-position | [procento | délka] {1,2} | [top | center | bottom] || [left | center | right] |
0% 0% (odpovídá top left ) |
blokové a nahrazované elementy | ne | vztahují se k velikosti vlastního elementu | poloha obrázku na pozadí (udává se X a Y pozice) |
background | background-color || background-image || background-repeat || background-attachment || background-position |
implicitní hodnoty jednotlivých vlastností | všechny elementy | ne | pouze u background-position | komplexní nastavení vlastností pozadí |
Vlastnosti textu
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se? | Interpretace procentních hodnot | Popis |
---|---|---|---|---|---|---|
word-spacing | normal | délka |
normal |
všechny elementy | ano | — | o kolik se má zvětšit mezislovní mezera |
letter-spacing | normal | délka |
normal |
všechny elementy | ano | — | o kolik se má zvětšit mezera mezi jednotlivými písmeny |
text-decoration | none | [underline || overline || line-through || blink] |
none |
všechny elementy | ne | — | „ozdoba“ text: underline=podtržení, overline=čára nad, line-through=čára přes, blink=blikání |
vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | procento |
baseline |
inline elementy | ne | vztahují se na hodnotu line-height elementu |
vertikální zarovnání |
text-transform | capitalize | uppercase | lowercase | none |
none |
všechny elementy | ano | — | převod textu na: capitalize=kapitálky, uppercase=velká písmena; lowercase=malá písmena |
text-align | left | right | center | justify |
záleží na prohlížeči | blokové elementy | ano | — | zarovnání textu: left=na levý praporek, right=na pravý praporek, center=centrování, justify=do bloku |
text-indent | délka | procento |
0 | blokové elementy | ano | vztahují se k šířce rodičovského elementu | velikost odstavcové odrážky (odsazení první řádky odstavce) |
line-height | normal | číslo | délka | procento |
normal |
všechny elementy | 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) |
Vlastnosti boxů
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se? | Interpretace procentních hodnot | Popis |
---|---|---|---|---|---|---|
margin-top | délka | procento | auto |
0 | všechny elementy | no | vztahují se k šířce rodičovského elementu | velikost horního okraje |
margin-right | délka | procento | auto |
0 | všechny elementy | ne | vztahují se k šířce rodičovského elementu | velikost pravého okraje |
margin-bottom | délka | procento | auto |
0 | všechny elementy | ne | vztahují se k šířce rodičovského elementu | velikost spodního okraje |
margin-left | délka | procento | auto |
0 | všechny elementy | ne | vztahují se k šířce rodičovského elementu | velikost levého okraje |
margin | [délka | procento | auto] {1,4} |
implicitní hodnoty jednotlivých vlastností | všechny elementy | ne | 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 |
padding-top | délka | procento |
0 | všechny elementy | ne | vztahují se k šířce rodičovského elementu | velikost vnitřního horního okraje |
padding-right | délka | procento |
0 | všechny elementy | ne | vztahují se k šířce rodičovského elementu | velikost vnitřního pravého okraje |
padding-bottom | délka | procento |
0 | všechny elementy | ne | vztahují se k šířce rodičovského elementu | velikost vnitřního dolního okraje |
padding-left | délka | procento |
0 | všechny elementy | ne | vztahují se k šířce rodičovského elementu | velikost vnitřního levého okraje |
padding | [délka | procento] {1,4} |
0 | všechny elementy | ne | vztahují se k šířce rodičovského elementu | 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 |
border-top-width | thin | medium | thick | délka |
medium |
všechny elementy | ne | — | šířka horní části rámečku |
border-right-width | thin | medium | thick | délka |
medium |
všechny elementy | ne | — | šířka pravé části rámečku |
border-bottom-width | thin | medium | thick | délka |
medium |
všechny elementy | ne | — | šířka spodní části rámečku |
border-left-width | thin | medium | thick | délka |
medium |
všechny elementy | ne | — | šířka levé části rámečku |
border-width | [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 |
border-color | barva {1,4} |
hodnota vlastnosti color |
všechny elementy | ne | — | barva rámečku |
border-style | [none | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} |
none |
všechny elementy | ne | — | 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 1 hodnota: nohoře a vpravo a dole a vlevo |
border-top | border-top-width || border-style || barva |
implicitní hodnoty jednotlivých vlastností | všechny elementy | ne | — | nastavení vlastností horní části rámečku |
border-right | border-top-width || border-style || barva |
implicitní hodnoty jednotlivých vlastností | všechny elementy | ne | — | nastavení vlastností pravé části rámečku |
border-bottom | border-top-width || border-style || barva |
implicitní hodnoty jednotlivých vlastností | všechny elementy | ne | — | nastavení vlastností spodní části rámečku |
border-left | 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 |
float | left | right | none |
none |
všechny elementy | ne | — | left, right = plovoucí objekt (např. obrázek obtékaný textem), none = normální objekt |
clear | none | left | right | both |
none |
všechny elementy | ne | — | čekání na skončení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách |
Klasifikační vlastnosti
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se? | Interpretace procentních hodnot | Popis |
---|---|---|---|---|---|---|
display | block | inline | list-item | none |
block |
všechny elementy | ne | — | druh elementu |
white-space | normal | pre | nowrap |
normal |
blokové elementy | ano | — | způsob práce s mezerami: normal=normální, pre=mezery se zachovají, nowrap=text se nebude zalamovat do řádek |
list-style-type | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none |
disc |
elementy, které mají display: list-item |
ano | — | druh odrážek v seznamech |
list-style-image | URL | none |
none |
elementy, které mají display: list-item |
ano | — | obrázek použitý jako odrážka v seznamu |
list-style-position | inside | outside |
outside |
elementy, které mají display: list-item |
ano | — | umístění odrážky: outside=před textem, inside=v textu položky seznamu |
list-style | list-style-type || list-style-position || list-style-image |
implicitní hodnoty jednotlivých vlastností | elementy, které mají display: list-item |
ano | — | komplexní nastavení vzhledu položek seznamu |
Řízení pozice
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se? | Interpretace procentních hodnot | Popis |
---|---|---|---|---|---|---|
position | absolute | relative | static |
static |
všechny elementy | ano | — | způsob pozicování elementu;static odpovídá běžnému formátování |
left | délka | procento | auto |
auto |
všechny elementy | ne | — | posunutí elementu vpravo; záporná hodnota posune vlevo |
top | délka | procento | auto |
auto |
všechny elementy | ne | — | posunutí elementu dolů; záporná hodnota posune nahoru |
width height |
délka | procento | auto |
auto |
elementy blokové, nahrazované a s position: absolute |
ne | vztahují se k šířce (výšce) rodičovského elementu | šířka a výška elementu |
clip | auto | rect([délka | auto] [délka | auto] [délka | auto] [délka | auto]) |
auto |
elementy s position: absolute |
ne | — | definice obdélníkové části elementu, která bude viditelná (standardně je viditelný celý element) |
overflow | none | clip | scroll |
none |
elementy s relativní nebo absolutní pozicí | ne | — | způsob zobrazení elementů, jejichž obsah se nevejde do vyhrazeného prostoru:none = obsah elementu přeteče,clip = obsah elementu bude oříznut,scroll = po obsahu půjde skrolovat |
z-index | auto | číslo |
auto |
elementy s relativní nebo absolutní pozicí | ne | — | pozice elementu na pseudoose z |
visibility | inherit | visible | hidden |
inherit |
všechny elementy | pro inherit |
— | viditelnost elementu:visible = viditelný,hidden = neviditelný |
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 |
? | Předcházející entita je nepovinná |
{A,B} | 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. |
Absolutní jednotky:
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 |
pc |
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 |
př. #f00 je červená |
---|---|
#rrggbb |
př. #ffff00 je žlutá |
rgb(r, g, b) |
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(https://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 |
klasické patkové písmo (např. Times) |
---|---|
sans-serif |
bezpatkové písmo (např. Helvetica nebo Arial) |
cursive |
kurzíva |
fantasy |
ozdobné písmo |
monospace |
neproporcionální písmo (např. Courier) |
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
).