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

Rozměr: px

Začít zobrazení ze stránky:

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

Richard Horák
před 7 lety
Počet zobrazení:

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

2 MINULE <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="cs"> <head> <title>moje první stránka</title> </head> <body> <h1>můj první nadpis</h1> <p>test</p> </body> </html>

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

4 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"/>

5 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

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

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

8 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

9 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 { }

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

11 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

12 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

13 ŠÍŘ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

14 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

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

16 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

17 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 #ffffff - hexadecimálně

18 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

19 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

20 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

21 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

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

Podobné dokumenty

CSS Stylování stránek. Zpracoval: Petr Lasák

CSS Stylování stránek. Zpracoval: Petr Lasák CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze