→ Slide 1

Kaskádové styly

→ Slide 2

Formátování HTML

HTML tagy
- Starší způsob používaný přímo v kódu.
- Pomocí tagů : <i> kurzíva </i>.
- Pomocí tagů se některé věci nedají udělat.
CSS styly
- Novější způsob
- Používá tag <style> a obecný atribut „style“,kterému se přiřazuje nějaká definice.
- Vlastnosti: složitější, ale užitečnější a všeobecné.

→ Slide 3

Kaskádové styly (CSS)

Cascading Style Sheets, česky „kaskádové styly“
Vznikly někdy kolem roku 1997
Kolekce metod pro grafickou úpravu webových stránek
Cílem oddělit vzhled dokumentu od jeho struktury a obsahu
V současností existují vylepšené formy CSS2 a CSS3

↓ Slide 4

Přehled vlastností CSS

↓ Slide 5

Aplikace CSS

Přímo v textu pomocí atributu style=„…“.

 <p style="color: red">Tento odstavec bude červený.</p>

Pomocí stylopisu („stylesheet“) v hlavičce stránky.
- Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například barva nadpisů.
- ```
<style>
  p {
    color: red;
    }
</style>
```

↓ Slide 6

Použitím externího stylopisu - soubor *.css
- na který se stránka odkazuje tagem <link>.
- V souboru je umístěný stylopis.
- Hlavní výhodou snadná duplicita a editace.
- ```
<link rel="stylesheet" type="text/css" href="styly.css">
```

Vždy se snaže používat css nalinkované ze zvláštní souboru
- přehlednost
- zobrazování syntaxe

↓ Slide 7

Syntax CSS

CSS nejsou součástí HTML – odlišnost zápisu!
Mezery a konce řádků, velikost písmen nehrají roli.
Hodnoty, které prohlížeč nezná, ignoruje.
Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky.

→ Slide 8

Selektory

→ Slide 9

Univerzální selektor

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

* {
  color: blue;
}

→ Slide 10

Typový selektor

Vybírá element podle typu.

<p>text odstavece</p>

p {
  color: blue;
}

→ Slide 11

Selektor třídy

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

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

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

→ Slide 12

Selektor ID

Každému prvku dokumentu lze nastavit speciální atribut ID (identifikátor) a jednoznačně jej tak pojmenovat v rámci dokumentu. Narozdíl od tříd lze identifikátor v dokumentu použít pouze jednou, výborně se tak hodí na označení unikátních prvků stránky (navigace, hlavička, patička, apod.).

  <h1 id="nadpis-stranky">Naše firma, s.r.o.</h1>
  <p id="vitejte">Vítejte na našem webu!</p>
  <p id="kontakt">Kontakt: ... </p>

 
#nadpis-stranky { 
  background: gray; 
  border-top: 1px solid green; 
  border-bottom: 1px solid green; 
}
#vitejte { font-style: italic; text-align: center; }
#kontakt { font-size: small; }

→ Slide 13

Selektor pseudo-třídy

Tip: An ultimate guide to CSS pseudo classes and pseudo elements yes

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

a:link {
  color: #039;
}

↓ Slide 14

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

a:visited {
  color: #930;
}

↓ Slide 15

Příklad použití dynamického CSS aktivované 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;
}

↓ Slide 16

Příklad použití dynamického CSS aktivované prvku, který je připraven pro příjem vstupu ze vstupního zařízeni 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;
}

↓ Slide 17

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:

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

↓ Slide 18

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

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

↓ Slide 19

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

↓ Slide 20

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: '“' '”' "‘" "’"}

↓ Slide 21

Element F je přímým potomkem elementu E.

li > span {
  color: red
}

Obarví element <span> v kódu

<ul>
  <li><span>Text</span>
</ul>

https://jecas.cz/css-selektory http://www.garth.cz/zaklady-css/css-selektory/ https://tomas.dankovi.info/content/webove-stranky/css/selektory