Kaskádové styly

4IZ268 – Webové technologie

Jirka Kosek

Poslední modifikace: 2020-10-07 13:04:11 UTC

Copyright © 2000–2020 Jiří Kosek

Úvod

Důvody vzniku CSS

  • zákazníci chtějí, aby webové stránky vypadly stejně jako tištěný katalog

    • přesné druhy písma

    • přesné barvy

    • přesné zarovnání a formátování jednotlivých částí stránky

  • weboví designeři zákazníkům vyhoví

    • stránky plné tagů <font color="..." face="..." size="...">

    • složité, mnohdy vzájemně vnořené tabulky pro dosažení požadovaného efektu

    • mnoho částí stránky tvoří obrázky – umožňují věrně reprodukovat fonty a formátování

    • v horším případě je celá stránka jeden obrázek, případně jeden rozřezaný obrázek

Problémy s rádoby graficky dokonalými stránkami

  • zbytečně dlouhý HTML kód, mnoho obrázku → dlouho se přenáší

  • schopnosti prohlížečů se využívají až nadoraz – v jednom prohlížeči stránky vypadají dobře a v tom druhém dost špatně

  • při použití jiného rozlišení, než ve kterém jsou stránky navrženy, to také nedopadne moc dobře

  • změny v designu stránek jsou velice obtížné, protože je potřeba nahradit mnoho výskytů tagů a atributů ovlivňujících formátování

Řešení problému = CSS

  • CSS (Cascading Style Sheets) – kaskádové styly

  • CSS umožňují oddělit vzhled a obsah stránky

  • vzhled jednotlivých elementů je úsporně definován odděleně od HTML kódu

  • jeden styl může být sdílen více stránkami

    • jednotný vzhled

    • rychlé změny designu

Jednoduchý styl v CSS

  • kaskádový styl se skládá z pravidel

    h1 { color: blue }

  • selektor (h1) určuje pro jaké elementy se pravidlo použije

  • deklarace (color: blue) říká, jaké vlastnosti se mají na vybrané elementy aplikovat

Trocha historie

začátek 90. let

první prohlížeče, vzhled HTML si může definovat uživatel pomocí jednoduchého stylu

polovina 90. let

spor: má si styl určovat autor nebo uživatel? – dočasně vítězí autor stránek

1996

specifikace CSS1

1998

specifikace CSS2

2011

specifikace CSS2.1

většina prohlížečů umožňuje uživatelské předefinování vzhledu stránky kvůli přístupnosti

CSS3 a současný stav

  • CSS3 jesada velkého množství relativně nezávislých modulů, které prohlížeče postupně implementují

  • současné prohlížeče umí CSS2.1 a některé věci z CSS3

  • informace o aktuální podpoře v prohlížečích

Připojení stylu ke stránce

Připojení stylu z externího souboru

Tento případ je nejvyužívanější, protože umožňuje využití jednoho stylu několika stránkami. Styl se k dokumentu připojuje pomocí elementu link, který můžeme použít v záhlaví stránky. 

<!DOCTYPE HTML>
<html>
  <head>
    <title>Pokusná stránka se stylem</title>
    <link href="styl.css" rel="stylesheet">
  </head>
  <body>
  ...
  </body>
</html>

Styl pro celou stránku zapsaný přímo v HTML dokumentu

Tento způsob využijeme v případech, kdy chceme definovat vzhled jen jedné stránky a neplánujeme použití stylu na dalších stránkách.

Styl se vkládá do záhlaví dokumentu do elementu style. Pomocí atributu type můžeme určit typ používaného stylového jazyka, pokud jej neuvedeme, předpokládá se CSS. 

<!DOCTYPE HTML>
<html>
  <head>
    <title>Pokusná stránka se stylem</title>
    <style>
        h1 { color: blue; text-align: center }
        h2 { color: red }
        p  { text-align: justify }
    </style>
  </head>
  <body>
  ...
  </body>
</html>

Specifikace stylu přímo u elementu

Poslední možnost definice stylu již trošku odporuje samotné filosofii stylů, která se snaží oddělit definici vzhledu od samotného obsahu dokumentu. U každého elementu můžeme použít atribut style a v něm přímo uvést deklaraci stylu. Příklad: 

...
<p style="color: yellow; text-align: right">Tento jediný
odstavec bude žlutý a zarovnaný vpravo.</p>
...

Alternativní styly

  • ke stránce může být připojeno více stylů najednou

  • uživatel mezi nimi může přepínat

  • <link href="always.css" type="text/css" rel="stylesheet">
<link title="Blue design" href="bluetitle.css" type="text/css" rel="stylesheet">
<link title="Blue design" href="bluepara.css" type="text/css" rel="stylesheet">
<link title="Aligned design" href="alignedtitle.css" type="text/css" rel="alternate stylesheet">
<link title="Aligned design" href="alignedpara.css" type="text/css" rel="alternate stylesheet">
<link title="Null design" href="null.css" type="text/css" rel="alternate stylesheet">

  • většina prohlížečů nenabízí možnost přepnutí stylů a ani si změnu stylu nepamatuje při přechodu mezi stránkami, musí se tak řešit přes JavaScript

  • podobný přístup se však používá pro připojení tiskového stylu nebo pro výběr stylu pro specifická zařízení/rozlišení (media queries)

Selektory

Strom dokumentu

  • selektory vybírají části stromu dokumentu

  • každému elementu odpovídá uzel ve stromu dokumentu

Příklad 1. Dokument a jeho strom
<!DOCTYPE HTML>
<html>
  <head>
    <title>Sample title</title>
  </head>
  <body>
    <h1 id="chapter1">Title</h1>
    <p>Text1</p>
    <div class="content">
      <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>
          Item3
          <ul type="circle">
            <li>Nested item1</li>
            <li>Nested item2</li>
          </ul>
        </li>
      </ul>
      <p>Text2</p>
    </div>
    <p>Text3</p>
  </body>
</html>

Univerzální selektor

  • *

  • vybere všechny elementy v dokumentu

Obrázek 1. Elementy vybrané pomocí *

Selektor typu

  • vybere element na základě jeho typu (jména)

  • příklady:

    p { … }
h1 { … }

Selektor typu

Obrázek 2. Elementy vybrané pomocí p

Selektor potomků

  • vybere element jen když je potomkem určitého elementu

  • příklady:

    ul li { … }
h1 em { … }
div ol li { … }

Selektor potomků

Obrázek 3. Elementy vybrané pomocí div ul

Selektor dětí

  • vybere element jen když je dítětem určitého elementu

  • příklady:

    ul > li { … }
h1 > em { … }

  • dítě je ve stromu právě o jednu úroveň níž

  • potomek může být libovolně hluboko

Selektor dětí

Obrázek 4. Elementy vybrané pomocí div > ul

Selektor sousedících sourozenců

  • vybere element pouze pokud se vyskytuje bezprostředně za jiným elementem

  • oba elementy musí mít stejného rodiče

  • příklady:

    table + p { … }
h1 + p { … }

Selektor sousedících sourozenců

Obrázek 5. Elementy vybrané pomocí h1 + p

Selektor třídy

  • vybere elementy, které mají nastavenu určitou třídu pomocí atributu class

    <div class="content">…</div>

  • atribut class může obsahovat mezerami oddělený seznam tříd

  • příklady:

    .content { … }
div.content { … }

Selektor třídy

Obrázek 6. Elementy vybrané pomocí .content

Selektor ID

  • vybere elementy, které mají v atributu typu ID určitou hodnotu

  • v HTML je atribut id dostupný na skoro všech elementech 

    <h1 id="chapter1">Kapitola 1. Úvod</h1>

  • hodnota ID musí být v celém dokumentu jedinečná

  • selektor se používá pro ošetření výjimek v dokumentu

  • příklady:

    #chapter1 { … }
div#chapter1 { … }

Selektor ID

Obrázek 7. Elementy vybrané pomocí #chapter1

Atributový selektor

  • vybere elementy na základě přítomnosti atributu nebo určité hodnoty uvnitř atributu

  • [foo]

    vybere elementy, které mají atribut foo

    [foo="bar"]

    vybere elementy, které mají v atributu foo hodnotu bar

    [foo~="bar"]

    vybere elementy, které mají atribut foo, v němž je seznam hodnot oddělených mezerou a jednou z těchto hodnot je i bar

    [foo|="bar"]

    vybere elementy, které mají atribut foo, v němž je seznam hodnot oddělených pomlčkou a první z těchto hodnot je bar

  • příklady:

    ul[type="circle"] { … }
[type="circle"] { … }
*[type="circle"] { … }
h1[align] { … }

Atributový selektor

Obrázek 8. Elementy vybrané pomocí ul[type="circle"]

Pseudotřídy I.

  • výběr nezáleží na pozici elementu ve stromu dokumentu, ale na stavu prohlížeče a interakci s uživatelem

  • :link

    vybere odkazy, které ještě nebyly navštívené

    :visited

    vybere již navštívené odkazy

    :hover

    vybere element, který je pod kurzorem myši

    :active

    vybere element, který je aktivovaný uživatelem

    :focus

    vybere element, který má fokus (přijímá vstup z klávesnice)

    :lang(cs)

    vybere elementy v určitém jazyce (v tomto případě v češtině)

Pseudotřídy II.

:first-child

vybere element, pokud je to první díte svého rodiče

Obrázek 9. Elementy vybrané pomocí li:first-child

Pseudoelementy

  • vybírají „virtuální“ elementy, které nejsou součástí stromu dokumentu

  • :first-line

    Vybere první řádku elementu, který je formátován jako odstavec

    :first-letter

    Vybere první písmeno elementu

Další selektory podporované v CSS3

:root

kořenový element

:nth-child(n), :nth–last-child(n)

n-tý podlement

:nth-of-type(n), :nth–last-of-type(n)

n-tý podlement daného typu

:first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked

podrobnější vysvětlení ve specifikaci Selectors Level 3

Další využití selektorů

  • dotazovací jazyk v javascriptových frameworcích (např. jQuery) 

    $("ol > li").addClass("blue");

  • kvůli oblíbenosti bylo nakonec vytvořeno standardní javascriptové rozhraní Selectors API

    var tableRows = document.querySelectorAll("tr");

  • užitečná pomůcka ve vývojářských nástrojích

    $$("li a")

Vlastnosti

Dědění vlastností

Snadnost a intuitivnost použití kaskádových stylů je do velké míry dána děděním vlastností. Pokud nějakou vlastnost u elementu nastavíme a tento element obsahuje další elementy, automaticky tyto elementy dědí vlastnosti rodičovského elementu. Tímto způsobem je ve většině případů dosaženo nejlepšího výsledku bez nutnosti tvorby složitých selektorů.

Příklad 2. Dědění vlastnosti
h1 { color: blue }

<h1>Tohle je modré <em>a tohle kupodivu taky</em> - 
barva se dědí</h1>

U některých vlastností není dědění vhodné a proto se tyto vlastnosti nedědí.

Kaskáda – skládání vlastností

  • pro některé vlastnosti může být ve stylu/stylech určeno několik konfliktních hodnot

  • kaskáda určuje, která deklarace má nejvyšší váhu

  • primárně se priorita určuje podle:

    1. uživatelova stylu s příznakem important

    2. autorova stylu s příznakem important

    3. autorova normálního stylu

    4. uživatelova normálního stylu

    5. výchozího stylu prohlížeče

  • pokud to nestačí, nejvyšší prioritu mají

    • inline deklarace stylu (atribut style)

    • pak deklarace se selektorem ID

    • pak deklarace s atributovým selektorem a pseudotřídami

    • a nakonec deklarace se selektorem typu nebo pseudoelementy

  • pokud to pořád nestačí, použije se pozdější deklarace

Základní vlastnosti

Písmo

  • rodina písma

  • styl písma – normální, kurzíva, skloněné

  • varianta písma – normální a kapitálky

  • duktus písma (síla tahu)

  • velikost

Příklad 3. Nastavení písma
blockquote { font-weigth: bold;
             font-style: italic;
             font-size: 12pt;
             line-height: 14pt;
             font-family: "Times Roman", serif }

Obecné rodiny písma

Jednotlivé OS používají různá písma → CSS pak nemusí být přenositelné

Řešení obecné rodiny písma, které se použijí, když se nenajde konkrétní font:

  • serif – patkové písmo

  • sans-serif – bezpatkové písmo

  • cursive – ozdobná kurzíva

  • fantasy – ozdobné písmo

  • monospace – neproporcionální písmo

Barvy, pozadí

  • barva textu

  • barva pozadí

  • obrázek na pozadí

    • opakování

    • souřadnice umístění

    • způsob rolování při posunu v okně

Formátování textu

  • způsob zarovnání – doleva, doprava, centrování, do bloku

  • řádkování

  • vertikální zarovnání objektů na řádce

  • velikost odstavcové zarážky – odsazení první řádky odstavce

Formátovací model

  • u všech vnějších a vnitřních okrajů a u rámečku lze nastavit přesné rozměry

  • zda se rámeček a padding započítává do rozměrů boxu lze ovlivnit pomocí vlastnosti box-sizing

  • u rámečku navíc barvu a tvar

  • způsob zobrazení elementu – block, inline, list-item, none

  • další možnosti – plovoucí elementy, výška, šířka, zachování mezer a konců řádek, vzhled seznamů apod.

Další zdroje informací

Povinná četba

Další zdroje informací