1 / 15

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ášť

dandre
Download Presentation

Kaskádové styly

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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ě

  3. 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

  4. 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>

  5. 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>

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

  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 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>

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

  9. 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)

  10. 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>

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

  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-familyArial|Tahoma|Verdana|… • Řez písma font-stylenormal|italic|oblique • Varianta písma font-variantnormal|small-caps • Duktus písma font-weightnormal|bold|bolder|lighter|[1-9]00 • Stupeň písma font-sizexx-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-alignbaseline|sub|super|top|text-top|middle|bottom|text-bottom|procento • Horizontální zarovnání text-alignright|left|center|justify • Odstavcová zarážka text-indentdé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-widththin|medium|thick|délka padding margin

More Related