Vytváříme webové stránky – CSS potřetí (část 11.)

V minulých dílech jsme si ukázali, o čem CSS je, jak se zapíše, jak se s ním nastyluje text, apod. Dnes naše možnosti opět rozšíříme.

Pozadí
Už nikdy pomocí atributu background nebo bgcolor, naučme se to lépe. Uvědomme si, že pozadí se může týkat nejenom vybraného objektu (pozadí za textem, apod.), ale také celého dokumentu, použijeme-li příslušnou vlastnost společně se selektorem BODY. V jednom prvku, ať už P, DIV, SPAN, TD nebo jiném, můžeme mít pouze jedno pozadí.

background-color: yellow .. Barva pozadí
background-image: url(‚imgs/back.jpg‘) .. Obrázek na pozadí (URL v apostrofech)
background-repeat: repeat/no-repeat/repeat-x/repeat-y .. Opakování pozadí ano/ne/jen horiz./jen vert.
background-attachment: scroll/fixed .. Posouvat pozadí při rolování ano/ne

background-position: left/center/right top/center/bottom, též 12px/20% .. Horiz. a vert. poloha pozadí
příklad: background-image: url(‚p.jpg‘); background-repeat: no-repeat; background-position: center 45%;
Použití u neopakujícího se pozadí, alespoň v jednom směru. Mozilla u této vlastnosti neumí zkombinovat číslo a text

I background lze zadávat najednou..
Je to podobné jako s vlastností FONT, pořadí se musí zachovat a defaultní hodnoty se neuvádějí. Pořadí:
background: background-color background-image background-position background-repeat background-attachment
Příklad: background: url(‚pozadi.jpg‘) no-repeat scroll green right center

Rámečkování
Pomocí CSS můžete vykreslit rámeček kolem vybraného prvku. A ještě mu můžete nastavit tloušťku, barvu a styl. A aby toho nebylo málo, všechny tři vlastnosti můžeme nastavit u všech 4 hran rámečku – v pořadí po směru chodu hod. ručiček (levá horní, pravá horní, pravá dolní, levá horní) – border-top, border-left, border-bottom, border-right.
border-width: 2px .. Tloušťka ráměčku
border-color: silver .. Barva rámečku
border-style: none/solid/dotted/dashed/double .. Styl rámečku není/plný/tečky/čárky/dvojitý (další vlastnosti groove/ridge/inset/outset)

I vlastnost border lze zadávat najednou..
Pořadí: border: border-width border-color border-style
Příklad: border: 2px solid navy

Tabulky
Používají se samozřejmě pouze v souvislosti s tagem TABLE.
table-layout: auto/fixed .. Přizpůsobení velikosti tabulky oknu (zúžování) ano/ne
border-collapse: separate/collapse .. Oddělené rámečky sousedních buněk ano/ne
border-spacing: 4px .. Vzdál. mezi rámečky sousedních buněk (obdoba tagu cellspacing), nefunguje v IE

Seznamy
Použití u tagů UL, OL a LI.
list-style-type: disc/circle/square/decimal/lower-roman/upper-roman/lower-alpha-upper-alpha/none ..
Styl seznamu: puntík/kolečko/čtvereček/čísla/římská čísla malá a velká/abeceda malá a velká/nic

list-style-position: inside/outside .. Odrážky v úrovni textu/mimo text
list-style-image: none/url(‚puntik.gif‘) .. Odrážky obyčejné/pomocí obrázku

Zadání najednou pomocí list-style
Pořadí: list-style-type list-style-position list-style-image
Příklad (v hlavičce): ul li {list-style: circle outside url(„odrazka.gif“);}

Závěr
Takže jsme si opět rozšířili vlastnosti, které se v CSS používají. Tak to bude ještě jeden, dva díly a pak se začneme věnovat specialitám.

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.