Ako na to  |  Príručka CSS

Farba a pozadie

Vlastnosť Hodnota Príklad
COLOR
...farba textu
  {color:rgb(255,0,0)}
{color: #00CCFF }
{ color:rgb(100%,0%,0%)}
{color:#f00}
{color: red }
BACKGROUND-COLOR
...farba pozadia
  {background-color:#f00}
BACKGROUND-IMAGE
...pozadie,obrázok
  {background-image:url("obrazok.gif")}
BACKGROUND-REPEAT
...opakovanie
REPEAT ...opakovanie obrázku na pozadí
NO-REPEAT ...bez opakovania
REPEAT-X ...opakovanie horizontálne
REPEAT-Y ...opakovanie vertikálne
{background-repeat:no-repeat}
BACKGROUND-ATTACHMENT
...rolovanie
SCROLL ...pozadie roluje s dokumentom
FIXED ...pozadie je zafixované
{background-attachment:fixed}
BACKGROUND-POSITION
...pozícia pozadia
TOP LEFT ...0%,0%
RIGHT TOP ...100%,0%
CENTER TOP ...50%,0%
CENTER ...50%,50%
RIGHT CENTER ...100%,50%
BOTTOM LEFT ...0%,100%
BOTTOM CENTER ...50%,100%
BOTTOM RIGHT ...100%,100%
40% 20%
10px 10px
body { background-position: 98% 2% }
body { background-position: top left}
BACKGROUND
...(skratka)
  { background: url("favicon.gif") 98% 2% 
no-repeat fixed}

 
Text

Vlastnosť Hodnota Príklad
TEXT-INDENT
...odsadenie prvého riadku
  {text-indent:5em}
TEXT-ALIGN
...zarovnanie textu
LEFT
RIGHT
CENTER
JUSTIFY ...zarovná sa ľavá aj pravá strana
{text-ALIGN: left}
TEXT-DECORATION
...dekorácia textu
OVERLINE ...čiara nad textom
UNDERLINE ...čiara pod textom
LINE-THROUGH ...preškrtnutá
BLINK ...blikanie
NONE ...bez dekorácie
{text-decoration:overline }
TEXT-TRANSFORM
...malé a veľké písmená
LOWERCASE ...malé písmená
UPPERCASE ...veľké písmená
CAPITALIZE ...veľké písmeno na začiatku vety
NONE ...východzia hodnota
{text-transform:lowercase}
LINE-HEIGHT
...výška riadku
10px ...absolútna hodnota
30% ...percentá z aktuálnej výšky riadku
{line-height:200%}
VERTICAL-ALIGN
...vertikálne zarovnanie
TOP
MIDDLE
BOTTOM
SUB
SUPER
BASELINE
TEXT-TOP
TEXT-BOTTOM
10%
{vertical-align:top}
WORD-SPACING
...medzera medzi slovami
NORMAL
3em
{word-spacing:3em}
LETTER-SPACING
...medzera medzi písmenami
NORMAL
2em
{letter-spacing:2em}


Písmo

Vlastnosť Hodnota Príklad
FONT-FAMILY
...rodina písma
SERIF
SANS-SERIF
CURSIVE
FANTASY
MONOSPACE
{font-family: "Times New Roman", Times, serif}
FONT-STYLE
...štýl písma
NORMAL
ITALIC
OBLIGUE
{font-style:italic}
FONT-VARIANT
...variant písma
NORMAL
SMALL-CAPS ...malé písmená sú prevedené na veľké(menšie)
{font-variant:small-caps}
FONT-WEIGHT
...hrúbka písma
BOLD ...(100)
EXTRA-LIGHT
LIGHT
DEMI-LIGHT
MEDIUM
DEMI-BOLD
BOLD
EXTRA-BOLD ...(900)
{font-weight:100}
{font-weight:bold}
FONT-SIZE
...veľkosť písma
SMALLER ...min.
XX-SMALL
X-SMALL
SMALL
MEDIUM
LARGE
X-LARGE
XX-LARGE
LARGER ...max.
100px
20%
{font-size:150%}
{font-size:small}
FONT
...skratka
  {font:bold xx-small serif}


Blok

Vlastnosť Hodnota Príklad
MARGIN-TOP
MARGIN-RIGHT
MARGIN-BOTTOM
MARGIN-LEFT
...nastavuje okraj prvku
MARGIN
...skratka
100px ...(jednotky)
20%
AUTO
{margin-top:2em}
{margin:20px 20px 20px}
{margin:20px 20px 20px 30px}
PADDING-TOP
PADDING-RIGHT
PADDING-BOTTOM
PADDING-LEFT
...nastavuje výplň prvku
PADDING
...skratka
100px ...(jednotky)
20%
AUTO
{padding-right:50px}
{padding:30px 40px}
{padding:30px 40px 10px 10px}
BORDER-TOP-WIDTH 
BORDER-RIGHT-WIDTH
BORDER-BOTTOM-WIDTH
BORDER-LEFT-WIDTH
...nastavuje šírku rámčeku
BORDER-WIDTH 
...skratka
THIN
MEDIUM
THICK
5px
{border-left-width:10px}
{border-width:10px 5px 20px}
{border-width:thin}
BORDER-COLOR
...farba rámčeka
RED
#ff00FF
{border-color:red}
{border-color:#ff00ff}
BORDER-TOP
BORDER-RIGHT
BORDER-BOTTOM
BORDER-LEFT
...nastavenie width/style/color
BORDER

{border-top:thick solid red
{border-bottom:10px double #0f0f0f} }
BORDER-STYLE
...štýl celého rámu
DOTTED ...bodkovaná čiara
DASHED ...bodkočiarkovaná čiara
SOLID ...plná čiara
DOUBLE ...dvojitá čiara
GROOVE ...3D drážka
RIDGE ...3D hrot
INSET ...3D vtlačená drážka
OUTSET ...3D hrbol
NONE ...bez okraju
{border-style:ridge}

 
Riadenie pozície

Vlastnosť Hodnota Príklad
POSITION
...druh-metóda pozície
ABSOLUTE ...nezávisle na ostatných objektoch
RELATIVE ...závisle k orginálnej pozícii
STATIC ...danné prehliadačom
LEFT / TOP ...odsadenie x/y
WIDTH / HEIGHT ...veľkosť x/y
{position:relative;top:100px;left:300px}
     
CLIP
...určuje výstrižok
CLIP:RECT(top right bottom left) {height:100px; width: 400px; 
clip: rect(0px 390px 90px 0px )}
OVERFLOW
...orezanie prvku
CLIP ...orezanie je povolené bez rolovacích líšt
SCROLL ...orezanie je povolené, zobrazia sa rolovacie lišty
NONE ...bez orezania
{height:150px; width: 400px ; overflow: auto}
Z-INDEX
...prekrývanie prvkov
AUTO
N ...celé číslo
{height:50px; width: 100px; z-index: 1}
VISIBILITY
...viditelnosť prvku
INHER
VISIBLE
HIDDEN
{height:150px; width: 400px; visibility: hidden}
FLOAD
...spôsob obtekania
LEFT
RIGHT
NONE
 
CLEAR
...povoľuje obtekanie
LEFT
RIGHT
BOTH
NONE
 


Klasifikácia

Vlastnosť Hodnota Príklad
DISPLAY
...druh elementu
BLOCK
INLINE
LIST-ITEM
NONE
 
WHITE-SPACE
...práca z medzerami
PRE
NOWRAP ...riadky sa nezalamujú
NONE ...medzera je ignorovaná
{white-space:nowrap}
LIST-STYLE-TYPE
...vzhľad značky zoznamu
DISC
CIRCLE
SQUARE
DECIMAL
LOWER-ROMAN
UPPER-ROMAN
LOVER-ALPHA
UPPER-ALPHA
NONE
{list-style-type: upper-roman}
LIST-STYLE-IMAGE
...obrázok ako odrážka
URL(...)
NONE
{list-style-image: url(obrazok.gif)}
LIST-STYLE-POSITION
...umiestnenie odrážky
INSIDE
OUTSIDE
{list-style-position: outside}
LIST-STYLE
...kompletné nastavenie
  {list-style:circle outside }


Filtre

Filter Parametre Popis
ALPHA Opacity=0až100 ...priehľadnosť
FinishOpacity=0až100 ... priehľadnosť
Style=0až3 ... tvar transparentného prechodu
StartX=x ... začiatok prechodu x
StartY=y ... začiatok prechodu y
FinishX=x ... koniec prechodu x
FinishY=y... koniec prechodu y
Priehľadnosť objektu
BLUR Add=1/0 ...pôvodný obrázok sa pridá/nepridá
Direction=45 ... uhol smeru násobky 45°
Strength= ... sila rozmazania
Výtvorí efekt objektu pohybujúceho
sa veľkou rýchlosťou
CHROMA Color=#ff00AA ...transparentná farba Určuje priehľadnosť farby
DROPSHADOW Color=#ff000F ...farba tieňu
OffX=n ... posunutie x
OffY=n ... posunutie y
Positive=1/0 ... pre netransparentnú časť/pre všetky body
Vytvorenie tieňa ,vznášanie objektu
FLIPH   Prevrátenie objektu horizontálne
FLIPV   Prevrátenie objektu vertikálne
GLOW Color=#00ff00 ...Farba obrysu
Strength=1až 255 ... Intenzita obrysu
Farbou obkreslí okraje objektu
GRAY   Zošednutie všetkých farieb
INVERT   Invertuje farby objektu
LIGHT   Osvetlenie objektu
MASK Color=#CCBBFF ...Farba Vytvorenie transparentnej masky
SHADOW Color=#ff99cc ...Farba tieňu
Direction=45 ... Uhol násobok 45°
Vytvorí ťieň
WAVE Add=1/0 ...pridanie pôvodného obrázku/nepridanie
Freq=n ... počet vlnoviek
Light=0až100 ... svetelná intenzita
Phase=0až 100 ... fázové posunutie vlny
Strength=n ... intenzita efektu
Deformuje objekt do tvaru sínusoidy
XRAY   Vytvorí obrysy pôvodného objektu

 
Jednotky

Absolútne jednotky PX (pixel)
PT (point)
PI (pica)
IN (inch)
MM (milimeter)
CM (centimeter)
obrazovkový bod
typografický bod 1pt=1/72in
pica 1pi=12pt
palec 1in=2.54cm
milimeter
centimeter
Relatívne jednotky EN
EM
EX
%
počet písmen
výška veľkého písmena M
výška malého písmena x
percento
   








Home | Ako na to | Na stiahnutie | Tipy a triky | Diskusné fórum | Profesionálny webdesign | Kontakt