Tvorba internetových aplikací

Jakub Klinkovský

:: České vysoké učení technické v Praze
:: Fakulta jaderná a fyzikálně inženýrská
:: Katedra softwarového inženýrství

Kaskádové styly

Cascading Style Sheets (CSS)

Motivace

• Jazyk HTML je vhodný pro popis struktury dokumentu – není určen pro popis vzhledu (i když historicky to neplatilo vždy).
• Snaha oddělit prezentaci (vzhled) od struktury webových stránek – vznik CSS.

Proč používat oddělenou definici vzledu (CSS):

• přehlednější správa obsahu webu – kratší a jednodušší kód,
• snadná změna vzhledu (úprava CSS, nikoli přepisování samotného dokumentu).

Další výhody přináší definice CSS v externím souboru:

• jednotný vzhled stránek celého webu (sdílení CSS souborů pro všechny stránky),
• možnost snadné změny vzhledu a rozložení všech stránek webu – stačí upravit definici vzhledu na jednom místě.

Historie CSS v kostce

CSS1 (CSS level 1) – 1996-2018 – spolu s HTML 4.0 (již nepodporováno)

CSS2 (CSS level 2) – specifikace 1998

• CSS 2.1 (CSS level 2 revision 1) – specifikace 2011
• CSS 2.2 (CSS level 2 revision 2) – neoficiální Working Draft z 2016

CSS3 (CSS level 3) – vývoj od 1999, rozdělení do modulů rozšiřujících CSS2

• základem jsou CSS 2.1 (resp. CSS 2.2) a CSS style attributes (2013)
• např. hotové moduly (s odkazem na specifikaci):
  • CSS Color Level 3 (2018)
  • Selectors Level 3 (2018)
  • CSS Namespaces Level 3 (2011)
  • Media Queries Level 3 (2012)

CSS aktuálně

• CSS3, CSS4 atd. jsou „lidové“ pojmy, v praxi je vše „CSS bez čísla“
• některé moduly mají čísla, např. CSS Color Level 5
• podporu pro novější prvky CSS v prohlížečích je nutné ověřovat samostatně, např. pomocí https://caniuse.com/
  (případně referenční příručky W3Schools a MDN Web Docs obsahují sekce „Browser support“ resp. „Browser compatibility“ pro každou vlastnost CSS)
• CSS lze použít pro různé značkovací jazyky: HTML, XML, SVG, MathML3
• lze považovat za Turingovsky úplný jazyk

Syntaxe CSS

Definice stylů neboli jednotlivá pravidla CSS obsahují vždy dvě části: selektor a seznam deklarací vzhledu uvnitř složených závorek:

selektor {
  deklarace1;
  deklarace2;
}

• deklarace jsou ukončeny středníkem (pouze za poslední deklarací být nemusí)
• každá deklarace se skládá z dvojice vlastnost : hodnota (property : value)
• za dvojicí vlastnost : hodnota může následovat ještě !important (viz dále)
• komentáře se zapisují mezi tokeny /* a */: např. /* komentář */
• na umístění bílých znaků (mezera, konec řádku, atd.) nezáleží
  (pozor: mezera se používá pro kombinaci selektorů a hodnot pro určité vlastnosti)

Jednoduché příklady CSS

Pravidlo s jednou deklarací (pro značku p – odstavec):

p {
  text-align: center;
}

Pravidlo se dvěma deklaracemi (pro značku h1 – nadpis 1. úrovně):

h1 {
  font-size: 120%;
  color: blue;
}

Deklarace

Při deklaraci stylu lze použít kteroukoli z povolených vlastností (a jejich hodnot) v závislosti na druhu elementu (vybraného selektorem).

Povolené vlastnosti a hodnoty

• závisí na daném elementu – bohužel se o nich nedá říct mnoho obecně...
  • každý element má svou množinu povolených vlastností
  • každá vlastnost má svou množinu povolených hodnot
• lze použít „našeptávač“ v prohlížeči
• referenční příručky: např. W3Schools, MDN Web Docs

„Obecné“ hodnoty – číselné veličiny

U mnoha vlastností lze využít číselnou hodnotu s odpovídající jednotkou (např. %, px, em, ex, in, cm, mm; s, ms; Hz, deg, ...). Čísla mohou být celá nebo desetinná (s desetinnou tečkou), s nebo bez znaménka.

Pozor: mezi číslem a jednotkou nesmí být mezera!

Procentuální hodnoty (percentage)

Pozor: vždy se vztahují k jiné referenční hodnotě, podle které se vypočte skutečná velikost ⇒ uvědomte si, vzhledem k jaké hodnotě procenta zadáváte!

Příklad: výška řádku (line-height) se vztahuje k velikosti písma (font-size), takže při deklaraci line-height: 120% a velikosti písma 10px (pixelů) bude výška řádku 12px.

„Obecné“ hodnoty – rodiny písma

Obecné rodiny písma (generic font families) pro vlastnost font-family: vždy bychom kromě konkrétních rodin měli uvádět i jednu z pěti obecných rodin pro případ, že prohlížeč nebude mít k dispozici žádný z uvedených fontů. Fonty uvedené dříve mají přednost, tj. obecnou rodinu písma píšeme za konkrétní rodinu.

Ukázky: CSS Web Safe Fonts nebo CSS: fonts

„Obecné“ hodnoty – velikosti písma I

Absolutní velikost (absolute size) pro vlastnost font-size:

„Obecné“ hodnoty – velikosti písma II

Relativní velikost (relative size) pro vlastnost font-size:

Příklad: má-li rodičovský element velikost large a dítěti nastavíme smaller, pak dítě bude mít velikost medium.

Barvy I

Barvy (u vlastností obsahujících slovo color) se v CSS zadávají nejčastěji:

• pomocí jména – viz další slide pro 16 základních barev, další viz MDN Web Docs
• pomocí RGB zápisu (směs červené, zelené a modré)

Barvy II

Jména 16 základních barev:

Selektory

Selektor (selector) zajišťuje vazbu na odpovídající element jazyka HTML (v podstatě určuje, na jaké elementy webové stránky se deklarované vlastnosti budou aplikovat). Selektory lze různě spojovat (viz slide Spojování selektorů).

Základní selektory:

1. univerzální selektor: *
2. typový selektor: E, kde E je jméno libovolné značky
3. třídní selektor: .T, kde T je jméno nějaké třídy (hodnota atributu class v HTML)
4. ID selektor: #I, kde I je nějaké ID použité v dokumentu (hodnota atributu id)
5. atributový selektor: [A], [A⊗hodnota], [A⊗hodnota i], [A⊗hodnota s],
   kde A je jméno atributu, ⊗ je nějaký operátor a hodnota je nějaká hodnota

Univerzální selektor

• syntaxe: * (v jednoduchých případech lze vynechat, viz dále)
• vztahuje se na všechny elementy

Příklad: nastavení červené barvy písma na celé stránce

* {
  color: red;
}

Typový selektor

• syntaxe: E, kde E je jméno libovolné značky
• např. selektor h3 ovlivní vzhled všech značek h3 (všechny nadpisy úrovně 3)
• toto je nejčastěji používaný typ selektoru

Příklad: nastavení červené barvy písma pro všechny nadpisy úrovně 1

h1 {
  color: red;
}

Třídní selektor

• syntaxe: .T, kde T je jméno nějaké třídy
• vztahuje se na značky s danou hodnotou atributu class
• používá se, když chceme daný typ elementu zobrazit v různých výskytech rozdílně

Příklad: nastavení červené barvy písma pro elementy ve třídě warning

.warning { color: red; }

Příklad dokumentu:

<p class="warning">Lorem ipsum dolor sit amet, ...</p>

Poznámka: kombinace s typovým selektorem: např. p.warning

ID selektor

• syntaxe: #I, kde I je nějaké unikátní ID použité v dokumentu
• stylovat jediný element má smysl pouze v případě, že se jedná o nějakou výjimku (jinak se připravujeme o možnost snadné editace vzhledu webové stránky)

Příklad: nastavení červené barvy písma pro element s ID lorem-ipsum

#lorem-ipsum { color: red; }

Příklad dokumentu:

<p id="lorem-ipsum">Lorem ipsum dolor sit amet, ...</p>

Poznámka: kombinace s typovým selektorem (např. section#lorem-ipsum) má smysl při sdílení CSS pro více dokumentů

Atributový selektor

• syntaxe: [A], [A⊗hodnota], [A⊗hodnota i], [A⊗hodnota s],
  kde A je jméno atributu, ⊗ je nějaký operátor a hodnota je nějaká hodnota
• platné operátory: =, ~=, |=, ^=, $=, *=
• znaky i a s před uzavírací závorkou modifikují chování při rozlišování velikosti písmen (case-insensitive resp. case-sensitive) – defaultně to závisí na použitém značkovacím jazyku

Příklad: selektor *[lang] resp. [lang] vybere všechny elementy, které mají nastavený atribut lang (např. <body lang="en"> i <p lang="cs">, ale ne <p>)

Příklad: selektor a[title] vybere všechny odkazy s atributem title

Atributový selektor – příklady operátorů I

Příklad:
selektor a[href="https://example.org"] vybere všechny odkazy, jejichž cíl se přesně rovná "https://example.org"

Příklad:
selektor a[href*="example"] vybere všechny odkazy, jejichž cíl obsahuje "example"

Příklad:
selektor a[href$=".org"] vybere všechny odkazy, jejichž cíl končí řetězcem ".org"

Příklad:
selektor a[href^="https://"] vybere všechny odkazy, jejichž cíl začíná "https://"

Atributový selektor – příklady operátorů II

Příklad: selektor a[href^="https://"][href$=".org"] vybere všechny odkazy, jejichž cíl začíná řetězcem "https://" a končí řetězcem ".org"

Příklad: selektor a[class~="logo"] vybere všechny odkazy, jejichž atribut class obsahuje slovo "logo"
Poznámka: operátor ~= předpokládá, že atribut obsahuje seznam slov oddělených mezerami

Příklad: selektor p[lang|="en"] vybere všechny odstavce, jejichž lang se přesně rovná "en", nebo začíná řetězcem "en-" (např. "en-US", "en-GB")

Spojování selektorů

Selektory lze spojovat několika způsoby:

1. seskupení: A, B vybere elementy odpovídající selektoru A nebo B
   (sjednocení množin elementů odpovídajících A a B)
   např. h1, h2, h3, h4, h5, h6 pro jednotné stylování všech nadpisů
2. řetězení: AB – průnik množin elementů odpovídajících A a B
   např. *.classname, body.classname, .class1.class2, .classname#idname, a[href^="https://"][href$=".org"]
3. kombinování: A⊗B, kde ⊗ je nějaký operátor (combinator)
   • následující sourozenec (adjacent sibling): A + B
   • obecný sourozenec (general sibling): A ~ B
   • přímý potomek (child): A > B
   • obecný potomek (descendant): A B (Pozor: ⊗ je mezera!)

Kombinování selektorů – následující sourozenec

Příklad: jak nastylovat pouze první odstavec pod nadpisem?

<section>
  <h1>Nadpis</h1>
  <p>První odstavec...</p>
  <p>Druhý odstavec...</p>
  ...
</section>

Např. tímto pravidlem CSS:

h1 + p {
  color: red;
}

Kombinování selektorů – obecný sourozenec

Příklad: jak nastylovat všechny odstavce následující po nadpisu?

<section>
  <p>Tohle nebude červeně</p>
  <h1>Nadpis</h1>
  <p>Tohle bude červeně</p>
  <h2>Podnadpis</h2>
  <p>Tohle bude taky červeně</p>
</section>

Např. tímto pravidlem CSS:

h1 ~ p {
  color: red;
}

Kombinování selektorů – přímý potomek

Příklad: jak nastylovat všechny odstavce, které jsou dítětem nějaké sekce?

<section>
  <h1>Nadpis</h1>
  <p>Vybraný odstavec...</p>
  <article>
    <p>Nevybraný odstavec...</p>
  </article>
  ...
</section>

Např. tímto pravidlem CSS:

section > p {
  color: red;
}

Kombinování selektorů – obecný potomek

Příklad: jak nastylovat vnořené seznamy?

/* pravidlo pro odrážky první úrovně */
li {
  list-style-type: disc;
}

/* pravidlo pro odrážky druhé úrovně */
li li {
  list-style-type: circle;
}

Pseudo-třídy I

Pseudo-třídy jsou klíčová slova používaná v selektorech, která specifikují nějaký speciální stav vybraného elementu. Ukážeme si jen vybrané příklady.

• Pseudo-třídy odkazů (používané u značky a):

  • :link – zatím nenavštívený odkaz
  • :visited – již navštívený odkaz
  • :any-link – libovolný odkaz (:link nebo :visited)

• Pseudo-třídy uživatelské akce – zohledňují aktuální interakci s uživatelem

  • :active – aktivovaný element (např. kliknutí)
  • :hover – element, nad kterým se nachází kurzor

Pozor: při řetězení záleží na pořadí – typicky je vhodné pořadí na tomto slajdu.

Pseudo-třídy II

• Jazykové pseudo-třídy
  • :lang() styluje elementy psané v daném jazyce
  • :dir() styluje elementy psané daným směrem (ltr nebo rtl)
• Pseudo-třídy pro práci s formuláři – umožňují stylovat stavy formulářových prvků
  • :enabled, :disabled, :checked, :focus, :required, :optional, atd.

• Funkcionální pseudo-třídy:
  • :is(S1, S2, ...) – vybere elementy, které odpovídají některému ze zadaných selektorů (vhodný pro zjednodušení složitých selektorů)
  • :not(S) – vybere elementy, které neodpovídají selektoru S
  • :has(R) – vybere elementy, pro které relativní selektor R vybere alespoň jeden element: např. h1 + h2 vs h1:has(+ h2)

Pseudo-třídy III

• Pseudotřídy, které se řídí stromem dokumentu:
  • pseudotřída :root – kořenový element dokumentu (pro HTML je to <html>)
  • :empty – prázdný element dokumentu (nemá obsah ani potomky)
  • následující pseudotřídy vybírají element podle jejich pořadí ve skupině sourozenců:
    • :first-child (první), :last-child (poslední), :nth-child(n) (n-tý), :nth-last-child(n) (n-té od konce), :only-child (jediné dítě)
    • za n lze dosadit přirozené číslo, even (sudý), odd (lichý), nebo dokonce polynom ve tvaru an+b, kde a a b jsou celá čísla
    • využití: např. u tabulek a seznamů
  • náhradou slova child za of-type získáme pseudotřídy, které se týkají pořadí pouze mezi sourozenci stejného typu

Pseudo-elementy

Pseudo-elementy jsou klíčová slova, která umožňují stylovat části skutečných elementů. Pro odlišení od pseudo-tříd obsahují čtyřtečku (::).

Příklady pseudo-elementů:

• ::first-line označuje první řádek blokového elementu (podle toho, jak se zobrazí v prohlížeči)
• ::first-letter označuje první písmeno (tzv. iniciálu) vybraného elementu
• ::before označuje místo před začátkem vybraného elementu
  (příklad využití: číslování nadpisů)
• ::after označuje místo za koncem vybraného elementu

Další informace o selektorech

• CSS Selector Reference (W3Schools)
• CSS Reference – Selectors (MDN Web Docs)

Kaskádový algoritmus

Kaskádový algoritmus určuje způsob, kterým se kombinují deklarace stylů pocházející z různých zdrojů. Pro každou vlastnost se použije hodnota z nejrelevantnější deklarace. Výběr ovlivňují:

1. Zdroj definice stylu
   • od autora stránky (definice CSS) – nejvyšší váha
   • od uživatele (sám si nastaví formátování v prohlížeči)
   • od výrobce prohlížeče (defaultní nastavení) – nejnižší váha
2. Specifičnost selektoru – porovnává se v několika kategoriích dle typu selektoru
   (ID  >  class, attribute, pseudo-class  >  type, pseudo-element  >  universal)
3. @layer a @scope
4. Pořadí deklarace: pokud nerozhodla předchozí kritéria, použije se nejpozdější pravidlo.

Kaskádový algoritmus – příklady a výjimky

Příklady specifičnosti:

#myElement {
  /* specificity 1-0-0 */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  /* specificity 0-4-0 */
}
p {
  /* specificity 0-0-1 */
}
p.warning {
  /* specificity 0-1-1 */
}

• Důležitost deklarace lze zvýšit uvedením !important (obrácení kaskády)
  např. h1 {color: blue !important}
• Samostatná pravidla pro pokročilé vlastnosti (@keyframes a transition)

Dědičnost

CSS má koncept dědičnosti – většina vlastností (především velikost písma, barva, atd.) se dědí od nadřazeného elementu. Pokud tedy nějaký element nemá nějakou vlastnost definovanou, tak ji zdědí od rodiče.

Tip: pokud chcete definovat nějakou vlastnost společnou všem elementům, definujte ji pro element body. Poté můžete nastavit výjimky (viz kaskádový algoritmus).

Hodnoty initial a inherit

Hodnota initial představuje počáteční hodnotu dané vlastnosti před aplikací pravidel. Lze ji také explicitně vynutit („resetování“ vlastnosti).
Hodnota inherit deklaruje, že element danou vlastnost dědí od rodiče. Tuto hodnotu lze použít i pro vlastnosti, které normálně dědičné nejsou.

Příklad: h1 {font-size: inherit;}

Další koncepty

• boxy, layouty
• zkracování vlastností
• datové typy
• hodnoty: initial, computed, used, actual
• funkce
• zavináčová pravidla (@charset, @import, @namespace, @media, ...)
• nesting

Praktické použití CSS

Ukázky CSS

Referenční příručky s demo příklady pro určité vlastnosti:

• W3schools – odkaz „Try it yourself“ (zde můžete i měnit zdrojový kód CSS a dívat se, jak se změní výsledné formátování stránky)
• pojmenované příklady na W3schools
• MDN Web Docs

Další tipy:

• spoustu příkladů a „hotových řešení“ lze najít na StackOverflow
• JSFiddle umožňuje testovat vlastní HTML + CSS + JavaScript přímo v prohlížeči
• Firefox, Google Chrome: Nástroje pro vývojáře (Ctrl+Shift+I), poté klikněte pravým tlačítkem na nějaký element webové stránky a „prozkoumat“ (inspect).

Jak přidat CSS do webové stránky?

Definice stylů mohou být k webové stránce přidány třemi způsoby:

1. připojením externího souboru (typicky s příponou .css) ke stránce (v HTML např. značkou link),
2. přímým zápisem definic CSS do záhlaví dokumentu (párová značka style),
3. přidáním atributu style k libovolné značce HTML.

Nejvýhodnější je první způsob (snadná údržba vzhledu celého webu, minimalizace přenosové kapacity, optimalizace pro vyhledávače, ...).

Příklad připojení CSS I

1. Připojení externího souboru s definicí stylů (např. styl.css) k webové stránce (uvnitř značky head):

   • pomocí značky link:

     <link href="styl.css" rel="stylesheet" type="text/css" >
     

   • uvnitř značky style:

     <style type="text/css" >
       @import "styl.css";
     </style>
     

     Poznámka: je-li CSS soubor umístěn na jiném serveru, tak lze použít zápis: @import url("http://www.xxx.cz/yyy.css");

Příklad připojení CSS II

2. Zápis definice stylů do záhlaví dokumentu (párová značka style):

   <style type="text/css" >
     body {color: blue}
     h1 {color: navy}
   </style>
   

3. Přiřazení stylu přímo k nějakému elementu (hodí se pouze pro výjimečné případy, jinak je to zbytečně pracné a neuniverzální!):

   <h1 style="color: green" >nadpis</h1>
   

Resetování stylů

Při designování webových projektů se často jako první krok resetují defaultní styly. Zajistí se tak konsistence při zobrazení v různých prohlížečích a vytvoří se čistý stav, ze kterého se vytváří nový projekt.

• Eric Meyer's CSS Reset
• Modern CSS Reset

Více na cvičení

Media queries I

Blok @media se používá k omezení platnosti CSS jen za určitých podmínek, typicky určité schopnosti zařízení – např. jak široký je průhled (viewport)? Dovnitř bloku se zapisují běžné selektory CSS. Za slovem @media se uvede typ zařízení a/nebo podmínky, při jejichž splnění se aplikují pravidla CSS uvedená uvnitř bloku.

Příklad:

body {
  background-color: pink;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Typické využití bloku @media: responzivní vzhled (viz dále).

Media queries II

Druhy médií v CSS3 (media types):

• all = všechna zařízení
• print = tiskárny (tj. vzhled pro tisk)
• screen = obrazovky (počítače, tabletu, smartphonu, ...)

Nejvyužívanější „schopnosti“ médií (media features):

• max-width = maximální šířka průhledu (např. okna prohlížeče)
• min-width = minimální šířka průhledu (např. okna prohlížeče)

Existují desítky „schopností“, viz např. MDN Web Docs.

Media queries III

Vyzkoušejte:

• Try it yourself – Media Queries 1 (barva pozadí)
• Try it yourself – Media Queries 2 (umístění menu)

Další informace:

• A Complete Guide to CSS Media Queries
• w3schools: Media Queries, @media Rule
• http://jecas.cz/media (česky)

Responzivní vzhled webu I

Responzivní vzhled webu (responsive web design, RWD), se týká optimálního rozvržení webové stránky při jejím zobrazování na různých typech koncových zařízení. Nejčastěji se řeší layout, rozměry/umístění/skrytí menu nebo velikost obrázků.

RWD využívá:

• @media queries
• flexbox a grid layout: A Complete Guide to Flexbox / A Complete Guide to Grid
• column-count: Guide to Responsive-Friendly CSS Columns
• další vlastnosti, např. pro obrázky: A Guide to the Responsive Images Syntax

Obecné informace o RWD:

• w3schools, MDN Web Docs (anglicky)
• jecas.cz: Responsivní design webu

Responzivní vzhled webu II

Jak otestovat RWD:

• Firefox, Google Chrome: Nástroje pro vývojáře (Ctrl+Shift+I), nahoře je ikonka pro zobrazení na mobilních zařízeních (Ctrl+Shift+M). Případně pravá myš na (označený) text webové stránky a „prozkoumat“ (inspect).
• Am I Responsive?

Frameworky a nadstavby pro tvorbu webu

Preprocesory CSS

Preprocesory CSS jsou stylovací jazyky, které se „překládají“ do jazyka CSS. Oproti CSS poskytují pokročilejší funkce a/nebo jednodušší, čitelnější syntaxi.

Příklady: LESS, SASS, Stylus.

Základy:

• An Introduction to CSS Pre-Processors: SASS, LESS and Stylus
• Popular CSS Preprocessors With Examples: Sass, Less & Stylus

České články:

• Průvodce CSS preprocesory
• LESS: CSS preprocesor pro pohodlnější stylování
• Úvod do CSS preprocesoru Sass

Frameworky pro HTML a CSS

Knihovny umožňující rychlý design webu. Poskytují jednotný/standardní vzhled a layout, ale dají se konfigurovat, rozšířit nebo upravit vlastním potřebám.

Příklady: (free and open-source)

• Bootstrap (HTML, CSS, SASS, JavaScript) – demo
• Bourbon (SASS)
• Foundation (HTML, CSS, SASS, JavaScript)

Více informací: Wikipedia