| Příklad 1 |
CSS2 staví na standardu CSS1.
Pokud kliknete na odkaz Zobraz výstupy, tak uvidíte
výsledek aplikování CSS2 stylu na odpovídající XML dokument
(ten je zobrazen v předcházející buňce).
|
| Příklad 2 |
CSS2 nabízí mnoho možností, jak vybrat element.
Pokud je dáno pouze jméno elementu, pak je vybrán všude (1).
Znak hvězdička [*] vybere všechny elementy (2).
|
| Příklad 3 |
Jména oddělená "whitespace" znaky specifikují elementy, pro které
platí,
jejich jméno je stejné jako poslední jméno v této posloupnosti
a ostatní jména se vyskytují někde "na cestě" od kořenového elementu
k tomuto elementu. Jinými slovy, jsou to předci tohoto elementu
("ancestors") (1).
Když jsou jména elementů separována znakem "větší než" [>],
tak element napravo musí být přímým potomkem ("child") elementu
nalevo (2).
Znaku hvězdička [*] můžeme použít pro dosažení některých zajímavých
efektů. V (3) jsou vnuci elementu AAA zbarveni červeně.
Element ddd2 je také zbarven červeně - přestože není vnukem, protože
podědí barvu z otce.
|
| Příklad 4 |
Pseudo-třída "first:child" vybere prvního přímého potomka
(1).
Když jsou dva elementy odděleny znaménkem plus [+],
pak je vybrán druhý element - a to pouze v případě, že jeho přímý předchůdce
je ten první (2). (3) vybere všechny první přímé potomky.
|
| Příklad 5 |
Pseudotřídy "link" a "visited" rozlišují nenavštívené a navštívené odkazy
(1).
Pseudotřída "hover" se použije v případě, že se kurzor pohybuje přes
element (2).
|
| Příklad 6 |
Chování některých elementů může být ještě upřesněno pomocí
pseudotříd
"hover", "active" a "focus".
|
| Příklad 7 |
Elementy mohou být odlišeny díky jejich atributům.
Můžeme testovat, zda atribut mají (1) nebo dokonce
můžeme hodnotu jejich atributu porovnávat (2).
Pokud je pro srovnání použit operátor ~=,
tak stačí, že srovnávaná hodnota odpovídá jedné z
částí atributu, oddělených mezerami (3).
|
| Příklad 8 |
Pokud elementy sdílí nějaké vlastnosti, tak můžeme tyto vlastnosti
specifikovat na jednom místě a elementy oddělit čárkami.
|
| Příklad 9 |
Pseudoelementy "first-letter" a "first-line"
vyberou odpovídající první znaky blokových elementů.
|
| Příklad 10 |
Pseudoelementy "before" (před) a "after"
(po) mohou přidat text.
|
| Příklad 11 |
Pokud nějaká vlastnost elementu není specifikována,
tak je zděděna z rodiče.
|
| Příklad 12 |
Pro každý zobrazený element se vygeneruje obdélník ("box").
Každý takovýto obdélník má tzv. obsahovou část (např. text,
obrázek apod.) a případně i další okolní oblasti
- "padding", "border" a "margin" (1).
Nastavení ohraničení ("border") se nastavuje vlastností
"border-style" (2).
|
| Příklad 13 |
CSS2 rozeznává několik stylů pro ohraničení:
solid, double, dotted, dashed, groove, ridge, inset, outset. (1) a (2). Jejich barva může být nastavena pomocí vlastnosti "border-color" (3).
|
| Příklad 14 |
Šířka ohraničení může být specifikována jako
"thin" (tenká), "medium" (střední), "thick" (tlustá),
nebo může mít explicitní hodnotu.
|
| Příklad 15 |
Vlastnosti "margin", "border" a "padding" mohou být ještě rozděleny
na levou, pravou, horní a dolní část. (1) používá různá ohraničení
(borders(, (2) zase jiné "paddings".
|
| Příklad 16 |
Šířka, styl a barva ohraničení mohou být zadány současně pomocí
zkráceného zápisu (1).
Zkrácený zápis pro okraje ("margins") také existuje:
(top&bottom - left&right), (top - left&right - bottom),
nebo (top -right-bottom-left ) (2).
|
| Příklad 17 |
V předchozích příkladech jsme použili barvu pro odlišení elementů.
Vlastnost "color" (barva) nastavuje barvu popředí, použitou pro
obsahovou část elementu. "background-color" zase nastavuje barvu
pro "containing box".
Barva může být popsána několika způsoby, jeden z nich je použití
16 klíčových jmén nadefinovaných v HTML 4.0:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. (1).
|
| Příklad 18 |
Barva může být také definována pomocí její RGB hodnoty.
Tato hodnota specifikuje poměr červené, zelené a modré ve výsledné
složené barvě.
Zápis poměru má několik forem a obvykle je získán pomocí
nástroju zvaných "color picker".
(1) ukazuje několik příkladů zápisu
v hexadecimální notaci, nejvyšší možná hodnot je FF
(255 v decimální soustavě), nejnižší je 0.
|
| Příklad 19 |
CSS2 dovoluje autorům specifikovat barvy způsobem, který je dovolí
přizpůsobit grafickému prostředí uživatele.
Podívejte se na příklad, změňte barevné nastavení vašeho počítač
a pak se podívejte znovu.
|
| Příklad 20 |
Autoři mohou specifikovat barvu pozadí ("background-color")
elementu (1) nebo
nastavit obrázek na pozadí(2).
|
| Příklad 21 |
Můžete nastavit, kolikrát se má obrázek na pozadí opakovat.
Možnosti jsou:
předdefinované "default" opakování (opakuje je se jak horizontálně,
tak vertikálně - 1),
repeat-x (jenom horizontální - 2),
repeat-y (jenom vertikální - 3) a
"no-repeat" (žádné opakování - 4)
|
| Příklad 22 |
U obrázku na pozadí můžeme případně nastavit jeho
opakování a pozici.
|
| Příklad 23 |
Vlastnost "background-attachment" s hodnotou "fixed"
zabraňuje posunování obrázku na pozadí.
Srovnej 1 a 2.
|
| Příklad 24 |
Text může být "ozdoben" pomocí vlastnosti "text-decoration".
Hodnota této vlastnosti může být
"underline", "overline", "line-through" a "blink" (1).
Tyto hodnoty mohou být kombinovány (2).
|
| Příklad 25 |
Barvu a rozměry stínu můžeme nastavit pomocí "text-shadow".
|
| Příklad 26 |
Vzdálenost mezi jednotlivými písmeny slova lze nastavit pomocí
vlastnosti "letter-spacing" (1),
vzdálenost mezi slovy pomocí vlastnosti "word-spacing" (2).
Vzdálenost může být zadána v různých jednotkách.
Relativní vzdálenosti jsou
em (velikost odpovídajícího fontu),
ex (x-height odpovídajícího fontu)
a px (pixely, relativní vůči zobrazovacímu zařízení).
"x-height" se takto nazývá, protože je často rovna
výšce malého "x".
Absolutní jednotky jsou užitečné pouze když jsou známy fyzické vlastnosti
výstupního zařízení.
Absolutní jednotky jsou:
in: inche -- 1 inch je 2.54 centimetru,
cm: centimetry,
mm: milimetry,
pt: body ("points") -- body používané v CSS2 jsou rovny
1/72 inche,
pc: picas -- 1 pica je 12 bodů.
|
| Příklad 27 |
Vlastnost "text-transform" může mít následující hodnoty:
uppercase, lowercase, a capitalize.
"Capitalize" mění první písmeno slova na velké ("uppercase"),
"uppercase" všechna na velká
a lowercase všechno na malé.
|
| Příklad 28 |
Vlastnost "white-space" může měnit normální chování
(několik následujících "whitespace" znaků může být přeměněno na
jeden a řádky jsou zalomeny) buď na "pre"
(přebytečné "whitespace" znaky nejsou odstraňovány a nezalamují se řádky)
nebo na "nowrap"
(přebytečné "whitespace" jsou odstraňovány, ale nezalamují se řádky).
|
| Příklad 29 |
Vlastnost "text-align" definuje, jak
jsou vnitřní obsah blokových elementů zarovnán.
|
| Příklad 30 |
Vlastnost 'font-style' nastavuje styl fontu:
normal (někdy nazývaný "roman" nebo "upright"), italic a
oblique.
|
| Příklad 31 |
Vlastnost 'font-variant' s hodnotou "small-caps" mění
malá písmena na písmena velká, ale menší velikosti (kapitálky).
|
| Příklad 32 |
Vlastnost 'font-weight' specifikuje váhu fontu.
Může to být číslo 100, 200, 300, ..., 900, kde každé číslo určuje
tloušťku přinejmenším stejnou jako předcházející číslo.
Klíčová slova "normal" a "bold" odpovídají hodnotám 400 a 700.
Klíčová slova "bolder" a "lighter" specifikují následující resp. předcházející
hodnotu.
|
| Příklad 33 |
Vlastnost 'font-stretch' vybírá řez písma
"normal", "condensed", nebo "extended" z rodiny písem.
Klíčová slova popisující absolutní hodnoty mají toto řazení
(od nejužšího po nejširší):
1.ultra-condensed
2.extra-condensed
3.condensed
4.semi-condensed
5.normal
6.semi-expanded
7.expanded
8.extra-expanded
9.ultra-expanded.
Relativní hodnoty jsou popsány pomocí slov "wider" (širší) - nastavuje
hodnotu na následující širší hodnotu, než je zděděná -
a "narrower" -
nastavuje hodnotu na předcházející užší, než je zděděná.
|
| Příklad 34 |
Vlastnost "font-size" nastavuje velikost fontu.
Klíčová slova [ xx-small | x-small | small | medium | large | x-large | xx-large ]
odkazují na hodnoty v tabulce velikostí fontů, které jsou vypočítány
a drženy uživatelovým prohlížečem.
|
| Příklad 35 |
Vlastnost "font-size" může mít relativní hodnoty
"larger" a "smaller".
Tyto hodnoty jsou interpretovány relativně vůči tabulce
velikostí fontů a velikosti fontu rodičovského elementu.
|
| Příklad 36 |
Vlastnost "font-size" může být zadána v absolutních nebo relativních
jednotkách.
|
| Příklad 37 |
Vlastnost "font-family" specifikuje, jaký font má být použit.
Je 5 obecných rodin písma (serif, sans-serif, cursive, fantasy, monospace),
které jsou použity, pokud není specifikovaný font dostupný.
|
| Příklad 38 |
Daný font nemusí obsahovat všechny znaky, které jsou potřeba pro zobrazení
celého dokumentu.
A ne všechny fonty jsou dostupné na všech systémech.
Autoři mohou specifikovat seznam fontů, všechny stejné velikosti a stylu,
které jsou postupně zkoušeny, zda obsahují potřebný znak.
Tento seznam se nazývá "font set".
|
| Příklad 39 |
Vlastností "font" lze nastavit systémové fonty:
caption, icon, menu, message-box, small-caption, a status-bar.
|
| Příklad 40 |
Tvar kurzoru, který se pohybuje přes element může být změněn
na následující hodnoty:
auto, crosshair, default, pointer, move, e-resize,
ne-resize, nw-resize, n-resize, se-resize, sw-resize,
s-resize, w-resize, text, wait, help.
Můžeme použít URI pro definování uživatelova kurzoru.
|
| Příklad 41 |
CSS model pro vykreslování tabulek je založen na modelu
pro tabulky v HTML 4.0,
v němž struktura tabulky úzce souvisí s vizuálním rozvržením
tabulky.
(1) vykreslí jednoduchou tabulku,
(2) nakreslí také okraje.
|
| Příklad 42 |
Legenda k tabulce může být umistěna:
top (nahoře - 1), bottom (dole - 2), left (vlevo - 3),
a right (vpravo - 4).
|
| Příklad 43 |
Pokud má vlastnost "display" hodnotu "table", pak definuje
tabulku (jako blokový element) (1),
hodnota "inline-table" zase tabulku v řádce ("inline context") (2).
|
| Příklad 44 |
Data v buňce tabulky mohou být vertikálně zarovnána.
|
| Příklad 45 |
Data v buňce tabulky mohou být horizontálně zarovnána
vlevo (left), vpravo (right) nebo na střed (center) (1).
Mohou být také zarovnána podél vertikální osy podle zadaného
znaku (2).
|
| Příklad 46 |
Existují dva různé modely pro nastavené okrajů na buňkách tabulky v CSS.
Vybírá se mezi nimi pomocí vlastnosti "border-collapse".
Hodnota 'separate' nastaví model s oddělenými okraji
("separated borders").
Hodnota 'collapse' nastaví model s kolabujícímí okraji ("collapsing borders").
|
| Příklad 47 |
V modelu se separovanými okraji ("separate border model")
lze nastavit vlastnosti "border-spacing"
(nastavení vzdálenosti mezi jednotlivými okraji) a
"empty-cells" (zda se mají okraje kolem prázdných buňek zobrazovat).
|
| Příklad 48 |
Každý element může být zobrazen jako blokový ("block") nebo řádkový
("inline").
Pokud není vlastnost "display" nastavena, předpokládá se hodnota
"inline".
|
| Příklad 49 |
Seznamy jsou specifikovány nastavením "display:list-item".
|
| Příklad 50 |
Pomocí vlastnosti "list-style-type" můžeme nastavit, jaká značka
se má použít pro položku v seznamu.
|
| Příklad 51 |
Relativní pozice "relative position" znamená, že vykreslený obdélník
(box)
je umístěn relativně vůči jeho normální pozici.
Když je pozice relativní, tak pozice následujícího obdélníku je
vypočítána, jako by předešlý nebyl posunut.
Posunutí je dáno vlastnostmi
"top" (posunutí od horního okraj),
"right" (posunutí od pravého okraje doleva),
"bottom" (posunutí od spodního okraje nahoru),
a "left" (posunutí od levého okraje do prava).
|
| Příklad 52 |
V tomto příkladě je pořadí elementů změněno pomocí relativních pozic.
|
| Příklad 53 |
Absolutně umístěně obdélníky jsou vyňaty z normálního toku
dokumentu.
To znamená, že nemají žádný vliv na umístění následujících elementů.
|
| Příklad 54 |
Umístění "fixních" obdélníku je vypočítáno podle "absolutního" modelu,
ale navíc je tento obdélník umístěn fixně vzhledem k nějakému prvku.
V případě kontinuálního média je tento obdélník zafixován vzhledem
k zobrazovacímu zařízení a nepohybuje se při posouvání ("scrolling").
|
| Příklad 55 |
"Float" je obdélník, který se posouvá doleva nebo doprava na dané
linii.
Zbývající obsah ho může obtékat po stranách
(nebo to může být zakázáno pomocí vlastnosti "clear").
|