NSWI096 - INTERNET CSS – kaskádové styly Mgr. Petr Lasák

M INULE Moje první stránka Můj první nadpis Test

F ORMÁTOVÁNÍ POMOCÍ CSS Formátování vzhledu již není součástí XHTML Do verze HTML 4.0 byl vzhled pouze pomocí tagů Používají se k tomu styly CSS CSS – Cascading Style Sheets XHTML obsahuje data k zobrazení CSS říká jak je zobrazovat Nestihneme probrat vše! – spoustu možností

J AK LINKOVAT CSS 1. Přímo k elementu … 2. Pomocí napsání styly do hlavičky … 3. Pomocí externího souboru + odkazu v hlavičce

K ASKÁDOVÁNÍ Definicí více stylů se výsledný styl: Skládá – doplnění různých definic do výsledku Překrývá – překrytí obecné definice speciální Priority Defaultní nastavení browseru Externí CSS soubor Interní CSS definice ( v hlavičce HTML ) Inline styl ( u elementu ) Poslední má nejvyšší prioritu

B LOKOVÉ VS I NLINE ELEMENTY Blokové elementy Nová řádka na konci, zabere maximální možnou šířku,,,,,, … Inline elementy Není nová řádka, zabere nezbytnou šířku,,,,, … Dá se vynutit chování elementu display: block; vs display: inline;

Z ÁKLADNÍ SYNTAX Definice stylu Selektorem je určení elementu (nebo skupiny) v DOM Vlastnosti jsou vlastnost:hodnota (hodnoty) Komentáře v /* */

R OZŠÍŘENÉ SELEKTORY – ID A C LASS Každému XHTML elementu lze přiřadit atributy id a class Id musí být jedinečný v rámci dokumentu Selektor je pak #jmeno Class je naopak pro označení skupiny (třídy) elementů Selektor je pak.jmeno … Často se používají u a Blokové a inline elementy

D ALŠÍ TYPY SELEKTORŮ Selector groups Více selektorů za sebou, oddělené čárkami p, a, ul { … } Element group selectors Lze specifikovat nějakou class daného elementu p.blue { color:blue; } Nested selectors Lze specifikovat nějaky selektor uvnitř id nebo class.blue p { … }

V LASTNOSTI A HODNOTY Některé vlastnosti mají hodnoty rozdělené na více částí border-width: 9px; Na všech stranách bude rámeček široký 9 pixelů border-width: 10px 0px 10px 0px; Pořadí: nahoře, vpravo, dole, vlevo Rámeček nahoře a dole 10 pixelů, vlevo a vpravo ne Nezapomínat na jednotky bez mezery px, pt, em font-size: 12pt;

B OXING M ODEL Základní boxing model Margin – „obalení“ – okolo okraje Border – okraj – mezi Margin a Padding Padding – „vycpávka“ kolem obsahu, uvnitř okraje Content – vlastní obsah

B OXOVACÍ MATEMATIKA Width a height je to pouze contentu K celkové velikosti je potřeba připočíst i zbytek Je potřeba si dobře rozmyslet místo!!!! Problém s kompatibilitou v IE (dnes snad už ne) Padding a border je započítáván do width a height Pokud není specifikován doctype Dříve i po specifikaci doctype

Š ÍŘKY ELEMENTŮ Každý element může mít definovanou svojí šířku Některé mají šířku podle obsahu, jiné na šířku stránky Šířka může být: absolutní – např. 150px relativní vůči celkové šířce – např. 10% stejná jako rodič – inherit Sloupce tabulky mohou mít i zbytek - * Pouze jeden sloupec v tabulce Znamená to zbytek do 100% velikost Musí být specifikována velikost tabulky

P LAVÁNÍ - FLOAT Vlastnost float blokových elementů Vlevo, vpravo – float: right vs float: left Obtékání na opačné straně Pokud chci skončit obtékání tak clear a specifikace strany Pouze horizontálně Pokud je jich více, tak plavou vedle sebe Pokud není místo, pak jsou na dalším řádku

P OZICOVÁNÍ 1. position: static; Normálně podle toku textu – ignoruje top, left, right, bottom 2. position: relative; Relativně vůči normálnímu toku textu - top, left, right, bottom 3. position: fixed; Fixní vůči oknu prohlížeče - top, left, right, bottom 4. position: absolute; Absolutní pozice vůči rodiči - top, left, right, bottom Mohout se překrývat z-index: -1;

Z AJÍMAVOSTI - G RAFICKÉ PROJEVY ATRIBUTŮ Každý element má grafický projev Kromě skrytých … Vlastnost display: none vs. visibility: hidden display – nemá žádný projev visibility – není vidět, ale zabere místo => musím s ním počítat

Z AJÍMAVOSTI – R ÁMEČEK A B ARVY Rámeček border-width: šířka + jednotky; border-style: [solid|dotted|double|none]; border-color: barva Barvy obecně Pojmenované: black, navy, blue, red, pink, … Definované číselně – červená, zelená, modrá rgb(123,123,123) – decimálně, čísla #ffffff - hexadecimálně

Z AJÍMAVOSTI - F ONTY Patkové vs. Bezpatkové serif vs. sans Times New Roman vs. Arial Proporcionální vs. Neproporciaonální Ruzná šířka písmen Arial vs. courier

Z AJÍMAVOSTI - O DKAZY XHTML - vs. CSS url(…) Ovšem ten má podtřídy Každému z nich lze přiřadit jednu CSS třídu a:link – nenavštívený odkaz a:visited - navštívený odkaz a:hover – mouse over vlastnost a:active – zvolený (aktivní) link

Z AJÍMAVOSTI - B ACK G ROUND U stránky (html) lze nastavit pozadí jako obrázek background-image – lze nastavit zdroj a opakování hodnota je pak url(‘cesta’) x-repeat / y-repeat Lze také nastavit fixní pozadí ( nescrolluje se ) U všech elementu lze nastavit barva pozadí background-color : hodnota

Z AJÍMAVOSTI - SEZNAMY Změna vodící značky list-style-type – změna charakteru značky list-style-image – obrázek místo značky Číslovaný charakter Čislování s vodící nulou, římské číslování, latinské číslování (a,b,c …), řecké číslování (alpha, beta …) Nečíslovaný charakter Lze zrušit značku Nebo nahradit prázdným kolečkem či čtvercem

V ALIDACE & O DKAZY - DTD stylů Monentálně používat CSS 2.1 nebo CSS validátor od tvůrců Užitečný vývojářský nástroj