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 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

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.

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;}

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.

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 nebo Body {color:blue} body {color:rgb(100%,0%,100%)} body {color:rgb(255,0,0)} body {color:#FF0000}

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}

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

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

Písmo

Blok

Pozadí

Hranice

Box

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

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

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

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

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

Validace stylů Validátor –

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?