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

Transkript

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

2 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 pomocí tagů Tagy jako color, font a další Ale HTML na tohle nebylo původně určeno V dnešní době jsou tyto formátovácí tagy zastaralé Nepoužívat!!!

3 Základní syntax Selector je normálně HTML element Hodnota může být i množina hodnot Některé jsou s veličinami px, em(ex), pt(in, mm, pc) Komentáře v /* */

4 Některé vlastnosti chceme na více elementů Id Jeden unikátní element Atribut id = jmeno V CSS se selector značí jako #jmeno Class Skupina více elementů i různého typu Atribut class = jmeno V CSS se selector značí jako.jmeno Někdy chceme, aby jenom určité elementy s danou třídou měly tyto vlastnosti selektor je pak element.třída

5 Externí soubor stylů Soubor s příponou.css Nesmí obsahovat žádný HTML tag V hlavičce se specifikuje tag link <link rel="stylesheet" type="text/css" ref="/style.css" /> U hodnot s jednotkami nesmí být mezera 20 px vs. 20px Interní soubor stylů Stejný jako externí, jenom vložen přímo do HTML V hlavičce mezi párové tagy <style>

6 Tzv. Inline stylování Použít jenom v nejnutnějším případě mixování obsahu se stylem Každý element má atribut style Do něj se zapíše stejná definice jako v CSS souboru Je platná pouze pro daný styl

7 Jednotlivé vlastnosti se dají Skládat dvě definice téhož bez konflitků Překrývat více definic téhož (kaskáda) Konkrétnější je více jak obecné Priority: Defaultní nastavení browseru Externí CSS soubor Interní CSS definice ( v hlavičce HTML ) Inline styl ( u elementu ) Poslední má nejvyšší prioritu

8 Selector groups Lze napsat více selektorů za sebou Oddělené čárkou Nesting selectors Lze specifikovat nějaké elementy v dané třídě.jmenotridy selector Místo selectoru lze použít i třídu Selector specification Chci aby se daná třída dala použít pouze na nějakém typu elementu

9 Základní koncepce boxing modelu: Základní chování všech elementů v HTML Specifikace po směru hodinových ručiček

10 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 Padding a border je započítáván do width a height Pokud není specifikován doctype Dříve i po specifikaci doctype

11 Posuň element co nejvíce jak to jde Elementy před nejsou tím dotčeny Elementy za budou obtékat na opačné straně Pokud nechci, musím určit míst od kterého už se neplave Pomocí vlastnosti clear a hodnoty které strany Lze pouze horizontálně tedy vlevo, vpravo Pokud je jich více, tak plavou vedle sebe Pokud není místo, pak jsou na dalším řádku

12 Umožní nastavit pozici nějakého elementu Specifikuje se top, right, bottom, left Normálně je pozice statická nefungují na ně specifikace Fixed fixní pozice k levému hornímu rohu Relative relativní k normální (statické) pozici Absolute relativně vůči prvnímu html elementu nestatického charakteru nebo HTML Overlapped Fixed + z-order pozice Negativní a nebo pozitivní, od menšího a posledního

13 Každý element má nějaký výstup Snad krom input type = hidden Vlastnost display: none vs. visibility: hidden Visibility cílový element není zobrazen, ale ve výsledku zabírá své místo Počítá se s ním např. do velikosti nějaké stránky Display takto uvedený element nemá žádný projev Odpovídá input type = hidden

14 Blokové elementy mají na konci přidaný <br> Line break odřádkuje se <p>, <div>, <h1>.. <h6> <div> může obsahovat libovolný počet <h> a <p> elementů <h> a <p> elementy se nemohou vnořovat vzájemně Inline elementy Jsou většinou v obsaženy v textu Nemají vnější projev <a>, <span> Zobrazení elementu se dá nastavit Property display s hodnotou block nebo inline

15 Typy písma se specifikují jako font-family Sans-serif patkové Times New Roman Sans bezpatkové Arial Proporcionální všechny znaky Všechny znaky stejně široké Courier New Neproporcionální znaky různě široké Times New Roman, Verdana

16 Odkazy je element <a> v HTML V CSS jsou zabaleny ve funkci url( cesta ) Cesta se bere relativně vůči server adrese Ovšem ten má podtřídy: a:link nenavštívený odkaz a:visited - navštívený odkaz a:hover mouse over vlastnost a:active zvolený (aktivní) link Každému z nich lze přiřadit jednu CSS třídu

17 Background pozadí 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 lze nastavit barva Background-color : hodnota Hodnota je buď barva definovaného jména Nebo vlastní pomocí funkce rgb(r,g,b) 3 složky Čí vlastní pomocí hexa zápisu #rrggbb

18 Nečíslované list-style-type změna charakteru Lze zrušit značku Nebo nahradit prázdným kolečkem či čtvercem Číslované list-style-type změna charakteru Lze změnit číslování Čislování s vodící nulou, římské číslování, latinské číslování (a,b,c ), řecké číslování (alpha, beta ) Jako oddělovač lze zobrazit obrázek list-style-image a link na obrázek

19 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 tabulky mohou mít i zbytek - * Pouze jeden sloupec v tabulce Znamená to zbytek do 100% velikosti

20 Tutoriál CSS Popis standardů Validace CSS Firebug