TNPW1 Cvičení

TNPW1 Cvičení 5 Opakování selektorů h2 {... }.komentar {... } #menu {... } header img {... }.top p {... } #menu a {... } 2

TNPW1 Cvičení 5 Upgrade tabulky problém s - mícháme styly do obsahu, řešení: změníme na a přidáme styl: table, table tr th, table tr td { border: 1px solid black; /* přidáme rámeček */ border-collapse: collapse; /* sjednotíme ho */ padding: 10px; /* přidáme vnitřní okraj*/ } 3

Dědičnost a kaskáda

TNPW1 Cvičení 5 Přidělení jednoho stylu více elementům Oddělení čárkou v selektoru CSS h1, h2,.modra_trida { color:blue; } 5

TNPW1 Cvičení 5 Přidělení více stylů jednomu elementu Pomocí více tříd v atributu elementu, oddělení mezerou blablabla p { text-align: right; }.modry { color:blue; }.odsadit { margin-bottom: 30px; } 6

TNPW1 Cvičení 5 Dědičnost v CSS Některé vlastnosti se dědí (např. typ, velikost a barva písma, výška řádku,…) body {font-family: arial, color: red; } -> dědí všechny elementy v body – nadpisy, odstavce atd., pokud se nepřepíšou specifičtějším pravidlem 7

TNPW1 Cvičení 5 Kaskáda Každému elementu můžeme nadefinovat jednu vlastnost víckrát s různými hodnotami (záměrně nebo omylem) CSS potom určuje, která hodnota se nakonec použije, podle několika pravidel – Specifičnost selektoru, pořadí, umístění 8

TNPW1 Cvičení 5 Kaskáda 2 Specifičnost / konkrétnost selektoru – nejspecifičtější selektor vyhrává Pořadí od nejobecnějšího k nejspecifičtějšímu: název HTML tagu (body, p, ul,…), třídy (.nejakaTrida) a pseudotřídy (např. :hover), nejspecifičtější jsou identifikátory (#id) 9

TNPW1 Cvičení 5 Kaskáda 3 Specifičnost selektoru se sčítá (tag 1 bod, třída 10 bodů, identifikátor 100 bodů) body {color: red} /*1 bod*/ body p {color: blue} /*1 + 1 = 2 body*/ p.zluta {color: yellow} /* = 11 bodů*/ p.zelena a {color: green} /* = 12*/ #identifikator {color: black} /* 100 bodů*/ 10

TNPW1 Cvičení 5 Kaskáda 4 Pořadí – pokud je vlastnost definovaná víckrát pro stejně specifický selektor, použije se to, které je definováno jako poslední Umístění – inline / řádkový styl (v atributu style) má přednost před definicí v externím souboru i definicí mezi tagy 11

TNPW1 Cvičení 5 Využití kaskády Např. chceme určitým způsobem stylovat všechny odstavce, a jeden z nich trochu jinak blablabla blablabla p {color:grey; margin:20px; text-align: justify; } p.cerveny {color:red;} 12

Neutrální tagy

TNPW1 Cvičení 5 SPAN a DIV – neutrální tagy Většina tagů / elementů nese význam, tj. h1 znamená nadpis, p znamená odstavec, … Pro účely stylování můžeme použít také tzv. neutrální tagy a je řádkový element je blokový element 14

TNPW1 Cvičení 5 Použití DIV pro členění obsahu 15 pozn.: pro většinu základních obsahových bloků máme strukturní HTML5 elementy

TNPW1 Cvičení 5 DIV jako obalový element první z řady odstavců… druhý z řady odstavců….skupina_odstavcu { border: 1px solid black; background-color: grey; } 16

TNPW1 Cvičení 5 SPAN např. pro zvýraznění blablabla blablabla blablabla blablabla blablabla blablabla bla něco důležitého blabla p {font-family: Arial; color:black; font-style: italic;}.pozor { color:red; font-weight: bold; } Také příklad dědičnosti (span dědí font-family:Arial i font-style: italic) a kaskády (color:red vyhrává, protože je ve specifičtějším selektoru) 17

CSS menu

TNPW1 Cvičení 5 Konstrukce menu Hlavní menu by mělo být uvnitř tagu Základem je nečíslovaný seznam s definovanou šířkou Uvnitř položek jsou odkazy - s vhodnými okraji, zarovnáním a dalšími styly (barva pozadí, velikost písma,...) Nejdříve se ale potřebujeme zbavit defaultního levého paddingu seznamu a odrážek (defaultní styly seznamu) a podtržení (defaultní styl odkazu) je řádkový element, tj. nemůžeme použít výšku, okraje apod., aby byl blokový je třeba použít vlastnost display:block 19

TNPW1 Cvičení 5 CSS vlastnosti pro menu 1 margin - vnější okraj padding - vnitřní okraj width - šířka text-align- zarovnání textu display- změna zobrazení elementu 20

TNPW1 Cvičení 5 CSS vlastnosti pro menu 2 display:block-změní element na blokový list-style-type: none; - zbaví odrážek text-decoration: none; - zbaví podtržení 21

TNPW1 Cvičení 5 Pseudotřídy jsou dynamické, vyjadřují aktuální stav a:hover {... }- pseudotřída hover = styl při přejetí kurzoru myši a:focus {... } - pseudotřída focus = styl když má element fokus (např. pomocí klávesy Tab) 22

TNPW1 Cvičení 5 Příklady sloupcového menu 23

TNPW1 Cvičení 5 Jak přidat pěkné písmo místo Latin dát Latin Extended (kvůli ěščřž...) řádek kódu "<link... " dát do hlavičky řádek kódu "font-family:..." dát jako definici stylu k elementu, v jakém písmo chceme 24

Bodovaný úkol

TNPW1 Cvičení 5 Bodovaný úkol (2 body) Vytvořte HTML5 validní stránku, obsahující menu, které: – vypadá jako menu, ne jako seznam ani odkazy (tj. přepište modrou barvu odkazů, podtržení, odrážky,..) – tlačítka jsou celoklikací (tj. z odkazu musíte vytvořit blokový element), použijte barvu písma a barvu pozadí – jednotlivé položky od sebe mají rozestup, vycentrovaný text – po najetí na položku kurzorem myši nebo vybráním pomocí Tab se daná položka zvýrazní (libovolným stylem, ale neměňte velikost písma - potom menu "poskakuje")

TNPW1 Cvičení 5 Odevzdání úkolu Kdo má prezentaci na lide.uhk.cz – stačí poslat odkaz na stránku s úkolem Kdo tvořil jinde – pošlete soubory / ZIP archiv Na můj Tentokrát můžete posílat až do soboty 14.3.