© 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.
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. |
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 |
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 řádeksub řádeksuper řádektop řádektext-top řádekmiddle řádekbottom řádektext-bottom řádekbottom řádek10% řá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> |
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. |
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 |
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á.
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 |
|
Netscape 4 nezvládá decimal a *-* |
list-style-image | none URL(cesta) |
normální nebo obrázková odrážka |
|
Netscape 4 nepodporuje vůbec. |
list-style-position | inside outside |
odrážky v úrovni textu odrážka mimo text |
|
|
list-style | všechny předchozí hodnoty |
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. 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