přehled vlastností kaskádových Stylů (CSS)

 
 Formátování písma
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.
font-style normal
italic
oblique		 normální
kurzíva
skloněné		 font-style: normal
font-style: italic
font-style: oblique		 Skloněné písmo (oblique) má být prostá geometrická transformace, kurzíva je jiný řez. Prohlížeče většinou užívají kurzí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%		 U různých prohlížečů nutno vyzkoušet!!
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

 

Bolder a lighter se doporučuje nepoužívat.
font všechny možné předchozí hodnoty nebo systémové písmo font: italic bold 20px Arial Tato deklarace je citlivá na pořadí jednotlivých údajů. Musí se použít v pořadí: kurzíva tučnost  velikost jméno.!!!!

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

 

Formátování textu a odstavce
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.

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		 Od IE 6.
letter-spacing normal
délka		 prostrkání znaků
zvětšené o délku		 letter-spacing: normal
letter-spacing: 5pt		  

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
line-height: 80%		  

text-

indent

 délka
procento		 odsazení prvního
řádku

text-indent: 50px;
druhý řádek odstavce

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
30% řádek
 Vertikální zarovnání nízkého prvku na vyšším řádku

Vlastnosti top, middle a bottom se dají použít u buněk tabulky a u obrázků na řádku.
display block
inline
list-item
none		 blokový element
řádkový element
seznam
nezobrazí se		 display: block

display: inline

display: list-item

display: none
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.
Nezalamovaný neudělá automatický konec řádky.

 

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í. Dá se zadávat libovolná barva dle tabulky.

background

-image

 none
url(cesta)
obrázek na pozadí		 background-image: url('pozadi5.gif')  
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  
background-position top, center, bottom

left, center, right,

délka, procento		 Poloha obrázku na pozadí
(nejčastěji pokud se neopakuje)

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

 2 hodnoty se oddělují mezerou. První patří k horizontální, druhá hodnota k vertikální poloze.
background   všechny výše uvedé hodnoty background: url('pozadi5.gif') no-repeat scroll silver center bottom

 

Velikost a obtékání
Vlastnost Hodnoty Význam Příklady Poznámky
width auto
šířka
procento		 automatická šířka
nastavená šířka
procento *		  
 V IE nelze nastavit width pro body.

Prohlížeče se velmi liší v tom, u kterých objektů jsou ochotny šířku akceptovat. Myslím, že to má souvislost s blokovými a řádkovými elementy.

V Internet Exploreru 4 a vyšších je do šířky nesprávně započítávána šířka paddingu a borderu (to je quirk mode). Opera, Mozilla (a IE6 ve standardním režimu) počítají správně.
height auto
výška
procento		 automatická výška
nastavená výška
procento *		   Dá se nastavit jenom blokovým tagům.
Nejlépe funguje u
.
float left
right
none		 umístění plovoucího (obtékaného)
objektu či zda
je neplavec

float: left

normální odstavec

float: right

  
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.
Většinou u nadpisů pod obrázky.

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!

 

Okraje
Vlastnost Hodnoty Význam Příklady Poznámky
margin
délka
procento
auto		 šířka vnějšího okraje
procento *
automatický okraj
Je 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 vnější okraj
horní 
levý
spodní
pravý
Zápis vlastnost-strana Netsape 4 v některých verzích neumí
padding délka
procento		 šířka vnitřního okraje
procento *

Je 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ý		   Zápis vlastnost-strana Netsape 4 neumí

** Při zadávání čtyř hodnot najednou se vztahují ke stranám elementu v pořadí: horní, pravá, dolní, levá. Např.: padding: 12px 3px 6px 9px

Vlastnosti uvedené v této tabulce lze spolehlivě aplikovat pouze na tzv. blokové elementy, což jsou většinou buňky tabulky nebo odstavce !!!!

Pozor na správnou interpretaci vlastností !

Blokový model v CSS:
Formátovací model blokových elementů

 Formátovací model blokových elementů v Internet Exploreru

 

Rámečky
Vlastnost Hodnoty Význam Příklady Poznámky
border-width thin
medium
thick
délka		 šířka rámečku slabá,
normální
tlustá
nastavená
Je možno zadávat všechny čtyři okraje dohromady nebo zvlášť **
border-top-width
border-left-width
border-bottom-width
border-right-width		 jako u
border-width		 horní šířka rámečku
levá
spodní
pravá		  

Měl jsem tu dlouho chybu. Není to border-width-strana, ale border-strana-width.
border-color barva barva rámečku

border-color: red;
border-style: solid

 Je možno zadávat všechny čtyři okraje dohromady nebo zvlášť **

Pro NN 4 nelze rozlišovat jednotlivé čtyři okraje
border-style

none,
dotted,
dashed,
solid,
double,
groove,
ridge, 
inset, 
outset		 Druh rámečku žádný,
tečkovaný,
čárkovaný,
plný,
dvojitý,
příkop,
val,
ďolík, 
návrší		 border-style: none

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

 IE 4 a 5 zobrazuje doted a dashed jako solid a stínuje vše černou barvou (proto je příklad v zelené, aby bylo alespoň něco vidět).
Ostatní prohlížeče včetně IE 5.5 zobrazují správně a stínují šedou. 
IE 6 zobrazuje úzkou dotted jako dashed
Netscape styl rámečku podporuje pouze v zápisu border:
border-top
border-left
border-bottom
border-right		 barva, tloušťka
a styl		 celkové vlastnosti
strany rámečku		  
  
border barva, tloušťka
a styl		 všechny vlastnosti rámečku

border: solid blue 2px

  

Slovníček okrajů a rámečků
border margin padding width top bottom left right
rámeček vnější okraj vnitřní okraj šířka (rámečku) horní spodní levý pravý

Prohlížeče se velmi liší v tom, na jaký tag dovolí okraje a velikost aplikovat. U některých tagů styl prostě ignorují. V příkladech je použit odstavec

.

** Při zadávání čtyř hodnot najednou se vztahují ke stranám elementu v pořadí: horní, pravá, dolní, levá.

 

Seznamy
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  (puntík)
  • circle
  • square
  • decimal
  • lower-roman
  • lower-alpha
  • upper-alpha
  • none
  

list-style-

image

 none
URL(cesta)		 normální nebo
obrázková odrážka
  • none
  • list-style-image: URL('pozadi5.gif')
  
list-style-position inside
outside		 odrážky v úrovni textu
odrážka mimo text
  • list-style-position: inside
  • list-style-position: outside
 při inside je puntík jakoby součástí dalšího textu
list-style všechny předchozí hodnoty 

 

Tabulky

 

Vlastnost hodnoty význam poznámky
table-layout auto
fixed		 nerozměrovaná tabulka se přizpusobuje oknu;
fixed = tabulka se nezužuje do okna		 Podpora v IE 5+, v Mozille a v Opeře. Použití pouze u tagu  
border-collapse separate


collapse		 buňky v tabulce mají rámečky oddělené

sousední buňky mají vykreslený rámeček společně jednou čarou		 Podpora v IE 5+, v Mozille a v Opeře. Použití pouze u tagu  
border-spacing délka vzdálenost mezi rámečky sousedních buněk Nefunguje v Internet Exploreru, takže v praxi je nutno používat zastaralý HTML atribut cellspacing

 

Zdroj:www.jakpsatweb.cz

Kontakt

Zdeněk Sovadina

zdeneksov@volny.cz

Osvobození 142
691 10 Kobylí

Vyhledávání

© SOZDA 2008 Všechna práva vyhrazena.

Vytvořte si www stránky zdarma!Webnode