Hlavní nadpis

Text odstavce

Text odstavce

Textový obsah odstavce…

Toto je odstavec ovlivněný stylem CSS třídy.

Tento odstavec nebude ovlivněn.

Text v odstavci. <span class="cervene">Toto bude červené. A tento text už zase ne.

,

,

,

,
,

---

) !!!

Užitečný tip: Chceme-li jeden (X)HTML element formátovat více způsoby na jedné stránce, použijeme selektor třídy.

11

CSS identifikátor jako selektor Jsou velmi podobné CSS třídám. Používají se převážně tehdy, pokud se stylový předpis používá na stránce pouze jednou. #nazev_id { vlastnost: hodnota; } p#nazev_id { vlastnost: hodnota; } před název CSS identifikátoru se vždy vkládá mřížka, Určitému (X)HTML elementu přiřazujeme styl pomocí atributu id:

Obsah blokového elementu DIV…

Hlavní využití: Tvorba webdesignu pomocí CSS a blokového (X)HTML elementu

a formátování blokového obsahu

CSS identifikátor jako selektor Příklad: Obsah souboru styly.css #ramecek { width: 200px;

Šířka rámečku v pixelech

height: 70px;

Výška rámečku v pixelech

border: 3px #f90 solid;

Hranice: tloušťka, barva, plná čára

background-color: #ffc;

Pozadí: barva

text-align: center;

Zarovnání textu: na střed

font-size: 23px;

Velikost písma

} Blokový element DIV použitý v těle webové stránky:

Pavel Chmiel

12

CSS identifikátor jako selektor Vytvoří se rámeček s příslušným formátováním:

(X)HTML element

je blokový, může najednou sdružovat textový, obrázkový obsah a další blokové nebo řádkové elementy.

Užitečný tip: CSS identifikátory se využívají převážně pro tvorbu webdesignu pomocí stylů a (X)HTML elementu

13

Barvy v CSS Slouží k obarvení textu, odkazů, pozadí a ohraničení, Barvy se skládají (míchají) ze tří základních barev (RGB model): R (Red) – červená

G (Green) – zelená

B (Blue) – modrá

- číslo v rozsahu 0 až 255 vyjadřuje intenzitu dané barevné složky. Čím vyšší číslo, tím větší intenzita (vyšší světlost) dané složky. Odstín šedé: všechny složky mají stejnou číselnou hodnotu. Bílá barva: všechny složky nabývají maximální hodnoty 255. Černá barva: všechny složky nabývají minimální hodnoty 0.

Zápis barvy v CSS Název barvy (v angličtině) u pojmenovaných barev. Například: p {color: blue;} zdroj: www.webtvorba.cz

Kromě názvů základních barev existují i názvy rozšiřujících barevných odstínů, výčet názvů barev lze nalézt například:

http://www.webtvorba.cz/css/barvy.html#pojmenovane Tento způsob se v praxi používá nejméně.

14

Zápis barvy v CSS RGB zápis barvy 1. Procentuální vyjádření Intenzitu každé barvy určujeme procenty 0% (minimální intenzita) až 100% (maximální intenzita). Příklad použití ve stylovém předpisu: p { color: rgb(100%,0%,0%); } #ramecek { border-color: rgb(50%,50%,50%); }

Zápis barvy v CSS RGB zápis barvy 2. Desítkové vyjádření Intenzitu každé barvy určujeme čísly 0 (minimální intenzita) až 255 (maximální intenzita). Příklad použití ve stylovém předpisu: p { color: rgb(255,0,0); } #ramecek { border-color: rgb(128,128,128); }

15

Zápis barvy v CSS RGB zápis barvy 3. Šestnáctkové vyjádření (hexadecimálně) Čísla 00 až FF (tj. 0-9, A-F), zápis začíná hash-markem (mřížkou) # Příklad použití ve stylovém předpisu: p { color: #ff0000; } #ramecek { border-color: #808080; } Pokud jsou obě číslice odpovídající jedné barevné složce stejné, můžeme použít zkrácený zápis: p { color: #f00; }

Výběr odstínů barev v PSPadu VZORNÍK BAREV Vzorník barev lze zapnout / vypnout (ALT + C): menu NÁSTROJE → položka „Výběr barvy…“. Z rozbalovacího menu lze vybrat rozsah barev. Kód barvy se vloží poklepáním na danou barvu. Vkládá se hexadecimální kód barvy, například: #FF3300

16

Výběr odstínů barev v PSPadu MÍCHÁNÍ BAREV Nástroj pro míchání barev lze zapnout / vypnout: menu NÁSTROJE → položka „Zobrazit barvu“. Pomocí tří posuvníků (R, G, B) nastavit požadovaný odstín, poté lze číselný kód barvy zkopírovat a vložit do stylu.

Lze také kliknout na tlačítko s „šipkou“ za číselným kódem či jménem barvy (pokud existuje), tím se vloží do stylu.

Délkové jednotky Určují vertikální a horizontální rozměry objektů na webové stránce. Hodnota se zapisuje číslem s příslušnou jednotkou: - celá čísla (např. 2em, 24px, 120%, atd.) - reálná čísla používají jako oddělovací znak tečku (např. 2.5em) Některé CSS vlastnosti mohou mít i zápornou hodnotu (top: -20px;) Mezi číselnou hodnotou a jednotkou se nedělá mezera: - správně: 24px - nesprávně: 24 px

17

Délkové jednotky – relativní jednoty Relativní jednotky určují velikost relativně vzhledem k jiné velikosti. Stylové předpisy využívající tyto jednotky se snáze přizpůsobí zobrazovací jednotce.

em - velikost 1em odpovídá šířce velkého písmene „M“ ex - velikost 1ex odpovídá výšce malého písmene „x“ Jednotky „em“ a „ex“ závisí na aktuální velikosti písma a použitém fontu.

px - velikost 1px (pixel) představuje jeden bod obrazovky (velikost pixelu se liší na růžných zobrazovacích zařízeních). Příklad použití: line-height: 2.5em; font-size: 24px;

Délkové jednotky – absolutní jednoty Absolutní jednotky používáme např. pro tisk (známe velikost papíru).

mm - milimetry cm - centimetry in – anglický palec (1inch = 2.54cm) pt – typografický bod (v CSS platí 72pt = 1in) pc – typografická jednotka „pica“ (12pc = 1pt) V praxi se používají (mají dobrou podporu v prohlížečích) zejména pt ve stylových předpisech určených k výstupu na tiskárnu.

18

Délkové jednotky – procenta Procentuální hodnoty se vždy vztahují k jiné hodnotě. Příklady použití: Výška řádku (line-height) se vztahuje k velikosti písma (font-size). line-height: 150%; znamená, že výška řádku bude větší o 50%, než je velikost fontu (při výšce fontu 10px bude výška řádku 15px). Je-li šířka objektu 50% (width: 50%;), zabere přesně polovinu šířky okna prohlížeče.

Délkové jednotky – procenta CSS: p.sirka50 { width: 50%; }

(X)HTML:

Lorem ipsum dolor…

50% 100%

19

Užitečný tip: Relativní jednotky → zobrazovací jednotky Absolutní jednotky → tiskové jednotky

Písmo v CSS Font (rodinu) písma nastavujeme pomocí CSS vlastnosti font-family. Hodnotou je název konkrétního fontu písma (např. Arial, Verdana), lze uvést náhradní font pro případ, že původní není v prohlížeči k dispozici. Je možné uvést také obecnou rodinu písma: serif: patkové písmo (např. Times New Roman) sans-serif: bezpatkové písmo (např. Arial, Verdana, Helvetica) monospace: neproporciální písmo (např. Courier, Courier New) cursive: ozdobná kurzíva (např. Comic Sans) fantasy: ozdobné písmo (např. Western) Příklad: body { font-family: Arial, Helvetica, sans-serif }

20

Písmo v CSS DUKTUS (tučnost) PÍSMA CSS vlastnost font-weight (elementy: blokové, řádkové) Hodnoty: normal, bold (tučné) - Existují i další hodnoty (bolder, lighter, 100, 400, 700, 900), prohlížeče je však neumí správně interpretovat.

STYL PÍSMA CSS vlastnost font-style (elementy: blokové, řádkové) Hodnoty: normal, italic (kurzíva), oblique (skloněné písmo)

Písmo v CSS VELIKOST PÍSMA CSS vlastnost font-size (elementy: blokové, řádkové) Hodnoty: xx-small, x-small, small, medium, large, x-large, xx-large Délkové jednotky: %, px, em, ex, pt, nevhodné: mm, cm, in Příklad použití: p.velky { font-size: large; } .pozn { font-size: 12px; }

Velký text

<span class="pozn">Poznámka

21

Text v CSS ZAROVNÁNÍ TEXTU CSS vlastnost text-align (elementy: blokové) Hodnoty: left (vlevo), right (vpravo), center (střed), justify (blok)

ODSAZENÍ TEXTU CSS vlastnost text-indent (elementy: blokové) Hodnoty: číselný údaj + relativní délková jednotka (px, em, ex)

Text v CSS Příklad použití: CSS p.textik { text-indent: 50px; text-align: justify; }

HTML

Lorem ipsum dolor…

22

Text v CSS MEZERY MEZI JEDNOTLIVÝMI ZNAKY CSS vlastnost letter-spacing (elementy: blokové, řádkové) Hodnoty: číselný údaj + relativní délková jednotka (px, em, ex)

MEZERY MEZI JEDNOTLIVÝMI SLOVY CSS vlastnost word-spacing (elementy: blokové, řádkové) Hodnoty: číselný údaj + relativní délková jednotka (px, em, ex)

Text v CSS p.mezera-znaky { letter-spacing: 7px; }

Mezi jednotlivými znaky jsou…

p.mezera-slova { word-spacing: 30px; }

Mezi jednotlivými slovy jsou…

23

Text v CSS MEZERY MEZI JEDNOTLIVÝMI ŘÁDKY CSS vlastnost line-height (elementy: blokové, řádkové) Hodnoty: číselný údaj + relativní délková jednotka (px, em, ex) p.mezera-radky { line-height: 5em; }

Lorem ipsum dolor…

} 5em } 5em

Text v CSS ZAROVNÁNÍ NA VÝŠKU (vertikální zarovnání) CSS vlastnost vertical-align (elementy: řádkové) Základní hodnoty zarovnání: baseline - na řádek bottom - na spodní okraj (např. buňka tabulky) middle - na střed (např. buňka tabulky) top - na horní okraj (např. buňka tabulky) sub - dolní index super - horní index ± číslo % - v procentech výšky řádku (např. 50% nebo -20%)

24

Text v CSS

vertical-align: super vertical-align: sub

Příklad použití: .hindex { vertical-align: super; } .dindex { vertical-align: sub; }

S<span class="dindex">1 = 200m<span class="hindex">2

Text v CSS

vertical-align: top

vertical-align: bottom

Příklad použití:

V definici příslušné buňky tabulky:

td.nahore { vertical-align: top; }

text1

td.dole { vertical-align: bottom; }

text2

25

Text v CSS DEKORACE TEXTU CSS vlastnost text-decoration (elementy: blokové, řádkové) Hodnoty: overline - vodorovná čára nad textem line-through - přeškrtnutý text underline - podtržený text none – text bez dekorace (např. zrušení podtržení u odkazů)

Text v CSS

text-decoration: overline text-decoration: line-through text-decoration: underline text-decoration: none

Příklad použití: a.nepodtrzeny { text-decoration: none; } Tento odkaz není podtržený.

26

Text v CSS DEKORACE TEXTU CSS vlastnost text-transform (elementy: blokové, řádkové) Hodnoty: capitalize – první písmena slov velká uppercase – všechna písmena velká lowercase – všechna písmena malá none – text bez změny

Text v CSS

text-transform: capitalize text-transform: uppercase text-transform: lowercase

Příklad použití: p.velka-pismena { text-transform: uppercase; }

toto je nějaký text.

27

Hypertextový odkaz v CSS BARVA ODKAZU Standardně se nenavštívený odkaz v prohlížeči zobrazuje modrý. Barvu odkazu lze změnit stejně jako okolní text CSS vlastností color. DEKORACE ODKAZU Standardně se odkaz zobrazuje podtržený. Je-li potřeba podtržení změnit (např. v menu zrušit), použijeme CSS vlastnost text-decoration. Příklad (červený, nepodtržený odkaz): a.menu { color: #f00; text-decoration: none; }

Hypertextový odkaz v CSS PSEUDOTŘÍDY Slouží k odlišnému definování vlastností hypertextových odkazů: Nenavštívený odkaz: a:link { color: blue; } Navštívený odkaz: a:visited { color: purple; } Odkaz při kliknutí myší: a:active { color: red; } Odkaz pří najetí kurzorem myši: a:hover { text-decoration: none; } Mezi názvem elementu a pseudotřídou je dvojtečka. (a:hover)

28

Odrážky seznamů v CSS NEČÍSLOVANÉ SEZNAMY CSS vlastnost list-style-type Hodnoty: disc (vyplněné kolečko) circle (prázdné kolečko) square (vyplněný čtvereček)

Příklad použití: ul { list-style-type: circle; }

Odrážky seznamů v CSS ČÍSLOVANÉ SEZNAMY CSS vlastnost list-style-type Hodnoty: decimal – arabské číslice (1.) lower-roman – malé římské číslice (i.) upper-roman – velké římské číslice (I.) lower-alpha – malá písmena (a.) upper-alpha – velká písmena (A.)

Příklad použití:

Existují i jiné hodnoty, nejsou však

ol { list-style-type: upper-alpha; }

plně podporovány všemi prohlížeči.

29

Odrážky seznamů v CSS OBRÁZKOVÁ ODRÁŽKA CSS vlastnost list-style-image Hodnotou je odkaz na obrázek představující odrážku. Obrázková odrážka by měla mít výšku úměrnou výšce textu.

Příklad použití: ul { list-style-image: url("obrazky/kvetinka.gif"); }

Rozměry blokových objektů Pro určení rozměrů blokových elementů existují CSS vlastnosti: width (šířka) height (výška) Pro určení výšky a šířky lze použít délkové jednotky (především px, %) Lze aplikovat na všechny blokové elementy, např.: blokový element

, nadpisy, odstavce, tabulky, atd.

30

Rozměry blokových objektů Příklad použití: #ramecek { width: 300px; height: 100px; border: 1px solid #f00;}

Pokusný text

100px 300px

Rozměry blokových objektů Příklad použití: p.sirka50 { width: 50%; }

Lorem ipsum dolor…

50% šířky stránky

31

Rámečky v CSS CSS vlastnost border (elementy: blokové, řádkové) Určuje všechny vlastnosti rámečku najednou. .ramecek { border: 1px solid #f00; } Vlastnosti rámečku lze definovat také jednotlivě: border-width (šířka rámečku) border-style (styl rámečku) border-color (barva rámečku) .ramecek { border-width: 1px; border-style: solid; border-color: #f00; }

Používáme tehdy, chceme-li určit pouze některé vlastnosti rámečku

Rámečky v CSS Hodnoty vlastnosti border-width (šířka rámečku) Šířku rámečku určujeme převážně v pixelech (px) Hodnoty vlastnosti border-style (styl rámečku) none

groove

dotted

ridge

dashed

inset

solid

outset

double

32

Rámečky v CSS Vlastnosti rámečku lze určit zvlášť pro:

top

levý okraj (left) pravý okraj (right)

left

right

horní okraj (top) spodní okraj (bottom)

bottom

Zápis CSS vlastnosti vypadá například takto: border-left: 2px dotted #f00; Zápis pro vybranou CSS vlastnost vypadá například takto: border-left-width: 2px; border-left-style: dotted; border-left-color: #f00;

Rámečky v CSS .ramecek { border: 2px dotted #00f; }

Modrý, tečkovaný rámeček šířky 2 pixely.

.ram-nahore { border-top: 2px solid #f00; }

Červený plný horní rám, šířka 2 pixely.

33

Užitečný tip: Rámečky lze aplikovat na všechny objekty, především se používají u blokových: odstavce, tabulky, bloky DIV, nadpisy, atd.

Pozadí v CSS CSS vlastnost background (elementy: blokové, řádkové) Umožňuje vytvořit pozadí stránky nebo (X)HTML elementu: background-color (barva na pozadí) background-image (obrázek na pozadí) backgroud-repeat (opakování obrázku na pozadí) background-position (umístění pozadí)

34

Pozadí v CSS CSS vlastnost background-color Příklad použití: body { background-color: #aaa; } (Barva na pozadí stránky bude světle šedá)

Ukázka: p.sedy { background-color: #aaa; }

Odstavec s šedým pozadím.

Pozadí v CSS CSS vlastnost background-image Příklad použití: .pozadi-obr { background-image: url("motyl.gif"); height: 120px; }

Obrázek na pozadí.

Použitý obrázek

35

Pozadí v CSS CSS vlastnost background-repeat. Umožňuje / zabraňuje opakování obrázku na pozadí. Hodnoty: no-repeat (bez opakování) repeat-x (opakování v ose x, tedy vodorovně) repeat-y (opakování v ose y, tedy svisle)

backgroud-repeat: no-repeat;

Pozadí v CSS CSS vlastnost background-position určuje pozici obrázku na pozadí. Vždy se uvádí dvě hodnoty: pro osu x (vodorovně), y (svisle): background-position: x y; 1. Hodnoty zadány slovně left

center

right

top

center

bottom

36

Pozadí v CSS Příklad použití: .pozadi-obr { height: 200px; background-image: url("motyl.gif"); background-repeat: no-repeat; background-position: center top; }

Obrázek na pozadí.

Obrázek na pozadí je umístěn: osa X: uprostřed osa Y: nahoře

Pozadí v CSS 2. Hodnoty zadány číselně Hodnoty pro umístění obrázku na pozadí v ose x, y lze zadat: - procentuálně (%) - pixely (px) 0% 0%

50%

100% Příklad použití background-position: 50% 0%

50%

Číselné hodnoty umožňují precizně umístit obrázek na

100%

pozadí

37

Konec modulu TWS_03b Děkuji Vám za pozornost.

38