,

,

,
,
1. , …
   
   Inline elementy 
   
   Není nová řádka, zabere nezbytnou šířku
   
   
   
   <span>, , , , , …
   
   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 
   
   
   
   Class je naopak pro označení skupiny (třídy) elementů 
   
    
   
   Selektor je pak #jmeno
   
   Selektor je pak .jmeno
   
   

   …

   
   
   Často se používají u
   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 …
   
   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 - 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ů 
   
   
   
   http://jigsaw.w3.org/css-validator 
   
   
   
   Monentálně používat CSS 2.1 nebo 3.0
   
   CSS validátor od tvůrců
   
   http://getfirebug.com/ 
   
   Užitečný vývojářský nástroj