Kaskádové styly (CSS)

Kaskádové styly CSS (Cascading Style Sheets) umožňují měnit vzhled HTML stránek. Pomocí CSS je možné definovat rozložení prvků na stránce, okraje, barvy, písma a další vlastnosti. Webový prohlížeč zobrazí obsah webových stránek takovým způsobem, jakým je definován pomocí CSS. Čím lépe budete ovládat kaskádové styly, tím snadněji budete schopni ovlivnit vzhled webových stránek, tak aby vypadaly stylově a moderně.

Webový prohlížeč zobrazí obsah webových stránek takovým způsobem, jakým je definován pomocí CSS.

CSS představují pravidla, kterými říkáme:

Kde se mají použít – Selektor (identifikátor prvku)
- blok vlastností je uzavřen do složených závorek {}
Co mají ve výsledné stránce ovlivnit – Deklarace vlastnosti (definice stylu)
- vlastnost
- oddělovač :
- hodnota (více hodnot se od sebe odděluje mezerou např. 20px 10% 1.5rem 0, mezi hodnotou a jednotkou se mezera nepíše)
- ukončení definice ;

Připojení stylů

Vysoká priorita – přepíše všechny ostatní styly přiřazené témuž elementu jiným způsobem

</head>
<body>
  <h1 style="color: red;">Červený nadpis</h2>

Střední priorita – přepíše styly definované v externím souboru (případně styly připojené pravidlem @import)

  <style>
    h1 {color: red;}
  </style>
</head>
<body>

Nízká priorita

  <!-- Style -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

Nejnižší priorita – přepíší jej všechny později deklarované styly

Import CSS v interním souboru:

  <style>
    @import url("style.css");
    h1 {color: red;}
  </style>
</head>
<body>

Import CSS v externím souboru:

@import url("style.css");
h1 {color: red;}

Pravidlo @import má své opodstatnění v preprocesorech. V prostém CSS jej raději vůbec nepoužívejte!

Základní vlastnosti kaskádových stylů

Kaskádové styly určují, jak má být daný prvek (element) zobrazen na monitoru, papíře, vyjádřen ve zvukové podobě nebo na jiném výstupním médiu.

Box model

Vnější okraj

p {margin: 1em 0 .5em;}

Rámeček

h1 {border: 4px solid green;}

Vnitřní okraj

td {padding: 0.1em .3em 0;}

Šířka

header {width: 760px;}

Výška

footer {height: 100px;}

Font

Fonty dostupné na Internetu:

Google Fonts - jednoduchá aplikace zvoleného fontu
Font Squirrel - umožňuje aplikovat zvolený font písma nezávisle na fontech uživatelského operačního systému
Font Awesome - font obsahující ikony
- Free SVG ikony již obsahují licenci v SVG soubru

Typ písma

Proporcionální písmo – různé znaky mají různou šířku, která obsahuje prázdný prostor před a za písmenem
- Bezpatkové (rodina sans-serif)
- Patkové (rodina serif)
- Ozdobné písmo (rodina fantasy, cursive)
Neproporcionální písmo (rodina monospace) – všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu)

body,
table {
    font-family: 'Arial CE', Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Times New Roman CE', 'Times New Roman', serif;
}
pre,
code {
    font-family: 'Courier New CE', 'Courier New', monospace;
}

Velikost písma

h2 {font-size: 3rem;}

Výška řádku

p {line-height: 1.5;}

Tučnost písma

p {font-weight: normal;}
strong {font-weight: bold;}

Barva textu

body,
table {color: purple;}

Velikost mezer mezi slovy

h1 {word-spacing: 1rem;}

Velikost mezer mezi písmeny

h1 {letter-spacing: .3rem;}

Bílé znaky – white-space

Určuje způsob zacházení s mezerami, tabulátory a konci řádků.

normal – výchozí hodnota
nowrap – zakáže automatické zalamování řádků
pre – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu
pre-wrap – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu, ale je povoleno automatické zalamování řádků
pre-line – zobrazuje zlomy řádků tak, jako v kódu dokumentu

th {white-space: nowrap;}

Horizontální zarovnání obsahu

h1 {text-align: center;}
p {text-align: justify;}
cite {text-align: right;}

Vertikální zarovnání

Používá se pro vertikální zarovnání např. malého obrázku na vyšším řádku nebo v tabulkách.

.horni-index {vertical-align: super;}
.dolni-index {vertical-align: sub;}
.co-nejvyse {vertical-align: top;}
.s-hornim-okrajem-textu {vertical-align: text-top;}
.doprostred {vertical-align: middle;}
.s-dolnim-okrajem-textu {vertical-align: text-bottom;}
.co-nejnize {vertical-align: bottom;}

Odsazení prvního řádku

p {text-indent: 2em;}

Převod textu

.kapitalky {text-transform: capitalize;}
.mala {text-transform: lowercase;}
.velka {text-transform: uppercase;}

Sdružená definice písma

Umožňuje zkrácený zápis všech vlastností písma:

font-size
line-height
font-variant
font-weight
font-style
font-family

p {font: small-caps bold italic Arial 120%/1.5;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Pozadí

body {background: #cf3 url('pozadi.jpg') top left repeat-x;}

Pozice

Umístění každého elementu v rámci dokumentu může být statické (výchozí), relativní, absolutní nebo fixní. Umístění se vztahuje vždy k obsahovému bloku elementu.

Statické pozicování – static

Obsahovým blokem je nejbližší nadřazený blokový element.
Blok elementu je umístěn v rámci běžného toku dokumentu (dle zdrojového kódu).

Relativní pozicování – relative

Obsahovým blokem je nejbližší nadřazený blokový element.
Blok elementu je posunut z původního umístění jedním nebo více směry.
Původní prostor po elementu zůstane zachován.
Nová pozice elementu neovlivní pozici jiného elementu.

Absolutní pozicování – absolute

Obsahovým blokem je nejbližší nadřazený pozicovaný element v jiném než statickém umístění.
Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
V nové pozici blok nijak neovlivňuje jiné elementy.

Fixní pozicování – fixed

Obsahovým blokem je zobrazovací obslat prohlížeče (viewport).
Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
Blok zůstane v nové pozici i při posunu obsahu prohlížeče.

„Lepkavé“ pozicování – sticky

Element se při rolování dokáže „přilepit“ k okraji.
Když je sticky element uvnitř viewportu, chová se jako static/relative, tj. nijak se neprojevuje.
Po opuštění okna se chová jako absolute (zobrazení mimo přirozené umístění) a fixed (zafixování na jednom místě).
Nefunguje v IE 11.

.sticky {
    position: sticky;
    top: 0;
    }

Animace

Ukázky:

Výuka:

CSS3 animations

Rozvržení stránky – Grid

Dokumentace:

Výukové hry CSS Grid Learning Game:

Grid Garden 👏

Rozvržení komponent – Flex

Dokumentace:

A Complete Guide to Flexbox ✅

Výukové hry CSS Flex Learning Game:

Selektory

Selektory určují prvky, pro které má definice platit.

Univerzální selektor

Vybírá libovolný element (všechny elementy v dané hierarchii).

Příklad CSS:

* {
    color: blue;
}

Typový selektor

Vybírá element podle typu.

Část zdrojového kódu:

<p>text odstavece</p>

Příklad CSS:

p {
    color: blue;
}

Selektor třídy

Vybere element označený definovanou třídou.

Část zdrojového kódu:

<p class="odstavec">text odstavece</p>
<p class="poznamka">text poznámky</p>
<div class="poznamka">text poznámky</div>

Příklad CSS:

.odstavec {
    color: blue;
}
.poznamka {
    color: red;
}
div.poznamka {
    border: 1px solid red;
    padding: 2px;
}

Na stránce může být libovolné množství prvků se stejnou třídou.

Selektor pseudo-třídy

Odkazy a kotvy

Výběr typu odkazu nebo cíle kotvy.

:any-link (odkaz): Představuje libovolný prvek obsahující atribut href (a, area, link).

Příklad použití CSS na všechny nenavštívené odkazy:

a:link {
    color: #039;
}

Příklad použití CSS na všechny navštívené odkazy:

a:visited {
    color: #930;
}

:target (cíl kotvy): Používá k cílení na prvek, který je aktuálně zobrazen v URL pomocí kotvícího odkazu (#).

Uživatelské akce

Výběr prvku podle jeho stavu vyvolaným uživatelem.

Příklad použití dynamického CSS aktivovaného ve chvíli, kdy uživatel na odkaz najede kurzorem myši (:hover používejte až za :link a :visited):

a:hover {
    color: #f30;
    text-decoration: underline;
}

Příklad použití dynamického CSS na prvek, který je připraven pro příjem vstupu ze vstupního zařízeni (aktivace prvku) např. na který je právě kliknuto myší, stisknuta klávesa Enter nebo mezerník (:active používejte až za :link, :visited a :hover):

a:active {
    color: #f30;
    text-decoration: underline;
}

Příklad použití dynamického CSS při výběru odkazu, tlačítka, výběrovného seznamu a dalších formulářových prvnků uživatelem např. pomocí klávesnice (zaměření prvku):

a:focus {background: yellow;}
a:focus:hover {background: white;}

:focus-visible (indikované zaměření): Tento pseudostav je podobný :focus, ale aplikuje se pouze v případech, kdy je focus viditelný pro uživatele (tj. uživatel nemá nastaveno, aby se focus nezobrazoval).
:focus-within (zaměření na rodiče): Tato pseudotřída se aplikuje na rodiče, pokud alespoň jeden z jeho potomků má :focus.

Uživatelský vstup

Umožňuje vybrat formulářové prvky podle nastaveného očekávání uživatelského vstupu:

:enabled povolený prvek
:disabled zakázaný prvek
:read-write možnost zápisu
:read-only nemožnost zápisu
:placeholder-shown zobrazený zástupný text
:autofill poutití automatického vyplnění
:default výchozí prvek
:checked zvolená/vybraná hodnota
:valid platnost zadání
:invalid neplatnost zadání
:required povinnost zadání
:optional volitelnost zadání

Pořadí potomků

Vyběr prvku podle jeho pořadí v sadě prvků (libovolných nebo stejného typu).

První potomek (podřízený prvek) jiného prvku:

p:first-child {text-indent: 2em;}
p:first-child em {font-weight: bold;}

První, druhá, předposlední a poslední buňka tabulky:

td:first-child {width: 20%;}
td:nth-child(2) {width: 60%;}
td:nth-last-child(2) {width: 40%;}
td:last-child {width: 20%;}

Každý třetí řádek (counter): (3n) – pozor počátek je nula, proto je posun (offset) nastaven na jedničku (+1):

tr:nth-child(3n+1) {
    background-color: #eee;
}

Další selektory pořadí:

:nth-last-child() n-tý prvek od konce
:last-child poslední potomek
:only-child jediný potomek
:fist-of-type prvni potomek typu
:nth-of-type() n-tý prvek stejného typu
:nth-last-of-type() n-tý prvek stejného typu od konce
:last-of-type poslední potomek typu
:only-of-type jedniný potomek typu

Kombinace

Umožňují zjednodušení selektorů a snížení specificity:

:is() výběr libovolného prvku
:where() nulová specificita
:not() negace
:has() vztah

Ostatní

Příklad různého nastavení dvojice uvozovek pro celý dokument a atribut prvku <cite> v jazyce čeština a angličtina:

:lang(cs) {quotes: '„' '“' "‚" "‘"}
:lang(en) {quotes: '“' '”' "‘" "’"}

cite[lang="cs"] {quotes: '„' '“' "‚" "‘"}
cite[lang="en"] {quotes: '“' '”' "‘" "’"}

Další nezařazené selektory:

:dir() směr
:fullscreen celá obrazovka
:modal modální stav
:root kořenový prvek
:empty prázdný prvek

Selektor pseudo-elementu

CSS3 od sebe označením odlišuje pseudo-třídy, které používají jednu dvojtečku :a pseudo-elementy u kterých se používá "dvojitá dvojtečka" ::(v CSS2 se u všech pseudo prvků používá dvojtečka jednoduchá).

Od IE9+ je již plná podpora CSS3 pseudo prvků.

Příklad prvního řádku odstavce:

p:first-line {text-transform: uppercase;}

Příklad použití CSS na první písmeno odstavce:

p:first-letter {
    font-size: 300%;
    font-weight: bold;
    float: left;
    margin-right: .1em;
}

Vlastnost content

Vlastnost content umožňuje vkládat textový obsah a je možné ji používat ve spojení s pseudo-elementy :before a :after. Vlastnost content není možné aplikovat na „neobsahové“ elementy jako je např. <input>, <select>, <img> atd.

Příklad uvozovek definovaných na úrovni odstavce a zároveň kolem něj vložených „prázdných“ uvozovek:

p {quotes: '„' '“' "‚" "‘"}
p:before {content: no-open-quote}
p:after {content: no-close-quote}
cite:before {content: open-quote}
cite:after {content: close-quote}

Příklad přidání nového obsahu "mezery a šipky" za prvek třídy .slideshow-next:

.slideshow-next {
    position: reletive
}
.slideshow-next:after {
    content: ' >';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url('design.png') no-repeat -100px 6px;
}

Selektor identifikátoru

Vybere element označený definovaným identifikátorem.

Část zdrojového kódu:

<div id="zahlavi">Záhlaví</div>

Příklad CSS:

#zahlavi {
    color: green;
}

V jednom dokumentu (stránce) je možné id přiřadit pouze jedinému prvku.

Selektor následníka

Vybere element následníka, jež je vnořen do elementu předka bez ohledu na hloubku vnoření.

Část zdrojového kódu:

<div>
    <img src="logo.gif" alt="Logo">
    <p>Podrobnosti viz <a href="#">statistika přístupnosti
        <img src="stat.gif" alt="Statistika"></a>.
    </p>
</div>

Příklad CSS:

div img {
    border: none;
}

Selektor potomka

Vybere element potomka, jež je vnořen přímo do elementu rodiče.

Část zdrojového kódu:

<div>
    <img src="logo.gif" alt="Logo">
    <p>Podrobnosti viz <a href="#">statistika přístupnosti
        <img src="stat.gif" alt="Statistika" /></a>.
    </p>
</div>

Příklad CSS:

div > img {
    border: none;
}

Poznámky:

mezera mezi elementy a ostrou závorkou je nepovinná

Selektor obecného sourozence

Vybere druhý definovaný element, který je sourozencem prvně definovaného elementu. Oba sourozenci musí mít stejného rodiče, musí ležet na stejné úrovni v hierarchii dokumentu, ale nemusí ležet bezprostředně za sebou.

Část zdrojového kódu:

<body>
    <h1>Nadpis</h1>
    <p>První odstavec</p>
    <p>Druhý odstavec</p>
    <h2>Nadpis 2. úrovně</h2>
    <p>Druhý odstavec</p>
    <p>Druhý odstavec</p>
    <h3>Nadpis 3. úrovně</h3>
    <p>Druhý odstavec</p>
    <p>Druhý odstavec</p>
</body>

Příklad CSS:

h2 ~ p {
    color: blue;
}

V tomto příkladě se deklarovaná vlastnost odstavce nepoužije dříve, než u nadpisu 2. úrovně.

Poznámky:

mezera mezi elementy a znakem tilda je nepovinná

Selektor sousedícího sourozence

Část zdrojového kódu:

<body>
    <h1>Nadpis</h1>
    <p>První odstavec</p>
    <p>Druhý odstavec</p>
    <h2>Nadpis 2. úrovně</h2>
    <p>Druhý odstavec</p>
    <p>Druhý odstavec</p>
    <h3>Nadpis 3. úrovně</h3>
    <p>Druhý odstavec</p>
    <p>Druhý odstavec</p>
</body>

Příklad CSS:

h2 + p {
    color: blue;
}

Poznámky:

mezera mezi elementy a znakem plus je nepovinná

Selektory atributů (parametrů)

Vybere element, obsahující definovaný atribut, hodnotu atributu, nebo jeho část.

Příklad použití CSS pouze na elementy aobsahující atribut titles hodnotou odkaz:

a[title="odkaz"] {
    color: blue;
}

Příklad použití CSS pouze na elementy spanobsahující atribut lang, jehož hodnoty začínají řetězcem en(en-us, en-uk):

span[lang^="en"] {
    color: blue;
}

Příklad použití CSS pouze na elementy pobsahující atribut class, jehož hodnota obsahuje řetězec nadpis(nadpis1, nadpis2, ale i podnadpis):

p[class*="nadpis"] {
    color: blue;
}

Příklad použití CSS pouze na elementy pobsahující atribut class, jehož hodnota končí řetězcem pis(nadpis, podnadpis):

p[class$="pis"] {
    color: blue;
}

Priority CSS

Při definování stylů může dojít k situaci, kdy jeden element může mít definovanou vlastnost různými způsoby, nebo na více místech. V tomto případě je třeba rozhodnout, kterou deklaraci, styl nebo zdroj stylů použít.

Priority definic:

Kaskáda
Dědičnost
Vypočítaná hodnota
Výchozí hodnota

Kaskáda

Při existenci více zdrojů stylů stejné důležitosti rozhoduje o tom který styl se použije kaskáda.

Atribut style ve zdrojovém kódu (nejsilnější)
```
<p style="color: blue;">
```

Styl v hlavičce dokumentu

    ...
  <style type="text/css">
    <!--
      p {color: blue;}
    -->
  </style>
</head>
<body>
    ...

Externí styl

    ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    ...

Pravidlo @import
Uživatelský styl definovaný v nastavení webového prohlížeče
Výchozí styl webového prohlížeče (nejslabší)

Specifičnost selektoru

Určuje váhu selektoru. Selektor s vyšší váhou (silnější) přepíše deklarace stejných vlastností u selektoru s nižší váhou (slabší).

Specifičnost: 1000 (nejsilnější)
- atribut style ve zdrojovém kódu <p style="color: blue;">
Specifičnost: 0100
- identifikátor #header {color: blue;} /* zahlavi */

Specifičnost: 0010

třída, pseudotřída nebo selektor atributu (parametru)

.note {font-size: 80%;} /* poznamka */
a:hover {text-decoration: underline;}
a[href]:after {content: " [" attr(href) "] ";}

Specifičnost: 0001

typový selektor nebo pseudoelement

p {color: blue;}
p::first-letter {font-weight: bold; font-size: 130%;}

Specifičnost: 0000 (nejslabší)
- univerzální selektor nebo jeho kombinace * {color: blue;}

Jednotlivé úrovně specifičnosti se sčítají a vyhrává ten nejsilnější.

Příklad výpočtu:

Selektor #header ul li.note p::first-letter a:hover {color: red;} má specifičnost: 0125.

Pořadí selektoru

V případě shody pravidel vyhrává to, které je uvedeno později.

Pravidlo !important

Umožňuje upřednostnit deklaraci v případě konfliktu s jinými deklaracemi bez tohoto pravidla.

V případě střetu pravidla !important v uživatelské šabloně a pravidla !important ve stylu dokumentu, vyhraje uživatelská šablona.

a {
    text-decoration: underline; !important 
}

Jedná se o poslední možné řešení, běžné CSS se bez tohoto pravidla většinou obejdou.

Dědičnost

Elementy jsou v dokumentu uspořádány ve stromové struktuře. Elementy mohou dědit hodnoty vlastností od svého nadřazeného elementu a to i po více generací. V (X)HTML je nejvyšší element html, do něj jsou vnořeny elementy head a body, do body je vnořen element h1 atd. Jedná se o pojmy následník a předchůdce. V případě přímého příbuzenství o pojmy rodič a potomek.

V CSS má každá vlastnost určeno, zda je dědičná nebo ne. U vnořeného elementu je možné zdědění vlastnosti vynutit hodnotou inherit.

Příklad:

body {
    color: teal; /* vlastnost je dedicna */
    border: 5px solid silver; /* vlastnost neni dedicna */
}
h1 {
    border: inherit; /* vynuceni dedicnosti */
}

Vypočítaná hodnota

U relativních jednotek (em, rem, % atd.) a klíčových slov (large, small atd.) je třeba vypočítat jejich skutečnou hodnotu. Skutečné hodnoty se ještě dále upravují podle možností výstupních zařízení (násobky bodu obrazovky, barevné spektrum, možnosti tiskárny atd.).

Výchozí hodnota

Každá vlastnost má CSS specifikací určenu výchozí hodnotu, která se použije v případě, pokud není stanoveno jinak. U některých vlastností může výchozí hodnotu upřesnit prohlížeč.

Souhrn

Vím k čemu se používá technologie CSS.
Umím se orientovat ve zdrojovém kódu kaskádových stylů.
Znám základní selektory a vlastnosti kaskádových stylů, které umožňuji definovat vzhled webové stránky.
Seznámil/a jsem se s pojmy kaskáda, dědičnost, vypočítaná a výchozí hodnota.

Kaskádové styly (CSS)

Připojení stylů

Atributem style

Elementem <style>

Elementem <link>

Pravidlem @import

Základní vlastnosti kaskádových stylů

Box model

Font

Typ písma

Velikost písma

Výška řádku

Tučnost písma

Barva textu

Velikost mezer mezi slovy

Velikost mezer mezi písmeny

Bílé znaky – white-space

Horizontální zarovnání obsahu

Vertikální zarovnání

Odsazení prvního řádku

Převod textu

Sdružená definice písma

Pozadí

Pozice

Animace

Rozvržení stránky – Grid

Rozvržení komponent – Flex

Selektory

Univerzální selektor

Typový selektor

Selektor třídy

Selektor pseudo-třídy

Odkazy a kotvy

Uživatelské akce

Uživatelský vstup

Pořadí potomků

Kombinace

Ostatní

Selektor pseudo-elementu

Vlastnost content

Selektor identifikátoru

Selektor následníka

Selektor potomka

Selektor obecného sourozence

Selektor sousedícího sourozence

Selektory atributů (parametrů)

Priority CSS

Kaskáda

Specifičnost selektoru

Pořadí selektoru

Pravidlo !important

Dědičnost

Vypočítaná hodnota

Výchozí hodnota

Souhrn