Úvod a cíle

Některé možnosti CSS

Již jsme si řekli, že základními stavebními prvky CSS jsou atributy a jejich hodnoty. Na rozdíl od XHTML není v CSS pevně dáno, jakým prvkům mohou být jaké atributy přiřazeny - fantazii se zde meze nekladou. Je ale jasné, že atribut definující typ písma nepřiřadíme prvku obrázku a atribut určující druh odrážky nepřiřadíme tlačítku formuláře.

Následuje představení několika nejpoužívanějších atributů a jejich hodnot obsažených v CSS. Výčet atributů a možných hodnot rozhodně není úplný, neboť CSS není hlavní náplní tohoto kurzu.

Barvy

Barvy jsou důležitým nástrojem při designu stránky. Když se to s nimi nepřežene, dodávají stránce takzvaný "šmrnc". Je libo barevné písmo? Barevné pozadí? Barevný rámeček? Stačí si vybrat.

Atributy barev

Atribut color

• Z anglického (či spíše "amerického") color neboli barva.
• Definuje barvu prvku, především pak barvu prvku vkládajícího text.

Dalšími atributy barev jsou např. background-color (barva pozadí) či border-color (barva rámečku). O těchto atributech se dozvíte dále v tomto článku. Prozatím je důležité, že hodnotami všech těchto atributů jsou barvy.

Hodnoty barev

Barvy jsou v CSS vyjádřeny následujícími slovními hodnotami:

white (bílá), gray (šedivá), silver (stříbrná), black (černá), yellow (žlutá), green (zelená), olive (olivově zelená), lime (světle zelená), aqua (světle zelenomodrá), teal (tmavě zelenomodrá), blue (modrá), navy (tmavomodrá), red (červená), fuchsia (lila), purple (purpurová), maroon (kaštanová).

Existují i další slovní vyjádření dalších odstínů barev, ale u nich není jistota, že je každý prohlížeč bude schopen zobrazit. Pokud se tedy nespokojíme s nabídnutými barvami, musíme si další odstíny sami "namíchat". Dle modelu RGB vycházíme ze tří základních barevných složek: červená, zelená a modrá. Každá složka může nabývat hodnoty od 00 do FF (počítáno v šestnáctkové soustavě). Např. černou barvu dostaneme, když jsou všechny tři barevné složky zastoupeny nulově (hodnota 000000). Naopak bílou barvu dostaneme, jsou-li všechny barevné složky zastoupeny ve svých maximálních hodnotách (hodnota FFFFFF).

Nejste-li obeznámeni s RGB modelem, vyzkoušejte si namíchat různé barvy v animaci .

Pozadí

Atribut background-image

• Z anglického background image neboli obrázek na pozadí.
• Tento atribut určuje obrázek, který se zobrazí na pozadí.
• Hodnotou atributu je URI obrázku.

V CSS má zápis URI jinou syntaxi než v XHTML. URI je uzavřeno do horních uvozovek, závorek a předchází mu označení url:

background-image: url("URI obrázku")

Chceme-li obrázkové pozadí zrušit, přiřadíme atributu background-image hodnotu none.

Atribut background-color

• Z anglického background color neboli barva pozadí.
• Definuje barvu pozadí (např. pozadí stránky, pozadí určitého textu, pozadí tabulky aj.).
• Hodnotou atributu je slovní nebo číselné vyjádření barvy.

Ukázka kódu XHTML stránky, v níž jsou pomocí CSS upraveny barva textu odstavce, barva pozadí odstavce a pozadí celé stránky, je uvedena v příkladu . V příkladu je pozadí stránky přiřazen obrázek tucnak.jpg. Tento obrázek se nalézá ve stejné složce jako daná stránka. Vyzkoušejte v příkladu změnit barvu textu odstavce a barvu pozadí odstavce.

Velikost

Kdykoliv se nějaký atribut v CSS zabývá velikostí (např. šířka, výška, tloušťka), máme většinou na výběr z několika způsobů, jak velikost definovat. Nejčastěji se jako hodnota používá číslo těsně následované zkratkou měrné jednotky. Nejpoužívanějšími jednotkami jsou pixely (jeden pixel má velikost jednoho obrazového bodu - zkratka px) a typografické body (1 cm čítá asi 28 bodů - zkratka pt). Například:

width: 12px; height: 9pt

Místo jednotky můžeme velmi často použít procento (%). V tom případě se velikost prvku bude počítat buď z jeho normální velikosti, z velikosti nadřazeného prvku nebo z velikosti okna. U různých atributů máme často na výběr i ze slovních vyjádření velikosti.

Atributy width a height

• Atribut určující šířku a atribut určující výšku.
• Možné hodnoty atributů: pro normální výšku či šířku prvku se používá hodnota auto. Dále rozměry můžeme vyjádřit jednotkami délky (nejčastěji px) či procenty (šířka prvku se počítá z šířky prvku nadřazeného a výška prvku většinou z výšky okna).

Dalšími atributy, které operují s velikostí, jsou např. border-width (šířka rámečku), font-size (velikost písma) a line-height (výška řádku). Tyto atributy jsou podrobněji popsány dále v tomto článku.

Rámeček

Atribut border-style

• Z anglického border style neboli styl rámečku.
• Definuje styl čáry tvořící rámeček.
• Pokud chceme, aby se rámeček vykreslil, je tento atribut nutno vyplnit.
• Možné hodnoty: solid (normální plný), dotted (tečkovaný), dashed (čárkovaný), double (dvojitá čára), none (bez rámečku) aj.

Atribut border-width

• Z anglického border width neboli šířka rámečku.
• Určuje šířku rámečku (např. u tabulky, u obrázku a u mnohých jiných).
• Jako hodnota atributu se nejčastěji uvádí číslo v pixelech.

Atribut border-color

• Z anglického border color neboli barva rámečku.
• Definuje barvu rámečku.
• Hodnotou atributu je slovní nebo číselné vyjádření barvy.

Ukázka ohraničení obrázku a odstavce je uvedena v příkladu . V příkladu je použit obrázek mys.gif. Tento obrázek se nalézá ve stejné složce jako daná stránka. Vyzkoušejte v příkladu změnit barvu, šířku a styl rámečků a šířku odstavce.

Písmo

Atribut font-family

• Z anglického font family - do češtiny přeloženo doslova rodina typů písma.
• Definuje typ písma, který se v textu použije (ať už v textovém odstavci, oddílu, tabulce, na tlačítku...).
• Možné hodnoty atributu: např. Times New Roman, Arial, Arial CE, Arial Narrow, Courier New, Garamond, Verdana.

Do atributu se může uvést i více typů písma najednou (jednotlivé hodnoty se musí oddělit čárkami). Pokud prohlížeč neumí první typ písma, pokusí se zobrazit druhý atd.

Atribut font-style

• Z anglického font style neboli styl písma.
• Definuje, zda se písmena zobrazí kurzívou.
• Možné hodnoty atributu: normal (normální písmo), italic (kurzíva).

Atribut font-variant

• Z anglického font variant neboli varianta písma.
• Definuje, zda se písmena zobrazí kapitálkami.
• Možné hodnoty atributu: normal (normální písmo), small-caps (kapitálky).

Atribut font-size

• Z anglického font size neboli velikost písma.
• Určuje velikost písma.
• Existují i slovní vyjádření hodnot (např. small, larger), ale většinou se jako hodnota uvádí číslo a jednotka velikosti.

Atribut font-weight

• Z anglického font weight - doslova váha písmena.
• Definuje, zda se písmo zobrazí tučně.
• Možné hodnoty atributu: normal (normální písmo), bold (tučné písmo).

Ukázka zformátovaného písma v rámci odstavce je uvedena v příkladu . Vyzkoušejte v příkladu měnit písmo odstavce tím, že uvedeným CSS atributům přiřadíte jiné hodnoty.

Text

Atribut text-decoration:

• Z anglického text decoration - v češtině doslova výzdoba textu.
• Určuje, zda bude text podtržen, "nadtržen" či přeškrtnut.
• Možné hodnoty atributu: underline (podtržení), overline (nadtržení - čára nad textem), line-through (přeškrtnutí), none (normální text).

Atribut text-transform:

• Z anglického text transform neboli přeměna textu.
• Určuje, zda se text zobrazí malými či velkými písmeny.
• Možné hodnoty atributu: uppercase (velká písmena) capitalize (každé slovo začíná velkým písmenem), lowercase (malá písmena), none (normální původní písmena).

Atribut line-height

• Z anglického line height neboli výška řádky.
• Definuje výšku řádky.
• Jako hodnotu můžeme uvést např. číslo s jednotkou (pevně stanovená výška) nebo procento (výška se počítá z původní výšky řádku). Hodnota normal zajistí přirozenou výšku řádky.

Atribut text-indent

• Z anglického text indent neboli odsazení textu.
• Definuje velikost odsazení prvního řádku odstavce.
• Jako hodnota se nejčastěji používá číslo s jednotkou.

Atribut text-align

• Z anglického text align neboli zarovnání textu.
• Určuje, na jakou stranu bude text zarovnán.
• Možné hodnoty atributu: left (doleva), right (doprava), center (na střed), justify (do bloku).

Ukázka zformátovaného textu odstavce je uvedena v příkladu . Vyzkoušejte v příkladu změnit úpravu textu odstavce tak, že uvedeným atributům přiřadíte jiné platné hodnoty.

Seznamy

Atribut list-style-type

• Z anglického list style type neboli typ seznamového stylu.
• U seznamů definuje, pomocí čeho budou položky seznamu uspořádány.
• Možné hodnoty atributu: disc (puntík), circle (prázdné kolečko), square (plný čtvereček), decimal (normální arabské číslování), lower-roman (malé římské číslice), upper-roman (velké římské číslice), lower-alpha (malá písmena), upper-alpha (velká písmena), none (bez odrážky/ bez číslování).

Je samozřejmé, že vzhled odrážky definujeme seznamům s odrážkami (seznamy vložené pomocí prvku ul) a způsob číslování číslovaným seznamům (seznamy vložené pomocí prvku ol).

Ukázka číslovaného seznamu uspořádaného pomocí velkých písmen je uvedena v příkladu . Vyzkoušejte v příkladu změnit styl číslování seznamu. Poté změňte číslovaný seznam na seznam s odrážkami (prvek ol změňte na ul) a změňte vzhled odrážek.