Základy CSS (3. přednáška)
Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze dvou částí 1. část, určující kterých prvků se pravidlo týká 2. část, určující jaký vzhled dané prvky budou mít
CSS pravidla div.cerveny { color:red; font-size:20pt; } div.cerveny selektor určuje na které prvky se následující skupina pravidel vztahuje color:red; jedno pravidlo ze skupiny color název vlastnosti, kterou pravidlo upravuje red hodnota, kterou bude daná vlastnost mít
HTML & CSS provázání V externím souboru <link rel="stylesheet" href="css/layout.css" type="text/css"/> Pomocí <style>...</style> <style type= text/css > a { color:red; } a:hover { text-decoration:none; } </style> Inline <p style= color:red > Tohle bude cerveny odstavec </p>
CSS Selektory tag selektor omezuje působnost na daný html prvek p { color: yellow; } pravidla se týkají prvků <p> class selektor omezuje působnost na prvky dané třídy.zvyraznene { color: yellow; } pravidla se týkají všech prvků jejichž atribut class obsahuje zvyraznene attribute selektor omezuje působnost na prvky mající daný atribut [type="input"] { border: solid 1px; } pravidla se týkají všech prvků, jejichž atribut type má hodnotu input pseudo-class selektor omezuje působnost na prvky v určitém stavu :hover { color: blue; } pravidla se týkají prvků, nad nimiž se zrovna nachází myš id selektor omezuje působnost na prvek s daným id #prvni_nadpis { font-size: 20pt; } pravidla se týkají prvku, jehož id je prvni_nadpis
CSS Selektory, pokračování Selektory lze kombinovat konkatenací prvek musí splnit všechna omezení div.zvyraznene#nadpis:hover čárkou prvek musí splnit alespoň jedno omezení div,.zvyraznene,#nadpis,:hover mezerou, > nepoužívejte :-)! negací prvek nesmí splnit dané omezení :not(.zvyraznene) prvek nesmí mít třídu zvyraznene Pokud prvek splní různé selektory, přednost mají ty s největší specifičností. V případě shody má přednost pozdější pravidlo. Selektory jsou uspořádány podle specifičnosti následovně: tag, class, attribute, pseudo-class, id
CSS Vlastnosti každá vlastnost má defaultní hodnotu vlastnosti se dělí na dědičné a nedědičné
Barvy Vlastnosti color Hodnoty background-color black, gray silver white red green blue yellow aqua fuchsia maroon orange olive purple green navy teal #C0C0FF red: C0 = 192 blue: C0 = 192 green: FF = 255 rgb(192,192,255)
Fonty Vlastnosti font-family font-weight font-style font-variant text-decoration font-size serif,sans-serif,cursive,fantasy,monospace bold italic small-caps underline, line-through small, medium, large, smaller, larger, 150%, 1.5em, 12pt line-height 10px,... Poznámka @font-face umožňuje používat vlastní fonty, které nemá uživatel nainstalované. Viz později.
Okraje margin minimální vzdálenost od ostatních boxů (auto centruje) width border-style solid, dashed, dotted,... margin-top padding-top border-color teal,... border-width 3px,... border-radius 15px (zakulacené rohy) padding vzdálenost obsahu od stran boxu width velikost boxu (včetně padding!) margin-left padding-left Content padding-bottom margin-bottom padding-right margin-right
Pozice & Layout Vlastnost position static default relative pomocí vlastností top, bottom, left, right lze posunout prvek z místa, kde by se jinak nacházel absolute pomocí vlastností top, bottom, left, right umístí prvek vzhledem k prvnímu předkovi, který má nastaveno position:relative, resp. vzhledem k body Vlastnost float right, left, none obtékání zprava, zleva, žádné (default) Vlastnost clear right, left, both obtékání zprava, zleva Vlastnost text-align right, left, centre, justify zarovnání inline -level obsahu
Display style none prvek se nezobrazí block prvek se zobrazí jako block -level prvek inline prvek se zobrazí jako inline -level prvek Poznámka. Zajímavého efektu lze např. docílit u seznamů (prvky li), které jsou standardně inline -level
Cvičení http://jsbin.com/ Cvičení 1.: Vyrobte html stránku, kde budou dva typy nadpisů, každý jiné velikosti barva pozadí bude jiná než bílá bude několik odkazů, každý z nich bude mít jinou barvu všechny odstavce budou skloněným písmem Cvičení 2.: Zkuste vyrobit stránku co nejvíce se podobající stránce http://www.gnome.org/