Kaskádové styly

Kaskádové styly Informatika pro ekonomy I přednáška 4

Proč používat CSS? • Řadu grafických charakteristik dokumentu lze nastavit pomocí parametrů jednotlivých tagů a tagu <font>, 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ě

Základ práce s CSS • Styly se skládají z pravidelselektor {vlastnost:hodnota; …} • Selektorem je nejčastěji jméno tagu • Pro každý tag jsou platné pouze některé vlastnostiH1 {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

Připojení definic • Přímo k dané značce – mírně odporuje filozofii kaskádových stylů, nedoporučuje se<značka style="definice_stylu"> • 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<style type="text/css">definice_stylu</style>

Připojení definic • V externím souboru – výhodné pro uplatnění stejných definic ve více dokumentech<head> <link rel="stylesheet" href="URL_stylu" type="text/css"></head>

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}<p class="cerveny">

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 tagP.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ů <div> a <span>

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}<p id="tucny">

Kontextové selektory • Můžeme specifikovat kritéria tak, že vyhovují pouze pro selektor, který je použit uvnitř jiného selektoruUL 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)

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

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í <style> • 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)

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

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-widththin|medium|thick|délka padding margin

Kaskádové styly

Télécharger la présentation

Plus de contenu associé