Pro výukové účely na SPŠ Zlín
vytvořil RNDr.Vladimír Vaščák

CSS

  1. Přímo vložený styl
  2. Šablona stylu v dokumentu
  3. Externí šablony stylů
  4. Syntaxe stylů
  5. Třídy stylů
  6. Vlastnosti písma
  7. Vlastnosti barvy a pozadí
  8. Vlastnosti textu
  9. Vlastnosti obdelníku
  10. Vlastnosti seznamů
  11. Značky <style>, <span> a <div>
  12. Vlastnosti zobrazení

9. Vlastnosti obdelníku



Šířka a výška objektu. Příklad:
.rozmery {width: 350px; height: 180px}
obrázek

Šířka ohraničení.
Můžete zadat až čtyři hodnoty oddělené mezerami.
1 hodnota - všechny hrany stejné;
2 hodnoty - 1. hodnota (horní a dolní), 2. hodnota (levá a pravá);
3 hodnoty - 1. hodnota (horní), 2. hodnota (levá a pravá), 3. hodnota (dolní);
4 hodnoty - horní, pravá, spodní, levá;

Je možno zadávat i jednotlivě Délkové jednotky: px (pixel), mm, cm, in (palec), pt (typografický bod), pc (pica nebo cicero), em (šířka M), ex (výška x).
Nebo thin , medium , thick .
Barva ohraničení.
Můžete zadat až čtyři hodnoty oddělené mezerami. (Podobně jako u šířky)
Styl ohraničení.
Povolené hodnoty jsou none , dotted , dashed , solid , double , groove , ridge , inset a outset .
Příklad:
.stylokraje {border-width:1px 2px 3px 4px; border-color: red blue green yellow; border-style: groove ridge inset outset}

obrázek
Vlastnosti ohraničení lze provést i zkráceně:
.horni {border-top: thin red solid} (nebo můžete použít border-top , border-bottom , border-left , border-right )

obrázek


.vsechno {border: thick blue double}

obrázek

Nastavení okrajů margin-left , margin-right , margin-top a margin-bottom určují volný prostor kolem prvku. Hodnoty jsou délkové, procentní nebo auto . Hodnoty zadáváte podobně jako u ohraničení

Nastavení výplně padding-left , padding-right , padding-top a padding-bottom . Hodnoty jsou délkové, procentní. Hodnoty zadáváte podobně jako u ohraničení

Vlastnost float určuje obtékání prvku.
Hodnoty jsou none , left a right .
None - implicitní hodnota, prvek ho nebude obtékat.
Left - prvek se přisune k levému okraji, následující text ho bude obtékat.
Right - prvek se přisune k pravému okraji, následující text ho bude obtékat.

Prvek, který má hodnotu nastavenou na left nebo right se nazývá plovoucí. Vlastnost clear můž mít hodnoty none , left , right nebo both .
None - implicitní hodnota, umístí obsah značky, kde je misto.
Left - zabrání umístění obsahu značky z levé strany plovoucího objektu.
Right - zabrání umístění obsahu značky z pravé strany plovoucího objektu.
Both - obsah značky nebude sousedit s plovoucím objektem.

Příklad 1: (obrázek_left text obrázek_left)
obrázek Lákamí vůněhulás úmyval rohlivý jednovod lek obolekno lva umí ří úmyvaleka. Tobselad onověď mělý božkat čníky bicí ří alem ští jítkem Umírně. Podlo neumysl je Obsely čin Tor úmyslupný ští nim leda nucký. Napný lekajakko umí autní Umraburdí Básněžný ští ční čuvalemi úmyvadiát řícipádní. Úmyvaledn parcipádn řícit ří nemi drásníky lválně ačít Záprazy umyvačkod kytanesiv. Lák. obrázek









Příklad 2: (obrázek_right text obrázek_right)
obrázek Lákamí vůněhulás úmyval rohlivý jednovod lek obolekno lva umí ří úmyvaleka. Tobselad onověď mělý božkat čníky bicí ří alem ští jítkem Umírně. Podlo neumysl je Obsely čin Tor úmyslupný ští nim leda nucký. Napný lekajakko umí autní Umraburdí Básněžný ští ční čuvalemi úmyvadiát řícipádní. Úmyvaledn parcipádn řícit ří nemi drásníky lválně ačít Záprazy umyvačkod kytanesiv. Lák. obrázek









Příklad 3: (obrázek_none text obrázek_none)
obrázek Lákamí vůněhulás úmyval rohlivý jednovod lek obolekno lva umí ří úmyvaleka. Tobselad onověď mělý božkat čníky bicí ří alem ští jítkem Umírně. Podlo neumysl je Obsely čin Tor úmyslupný ští nim leda nucký. Napný lekajakko umí autní Umraburdí Básněžný ští ční čuvalemi úmyvadiát řícipádní. Úmyvaledn parcipádn řícit ří nemi drásníky lválně ačít Záprazy umyvačkod kytanesiv. Lák. obrázek

Úkol: definujte vlastní styl obdelníku pojmenovaný mujbox .
obrázek Lákamí vůněhulás úmyval rohlivý jednovod lek obolekno lva umí ří úmyvaleka. Tobselad onověď mělý božkat čníky bicí ří alem ští jítkem Umírně. obrázek Podlo neumysl je Obsely čin Tor úmyslupný ští nim leda nucký. Napný lekajakko umí autní Umraburdí Básněžný ští ční čuvalemi úmyvadiát řícipádní. Úmyvaledn parcipádn řícit ří nemi drásníky lválně ačít Záprazy umyvačkod kytanesiv. Lák. obrázek

zpět vpřed
© 2007 Pro výuku na SPŠ Zlín připravil RNDr. Vladimír Vaščák