Přehled vlastností CSS

Jak psát web, hlavní stránka© Dušan Janovský 1999, 2000, 2001

font - text a odstavec - barvy a pozadí - velikost, okraje a rámečky - seznamy - pozicování

Snažil jsem se napsat stručný přehled vlastností a hodnot kaskádových stylů. Zejména jsem si vyhrál s příklady, které by měly být "živé" -- to znamená, že při jejich formátování byly použity přesně ty styly, jak jsou zapsány v textu příkladů. (Proto je tato stránka barevně i jinak "chudá" -- nechci nic zkazit kaskádováním.) Pokud se vám tedy nějaký příklad zobrazí špatně, znamená to, že jej váš prohlížeč nepodporuje. (Původně jsem tuto stránku dělal pouze jako test různých prohlížečů, jak jsou na tom s podporou CSS.)

Základní přínos této stránky spočívá v poznámkách na pravé straně tabulek a návaznost na předchozí kapitoly kurzu CSSúvod do CSS, strukturování textu, praktické použití stylů a složitější deklarace. Můžou se hodit i délkové jednotky v CSS.

 V prvním sloupci jsou vlastnosti použitelné při deklaraci stylu, v dalším sloupci použitelné hodnoty, ve třetím výklad významu těchto hodnot. Zápis stylu je potom symbolicky: selektor   {vlastnost: hodnota}. Např. body {color: red}. Podrobněji v předchozích textech.

Font

Vlastnost Hodnoty Význam Příklady Poznámky
font-family seznam písem Druh písma, font font-family: Arial CE, sans-serif Může se zadávat více písem za sebou, odděluje se čárkami. Pokud klient nemá v systému první font, bere další atd.

S touto deklarací má problém Opera.

font-style normal
italic
oblique
normální
kurzíva
skoněné
font-style: normal
font-style: italic
font-style: oblique
Skloněné písmo je prostá geometrická transformace, kurziva je jiný řez. Prohlížeče většinou užívají kůrzívu i při oblique.
font-variant normal
small-caps
normální
kapitálky

Font-variant: Small-caps
Kapitálky jsou velká písmena velikosti malých. Velká písmena by měla být trochu větší.

IE 5 udělá sice kapitálky, ale zmenší i velká písmena, což by neměl.

font-size xx-small
x-small
small
medium
large
x-large
xx-large
výška
procento
mrňavé
maličké
malé
střední
velké
obří
maxipsí
výška
zvětšení
font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: 14pt
font-size: 16px
font-size: 125%
Netscape se na procenta tváří divně. MS IE 3.x zase neumí správně zobrazovat jednotky em a ex.
font-weight normal
bold
bolder
lighter
100, 200, 300,
400, 500, 600,
700, 800, 900
normální
tučné
trochu tučnější
trochu světlejší
duktus
vyjádřený
číslem
font-weight: normal
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: 100 font-weight: 300,
font-weight: 400
font-weight: 500 font-weight: 600
font-weight: 800
font-weight: 900
U většiny fontů mají smysl jenom základní tloušťky: záleží to na výrobci fontu.

Bolder a lighter je málokde podporováno, doporučuji nepoužívat.

font   všechny
možné
předchozí
hodnoty
font: Arial 20px bold italic Tato deklarace je nejistá. Dobře funguje jen v FP editoru!!!

Použije-li se v deklaraci např. font: 12pt/14pt, údaj za lomítkem se vztahuje k vlastnosti line-height.

Text / odstavec

Vlastnost Hodnoty Význam Příklady Poznámky
text-decoration none
underline
overline
line-through
blink
bez dekorace
podtržení
"nadtržení"
přeškrtnutí
blikání
text-decoration: none
text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: blink
Teoreticky se dá zadávat více vlastností najednou.
Netscape 4 neumí overline.
MS IE neumí blinkat.
text-transform none
capitalize
uppercase
lowercase
nechat jak to je
Začátky Slov Velké
VELKÁ PÍSMENA
malá písmena
Text-Transform: none
Text-Transform: capitalize
Text-Transform: uppercase
Text-Transform: lowercase
 
word-spacing normal
délka
mezislovní mezera
zvětšená o délku
word-spacing: normal
word-spacing: 100px
Nepoužívá se a prohlížeče to nepodporují, snad pouze Opera a Mozilla
letter-spacing normal
délka
prostrkání znaků
zvětšené o délku
letter-spacing: normal
letter-spacing: 5pt
Netscape 4 nepodporuje
line-height normal
výška
násobek
procento
výška řádku
absolutní výška
násobek
zvětšení
line-height: 3
line-height: 8px
 
text-indent délka
procento
odsazení prvního
řádku

text-indent: 50
druhý řádek odstavce

Mozilla 5 na této stránce záhadně nepodporuje, normálně ale ano. Popis použití u českých odstavců
text-align left
right
center
justify
zarovnání vlevo
vpravo
na střed
do bloku
text-align: left

text-align: right

text-align: center

text-align: justify blablabla blablabla blablabla bla bla bla

Dá se použít jen u blokových elementů, tj. u věcí, které má smysl zarovnávat, například u odstavců.
vertical-align baseline
sub
super
top
text-top
middle
bottom
text-bottom
procento
na řádek
dolní index
horní index
co nejvýše
vršek k vršku
střed na střed
co nejníže
spodek ke spodku
procento výšky
baseline řádek
sub řádek
super řádek
top řádek
text-top řádek
middle řádek
bottom řádek
text-bottom řádek
bottom řádek
10% řádek
Vertikální zarovnání na řádku

Internet Explorer 4 a 5.0 podporuje jenom sub a super (pojem indexu zde neznamená zmenšování).

display block
inline
list-item
none
blokový element
řádkový element
seznam
nezobrazí se
display: block <br>
display: inline <br>
display: list-item <br>
display: none <br>
Jde o to říct prohlížeči, že některý element je druhu odstavec (blok), nebo že má být zarovnán do řádku, nebo že je to seznam.  Nejzajímavější je možnost nezobrazení. Ostatní hodnoty mají význam pouze při formátování XML dokumentů.
white-space normal
pre
nowrap
normální text
předformátovaný
nezalamovat
 Předformátovaný text zachovává mezery a konce řádků jako ve zdroji. Obdoba tagu <pre>.
Nezalamovaný neudělá automatický konec řádky.

Podle mých zkušeností nefunguje nikde.

Barvy a pozadí

Vlastnost Hodnoty Význam Příklady Poznámky
color barva barva písma color:blue Barva písma a základních rámečků nebo barva toho, k čemu se to vztahuje
background-color barva
transparent
barva pozadí
průhledné pozadí
background-color: yellow
background-color: transparent
 Barva pozadí
background-image none
url(cesta)

obrázek na pozadí
background-image: url('pozadi5.gif') Opera tady blbne, ale umí to.
background-repeat repeat
no-repeat
repeat-x
repeat-y
pozadí se opakuje
neopakuje
opakuje v ose X
nebo v ose Y
background-image: url('pozadi5.gif'); background-repeat: repeat
background-repeat: no-repeat
background-repeat:
repeat-x

background-repeat:
repeat-y
 
background-attachment scroll
fixed
pozadí se posouvá
pozadí je jako přibité
příklad má smysl pouze u pozadí stránky; fixed se používá zejména v souvislosti s rámy Netscape 4 neumí fixed
background-position top, center, bottom
left, center, right,
délka, procento
Umístění obrázku na pozadí

background-image: url('pozadi5.gif'); background-repeat: no-repeat; background-position: top right

Netscape 4.x neumí změnit polohu z levé horní, dokonce tuto vlastnost ani nezná.
background   všechny výše uvedé hodnoty background: url('pozadi5.gif') no-repeat scroll silver center bottom  

Velikost, okraje, rámečky

Vlastnosti uvedené v této tabulce lze spolehlivě aplikovat pouze na tzv. blokové elementy, což jsou většinou buňky nebo odstavce. Příklady se v tabulce nedají dost dobře udělat. Obrázek pod tabulkou ilustruje významy vlastností.
* Procenta v této tabulce se vztahují k šířce (výšce) rodičovského elementu
** Při zadávání čtyř hodnot najednou se vztahují ke stranám elementu v pořadí: horní, pravá, dolní, levá. Netscape 4 to nechápe.

Vlastnost Hodnoty Význam Příklady Poznámky
width auto
šířka
procento
automatická šířka
nastavená šířka
procento *
 Vizte popis délkových jednotek V IE nelze nastavit width pro body. V NN ano.

Prohlížeče se velmi liší v tom, u kterých objektů jsou ochotny šířku akceptovat.

height auto
výška
procento
automatická výška
nastavená výška
procento *
  Prohlížeče se velmi liší v tom, u kterých objektů jsou ochotny výšku akceptovat.
Spolehlivě funguje pouze u <div>
float left
right
none
umístění plovoucího (obtékaného)
objektu či zda
je neplavec

float: left

normální odstavec

float: right

V IE 4 nutno aplikovat na
div, img nebo object
clear left
right
both
none
čekání na skončení
plovoucích objektů
zleva, zprava,
obou, nebo žádných
  Používá se namísto atributu "clear" u tagu BR.
margin délka
procento
auto
šířka vnějšího okraje
procento *
automatický okraj
Vizte text o okrajích možno zadávat všechny čtyři okraje dohromady nebo zvlášť **
IE 5 asi nepodporuje záporné hodnoty, IE 4 a NN 4 ano
margin-top
margin-left
margin-bottom
margin-right
jako u margin horní vnější okraj
levý
spodní
pravý
Popis použití u českých odstavců
padding délka
procento
šířka vnitřního okraje
procento *
možno zadávat všechny čtyři okraje dohromady nebo zvlášť **
padding-top
padding-left
padding-bottom
padding-right
jako u padding horní vnitřní okraj
levý
spodní
pravý
 
border-width thin
medium
thick
délka
šířka rámečku slabá,
normální
tlustá
nastavená
Příklady v příloze možno zadávat všechny čtyři okraje dohromady nebo zvlášť **

Zjištěna chyba u Mozilly 5

border-width-top
border-width-left
border-width-bottom
border-width-right
jako u
border-width
horní šířka rámečku
levá
spodní
pravá
 
border-color barva barva rámečku nutno zadávat všechny čtyři okraje dohromady
border-style none, dotted, dashed,
solid, double, groove,
ridge, inset, outset
styl rámečku: žádný, tečkovaný, čárkovaný, plný, dvojitý, a čtyřikrát různě stínovaný IE zobrazuje doted a dashed jako solid a stínuje černou barvou, ostatní prohlížeče stínují šedou
border-top
border-left
border-bottom
border-right
barva, tloušťka
a styl
celkové vlastnosti
strany rámečku
Netscape 4 zcela ignoruje

* Procenta v této tabulce se vztahují k šířce (výšce) rodičovského elementu. Šířka rodiče je nejčastěji  šířka dokumentu (nezávislá na okně), kdežto procentuální výška nevnořených elementů se počítá z výšky okna!
** Při zadávání čtyř hodnot najednou se vztahují ke stranám elementu v pořadí: horní, pravá, dolní, levá.Formátovací model blokových elementů

Seznamy

Všechny vlastnosti seznamů lze podle mých zkušeností aplikovat na tagy <ul>, <dir>, <menu> a <li>. Některé podrobnosti chování CSS v seznamech.

Vlastnost Hodnoty Význam Příklady Poznámky
list-style-type disc
circle
square
decimal
lower-roman
lower-alpha
upper-alpha
none
puntík
kolečko
čtvereček
číslování
římské číslice
ábécéčkování
ABCD
bez odrážek
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • lower-alpha
  • upper-alpha
  • none
Netscape 4 nezvládá decimal a *-*
list-style-image none
URL(cesta)
normální nebo
obrázková odrážka
  • none
  • list-style-image: URL('pozadi5.gif')
Netscape 4 nepodporuje vůbec.
list-style-position inside
outside
odrážky v úrovni textu
odrážka mimo text
  • list-style-position: inside
  • list-style-position: outside
 
list-style všechny předchozí hodnoty      

Pozicování

Následující vlastnosti se někdy shrnují pod pojem CSS-P. Nefungují v IE 3, NN 3 a v Opeře 3. Příklady se v tabulce nedají udělat plně funkční. Vizte popis pozicování.

  Hodnoty Význam Poznámky
position absolute
relative
static
absolutní umístění
relativní umístění
normální umístění
Vizte popis pozicování.
left auto
délka
procento
bez posunutí
posunutí vpravo o délku
nebo o procento
Nemá smysl pro position: static.
Vlevo se posouvá zápornou hodnotou.
top auto
délka
procento
bez posunutí
posunutí dolů o délku
nebo o procento
Nemá smysl pro position: static.
Nahoru se posouvá zápornou hodnotou.
clip auto
rect(top right bottom left)
normální zobrazení
zadání obdélníku pro oříznutí elementu
Pouze pro elementy s position: absolute

Hodnoty v závorce udávají viditelný obdélník.
Top a left jsou souřadnice levého horního rohu vzhledem k elementu. Right a bottom jsou souřadnice pravého dolního rohu.
Místo hodnoty se může zadat "auto"; v tom směru se to nebude ořezávat.

Netscape 4 nezná!

overflow none
hidden
scroll
auto
nechat přetékat
oříznout
vždy rolovat
rolování, je-li třeba
pro elementy, které se nevejdou do vymezené oblasti nebo mají clip: rect

Netscape 4 vůbec nezná!

z-index auto
číslo
definice překrývání elementů
jakoby v ose z
Netscape 4 divně vykresluje některé překryvy. V elementech s nízkým z-index navíc v NN4 někdy nereagují odkazy.
visibility inherit
visible
hidden
neměněná viditelnost
viditelný element
skrytý (neviditelný)
u skrytých objektů se vyhradí místo, jako by tam byly.
Netscape 4 skryje pouze elementy s position: absolute nebo relative.

Další CSS vlastnosti Internet Exploreru: grafické filtry, barvení rolovací lišty, CSS kurzory

Vite též: hlavní stránka CSS, úvod do CSS, praktické použití stylů, třídy a identifikátory, zápis barev, různé prohlížeče, zápis stylu pro různé prohlížeče, omezení CSS, délkové jednotky v CSS, přehled HTML tagů

Vzhled této stránky je záměrně ubohý, aby se nenarušilo formátování příkladů.

Inspiroval jsem se podobným dílem Jiřího Koska, u nějž najdete trochu jinak zpracovaný popis vlastností CSS. Přesná specifikace CSS1 by měla být na www.w3c.org/TR/REC-CSS1 (anglicky).


Jak psát web: http://dusan.pc-slany.cz/internet/
Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz
Sláva kočkám! Poslední aktualizace 01.06.2001