Ú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="..." 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

    • https://caniuse.com/#cats=CSS

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:

<!DOCTYPE HTML>
<html>
<head>
<title>Pokusná stránka se stylem</title></head>
<body>
<p>Tento jediný odstavec bude žlutý a zarovnaný vpravo.</p>
</body>
</html>

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>Title</h1> <p>Text1</p> <div> <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

SELEKTOR TYPU

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

  • příklady:

    p { ... }

    h1 { ... }

SELEKTOR POTOMKŮ

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

  • příklady:
    div ul { ... }
    ul li { ... }
    h1 em { ... }
    div ol li { ... }

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

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

  • v HTML je atribut id dostupný na skoro všech elementech
    <h1 >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 { ... }

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] { ... }

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ě)
    :first-child
        vybere element, pokud je to první díte svého rodiče

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 

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

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Í


Zdroj: https://www.kosek.cz/vyuka/4iz268/prednasky/css/#/1

Vytvořte si webové stránky zdarma! Tento web je vytvořený pomocí Webnode. Vytvořte si vlastní stránky zdarma ještě dnes! Vytvořit stránky