Kaskádové styly IS a webové prezentace cvičení. Proč používat CSS? Řadu grafických charakteristik dokumentu lze nastavit pomocí parametrů jednotlivých.

Prezentace na téma: "Kaskádové styly IS a webové prezentace cvičení. Proč používat CSS? Řadu grafických charakteristik dokumentu lze nastavit pomocí parametrů jednotlivých."— Transkript prezentace:

1 Kaskádové styly IS a webové prezentace cvičení

2 Proč používat CSS? Řadu grafických charakteristik dokumentu lze nastavit pomocí parametrů jednotlivých tagů a tagu, je to však velmi nepraktické –musíme tak činit pro každý element zvlášť –místo struktury HTML dokumentu se začíná hledět na grafický vzhled Lepší možnost dává použití kaskádových stylů (CSS) – lze definovat vzhled jednotně a v celém dokumentu, vizuální podoba dokumentu je definována odděleně

3 Základ práce s CSS Styly se skládají z pravidel selektor {vlastnost:hodnota; …} Selektorem je nejčastěji jméno tagu Pro každý tag jsou platné pouze některé vlastnosti H1 {color:red; font-family:sans-serif} Jeden dokument může obsahovat několik doplňujících se stylů, jeden styl lze použít ve více dokumentech

4 Připojení definic Přímo k dané značce – mírně odporuje filozofii kaskádových stylů, nedoporučuje se V určitém místě dokumentu – používá se pro definice, které jsou specifické pro daný dokument a nepředpokládá se jejich použití v jiném dokumentu definice_stylu

5 Připojení definic V externím souboru – výhodné pro uplatnění stejných definic ve více dokumentech

6 Definování tříd Pokud jako selektor použijeme jméno tagu, pak se změny projeví u všech výskytů tohoto tagu v dokumentu Pokud chceme změny promítnout je u některých výskytů, použijeme jako selektor třídu (název selektoru začíná. ) Příklad.cerveny {color:red}

7 Definování tříd Pokud před jméno třídy doplníme i jméno tagu, omezíme použití třídy pouze na tento tag P.cerveny {color:red} HTML tag může používat jen jednu třídu, pokud jich specifikujeme více, je použita pouze ta první U jmen tříd záleží na velikosti písmen Využití speciálních tagů a

8 Identifikátory Můžeme vytvářet i styly pojmenované individuálně, většinou pro upřesnění stylistických vyjádření v rámci třídy HTML element může obsahovat jak specifikaci třídy, tak identifikátor značky Při definování identifikátoru používáme jako selektor jeho jméno začínající # #tucny {font-weight:bold}

9 Kontextové selektory Můžeme specifikovat kritéria tak, že vyhovují pouze pro selektor, který je použit uvnitř jiného selektoru UL LI {color:red} V definici stylů lze používat komentáře /* komentář */ Většina styly nadefinovaných vlastností se dědí z nadřazených elementů (lze je samozřejmě předefinovat)

10 Kombinace třídy a identifikátoru značky P {font-size:12px}.odstavec {color:black} #spec {text-decoration:underline} Klasický odstavec 12 px 12 px, černě 12 px, podtržený vše

11 Skládání stylů Pokud je na jeden element použito více stylů, jsou aplikovány podle těchto pravidel a v tomto pořadí –lokálně definované styly –styly definované pomocí –externě definované styly (z nich ten naposledy definovaný) Lokální styly přepisují hodnoty zděděné od rodičů, specifičtější styl přepisuje obecnější (identifikátor značky přepíše třídu)

12 Jednotky Délkové – skládají se z čísla a jednotky –relativní – em, ex, px –absolutní – pt, pc, in, mm, cm Barvy –jméno barvy – pouze pro 16 základních –#rrggbb – hodnoty jsou 0–F –rgb(r,g,b) – hodnoty jsou 0–255 –rgb(r%,g%,b%) – hodnoty jsou 0–100

13 Nastavitelné parametry (I) Rodina písma font-family Arial|Tahoma|Verdana|… Řez písma font-style normal|italic|oblique Varianta písma font-variant normal|small-caps Duktus písma font-weight normal|bold|bolder|lighter|[1-9]00 Stupeň písma font-size xx-small|x-small|small|medium| large|x-large|xx-large|larger| smaller|číslo|procento

14 Nastavitelné parametry (II) Barva písma color Barva pozadí background-color Obrázek na pozadí background-image Vertikální zarovnání vertical-align baseline|sub|super|top|text-top| middle|bottom|text-bottom|procento Horizontální zarovnání text-align right|left|center|justify Odstavcová zarážka text-indent délka|procento

15 Nastavitelné parametry (III) Vnější okraje margin –horní margin-top –dolní margin-bottom –pravý margin-right –levý margin-left Vnitřní okraje padding –horní padding-top –dolní padding-bottom –pravý padding-right –levý padding-left Šířka rámečku border-top-width thin|medium|thick|délka TEXT padding margin