W Partner s.r.o.

Jako generální sponzor Vám přinášíme Informační server Bechyňska - www.Bechyňsko.cz

Mrkněte na novinku - panoramatické fotografie.

Na zkoušku spuštěn nový design www stránek.

Jak na to? CSS, grafika.
Tisk článku
Kaskádové styly - Základní vlastnosti v kaskádových stylech

Písmo:

vlastnost hodnota
font-family jméno_písma1[,jméno_písma2[, ....]]
určuje rodinu písma; prohlížeč použije první, který je k dispozici; CSS definuje následující obecné názvy písem:
serif antikva (patkové písmo, např. Times)
sans-serif grotesk (bezpatkové písmo, např. Helvetica)
cursive kurzivní písmo (např. Zapf-Chancery)
fantasy ozdobné písmo (např. Western)
monospace neproporciální písmo (např. Courier)
například: BODY { font-family: "new century schoolbook", serif}
*vlastnost je aplikována na všechny prvky
poznámka: doporučuje se jako poslední v seznamu písem uvést alespoň jeden z obecných názvů
font-style normal | italic | obligue
určuje styl písma (vzpřímené | kurzíva | skloněné)
například:H1, H2, H3 { font-style: italic }
* vlastnost je aplikovatelná na všechny prvky
font-variant normal | small-caps
určuje variantu písma
normal - implicitní hodnota
small-caps - všechna malá písmena jsou provedena jako velká ale v menší velikosti (kapitálky)
například:H3 { font-variant: small-caps }
* vlastnost je aplikovatelná na všechny prvky
font-weight normal | bolder | lighter | [extra-light|100] | [light|200] | [demi-light|300] | [medium|400] | [demi-bold|500] | 600 | [bold|700] | 800 | [extra-bold|900]
určuje tloušťku písma
například:P { font-weight: normal } nebo H1 { font-weight: 700 }
* vlastnost je aplikovatelná na všechny prvky
font-size xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | ± units | ±%
určuje stupeň (velikost písma)
například:
P { font-size: 12pt }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
* vlastnost je aplikovatelná na všechny prvky
font [<font-weight>|<font-variant>|<font-style>] <font-size> [/<line-height>] <font-family>
zkratka pro nastavení vlastností font-weight, font-variant, font-style, font-size, line-height a font-family na jednom místě
například:
P { font: bold italic x-large/110% Palatino, serif }
* vlastnost je aplikovatelná na všechny prvky

Text:

vlastnost hodnota
text-ident ±n units | ±n%
určuje odsazení prvního řádku odstavce
±n units absolutní rozměr v zadaných jednotkách
±n% počet procent z aktuální šířky řádku
například: P { text-ident: 3em }
*vlastnost je aplikovatelná na blokové prvky
text-align left | right | center | justify
řídí zarovnání textu:
left zarovnání na prapor vlevo
right zarovnání na prapor vpravo
center zarovnání na středovou osu
justify zarovnání do bloku (se zarovnaným levým a pravým okrajem)
například: DIV.center { text-align: center }
*vlastnost je aplikovatelná na blokové prvky
text-decoration normal | overline | underline | line-throught | blink
určuje přidané efekty
normal bez efektů
overline čára nad textem
underline čára pod textem
line-through přeškrtnuté
blink blikání
*vlastnost je aplikovatelná na všechny prvky (není-li prvkem text nebo je kontejner prázdný, vlastnost nemá účinek)
text-transform none | lowercase | uppercase | capitalize
určuje provedení
none bez (implicitní hodnota)
lowercase malá písmenka (minusky)
uppercase velká písmena
capitalize velká na začátku věty
*vlastnost je aplikovatelná na všechny prvky
text-height ±n units | ±n%
určuje výšku řádku
±n units absolutní rozměr v zadaných jednotkách
±n% počet procent z aktuální šířky řádku
text-align top | middle | bottom | sub | super | baseline | ±% | text-top | text-bottom
určuje vertikální zarovnání
top horní okraj bude zarovnán na nejvíce vyčnívající prvek řádku
middle vertikální střed prvku (typicky obrázek) bude zarovnán k účaří řádku plus polovina x-výšky rodičovského prvku
bottom spodní okraj prvku bude zarovnán na nejníže položený prvek řádku
sub subskripce prvku
super superskripce prvku
baseline účaří prvku (nebo dolní okraj prvku, pokud prvek nemá účaří) bude zarovnán na účaří řádku rodičovského prvku
±n% počet procent z výšky řádku
text-top horní okraj prvku bude zarovnán na horní okraj základního fontu rodičovského prvku
text-bottom dolní okraj prvku bude zarovnán na dolní okraj základního fontu rodičovského prvku
*vlastnost je aplikovatelná na inline prvky
word-spacing normal | ±n units
určuje velikost implicitní mezery mezi slovy
*vlastnost je aplikovatelná na všechny prvky
letter-spacing normal | ±n units
určuje velikost implicitní mezery mezi znaky
*vlastnost je aplikovatelná na všechny prvky

Barva a podklad:

vlastnost hodnota
color <specifikace_barvy>
určuje barvu textu
například: EM { color: rgb(255,0,0,) }
*vlastnost je aplikovatelná na všechny prvky
background-color <specifikace_barvy>
určuje barvu podkladu (pozadí) textu
například: H1 { background-color: #F00 }
*vlastnost je aplikovatelná na všechny prvky
background-image url(...) | none
lokátor souboru s obrázkem
například: BODY { background-image: url(mramor.gif) }
*vlastnost je aplikovatelná na všechny prvky
background-repeat repeat | repeat-x | repeat-y | no-repeat
určuje způsob opakování obrázku podkladu
repeat opakování horizontálně i vertikálně (implicitní hodnota)
repeat-x opakování horizontálně
repeat-y opakování vertikálně
no-repeat bez opakování
například: BODY { background: red url(privesek.gif); background-repeat: repeat-x; }
*vlastnost je aplikovatelná na všechny prvky
background-attachment scroll | fixed
určuje, zda je obrázek pozadí rolován s dokumentem nebo je zafixován na plátno
například:
BODY { background: url(obrazek.gif); background-repeat: repeat-y; background-attachment: fixed; }
*vlastnost je aplikovatelná na všechny prvky
background-position ±n units | ±n% | [top|center|bottom] | [left|center|right]
určuje počáteční pozici obrázku podkladu
±n units pozice levého horního rohu v jednotkách jako pár '15px 20px'
±n% pozice levého horního rohu v procentech rozměru obrázku jako pár '15px 20px
'top left', 'left top' = '0% 0%'
'top', 'top center', 'center top' = '50% 0%'
'right top', 'top right' = '100% 0%'
'left', 'left center', 'center left' = '0% 50%'
'center', 'center center' = '50% 50%'
'right', 'right center', 'center right' = '100% 50%'
'bottom left', 'left bottom' = '0% 100%'
'bottom', 'bottom center', 'center bottom' = '50% 100%'
'bottom right', 'right bottom' = '100% 100%'
například: BODY { background: url(vlajka.gif); top center }
*vlastnost je aplikovátelná na blokové prvky
background <background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>
zkrtaka pro nastavení vlastností background-color, background-image, background-repeat, background-attachment a background-position na jednom místě
například: P { background: url(sachovnice.jpg) gray 50% repeat fixed }
*vlastnost je aplikovátelná na všechny prvky

Přebráno z: http://broe.hyperlink.cz/ucebnice/L7/index2.html

Tisk článku
Vygeneroval WRS - Webový redakční systém © 2010 W Partner s.r.o. Odkazy