Návrh a tvorba WWW Cvičení 2 CSS 3. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu.

Prezentace na téma: "Návrh a tvorba WWW Cvičení 2 CSS 3. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu."— Transkript prezentace:

1 Návrh a tvorba WWW Cvičení 2 CSS 3

2 Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu a formátování dokumentů napsaných značkovacím jazykem. Nejčastěji se CSS používá pro grafickou prezentaci HTML stránek. Další použití lze nalézt např. u XML. Podpora nových CSS vlastností je v prohlížečích diskutabilní. U některých vlastností je i rozdíl v samotné implementaci (stejná vlastnost se v různých prohlížečích chová odlišně). logo CSS 3 dle w3c

3 Syntaxe CSS Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. selektor {vlastnost: hodnota_vlastnosti} Příklad: html: css: výsledek: Můj první styl. div {color: red; text-decoration: underline} Můj první styl.

4 Použití CSS v HTML Přímý styl Styl zaveden přímo ke konkrétnímu tagu prostřednictvím atributu style. Stylopis v hlavičce HTML Styly uvedeny jako obsah tagu style v hlavičce HTML. Externí soubor Nevizuální připojení externího souboru se stylopisem. text … div {color: red;}

5 Délkové jednotky Absolutní jednotky –milimetr (1mm = 3.78px) - mm –centimetr (1cm = 37.8px) - cm –palec (1in = 96px) - in –typografický bod - pt –cicero – pc Relativní jednotky - mění svou velikost v závislosti na aktuální velikosti písma –Šířka velkého písmene M - em –Výška malého písmene x – ex Procenta – značíme %, počítají se z velikosti nadřazeného elementu Pixly – značíme px, základní jednotka Délková jednotka se píše hned za číslo, desetinná místa se oddělují tečkou.

6 Barvy v CSS Název barvy –Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow RGB zápis –Procentuálně –Desítkově –Šestnáctkově Paletu barev si můžete vytvořit například pomocí aplikace http://colorschemedesigner.com/ nebo http://kuler.adobe.com/. Body {color:blue} body {color:rgb(100%,0%,100%)} body {color:rgb(255,0,0)} body {color:#FF0000}

7 Třída, Identifikátor Třída –v CSS vytváříme třídu selektor.trida –v HTML přiřazujeme vlastnosti CSS přes třídu pomocí atributu class Identifikátor –v CSS vytváříme identifikátor selektor#trida –v HTML přiřazujeme vlastnosti CSS přes identifikátor pomocí atributu id *#barva {color:red} *.barva {color:red}

8 Třída, Identifikátor * – univerzální selektor (lze vynechat) selektorsyntaxefunkce typový selektorAvšechny elementy A selektor třídyA.mojetridavšechny elementy A s atributem class="mojetrida" ID selektorA#mujidelement A s jedinečným identifikátorem id="mujid" Selektor následníkaA Bvšechny elementy B, které jsou uvnitř elementu A

9 body zdrojový kód: blok_2/css/basic02.htm

10 Písmo

11 Blok

12 Pozadí

13 Hranice

14 Box

15 Header I. zdrojový kód: blok_2/css/basic03.htm

16 Header II. zdrojový kód: blok_2/css/basic04.htm

17 Section middle zdrojový kód: blok_2/css/basic05.htm

18 Section customers zdrojový kód: blok_2/css/basic06.htm

19 Footer I. zdrojový kód: blok_2/css/basic07.htm

20 Validace stylů Validátor –http://http://jigsaw.w3.org/css-validator/

21 Kontrolní otázky 1.Co znamená akronym CSS? 2.Co je to selektor? 3.Jaké máme v CSS délkové jednotky? 4.Jaký je rozdíl mezi řádkovými a blokovými elementy? 5.Jakou vlastností můžeme změnit blokový element na řádkový element? 6.Jak vypadá v CSS box model?