NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák
MINULE <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs"> <head> <title>moje první stránka</title> </head> <body> <h1>můj první nadpis</h1> <p>test</p> </body> </html>
FORMÁ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í http://www.w3schools.com/css/
JAK LINKOVAT CSS 1. Přímo k elementu <p style="font-size: 5pt;" > </p> 2. Pomocí napsání styly do hlavičky <style type="text/css"> </style> 3. Pomocí externího souboru + odkazu v hlavičce <link rel="stylesheet" href="styl.css"/>
KASKÁ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
BLOKOVÉ VS INLINE ELEMENTY Blokové elementy Nová řádka na konci, zabere maximální možnou šířku <div>, <h1>, <p>, <ul>, <ol>, <li>, Inline elementy Není nová řádka, zabere nezbytnou šířku <span>, <i>, <b>, <img>, <input>, 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 /* */
ROZŠÍŘENÉ SELEKTORY ID A CLASS 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 <p class="modře"> </p> Často se používají u <div> a <span> Blokové a inline elementy
DALŠÍ 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 { }
VLASTNOSTI 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;
BOXING MODEL Základní boxing model Margin obalení okolo okraje Border okraj mezi Margin a Padding Padding vycpávka kolem obsahu, uvnitř okraje Content vlastní obsah
BOXOVACÍ 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
PLAVÁ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
POZICOVÁ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;
ZAJÍMAVOSTI - GRAFICKÉ PROJEVY ATRIBUTŮ Každý element má grafický projev Kromě skrytých <input type= hidden > 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
ZAJÍMAVOSTI RÁMEČEK A BARVY 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 0-255 #ffffff - hexadecimálně
ZAJÍMAVOSTI - FONTY Patkové vs. Bezpatkové serif vs. sans Times New Roman vs. Arial Proporcionální vs. Neproporciaonální Ruzná šířka písmen Arial vs. courier
ZAJÍMAVOSTI - ODKAZY XHTML - <a href= > 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
ZAJÍMAVOSTI - BACKGROUND 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
ZAJÍ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
VALIDACE & ODKAZY http://www.w3.org/tr/ - DTD stylů Monentálně používat CSS 2.1 nebo 3.0 http://jigsaw.w3.org/css-validator CSS validátor od tvůrců http://getfirebug.com/ Užitečný vývojářský nástroj