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

Prezentace na téma: "NSWI096 - INTERNET CSS – kaskádové styly Mgr. Petr Lasák."— Transkript prezentace:

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

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

3 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í http://www.w3schools.com/css/

4 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

5 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

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

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

8 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

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

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

11 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

12 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

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

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

16 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

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

18 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

19 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

20 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

21 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

22 V ALIDACE & O DKAZY http://www.w3.org/TR/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