CSS – Kaskádové styly pro web

Úvod do CSS

Co je CSS

  • CSS = Cascading Style Sheets

  • Slouží k oddělení obsahu (HTML) od vzhledu

  • Ovlivňuje:

    • barvy

    • rozložení

    • typografii

    • animace

    • responzivitu

Proč používat CSS

  • Lepší údržba kódu

  • Opakované použití stylů

  • Responzivní design

  • Přístupnost (accessibility)

Historie CSS

  • CSS1 (1996)

  • CSS2 / 2.1

  • CSS3 – modulární přístup

  • Moderní CSS (Flexbox, Grid, Variables)

Způsoby použití CSS

Inline styly

<p style="color: red;">Text</p>

  • Nevhodné pro větší projekty

  • Špatná údržba

Interní styly

<style>
  p { color: blue; }
</style>

Externí styly (doporučeno)

<link rel="stylesheet" href="style.css">

Základní syntaxe CSS

Struktura pravidla

selector {
  vlastnost: hodnota;
}

Příklad

p {
  color: green;
  font-size: 16px;
}

Komentáře

/* Toto je komentář */

Selektory

Základní selektory

  • Element

  • .class

  • #id

  • *

p {}
.box {}
#header {}
* {}

Kombinátory

  • Potomek (div p)

  • Přímý potomek (div > p)

Atributové selektory

input[type="text"] {}
a[href^="https"] {}

Kaskáda, specificita a dědičnost

Kaskáda

  • Pořadí stylů

  • Důležitost pravidel

  • !important (nedoporučeno)

Specificita

  • inline > id > class > element

  • Výpočet skóre

Dědičnost

  • Některé vlastnosti se dědí (color, font)

  • Jiné ne (margin, border)

Box model

Box model

  • content

  • padding

  • border

  • margin

boxing

Vizualizace box modelu

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

Typografie

Základní vlastnosti

  • font-family

  • font-size

  • font-weight

  • line-height

  • letter-spacing

Google Fonts

font-family: 'Roboto', sans-serif;

Barvy a pozadí

Barvy

  • názvy

  • HEX

  • RGB / RGBA

  • HSL

color: #ff0000;
background-color: rgba(0,0,0,0.5);

Pozadí

  • background-color

  • background-image

  • background-size

  • background-position

Jednotky v CSS

Volba jednotek v CSS zásadně ovlivňuje:

  • responzivitu

  • přístupnost (zoom, změna velikosti písma)

  • chování layoutu na různých zařízeních

Jednotky dělíme na: absolutní, relativní, viewport jednotky

Absolutní jednotky

px – pixel

Nejpoužívanější jednotka v CSS.

  • Není fyzický pixel displeje

  • Je relativní k zařízení (CSS pixel)

  • Nemění se při změně velikosti písma

.box {
  width: 200px;
  border: 1px solid black;
}

Pixel použití

  • okraje (border)

  • stíny

  • jemné doladění layoutu

Nevhodné pro nastavemí velikosti textu (zhoršení přístupnosti).

Další absolutní jednotky

  • cm, mm, in

  • pt, pc

Používají se prakticky jen pro tisk (@media print).

Relativní jednotky (font-based)

em

Relativní k velikosti písma aktuálního elementu.

.parent {
  font-size: 20px;
}
.child {
  font-size: 1.5em; /* 30px */
}

Vlastnosti:

  • násobí se (může být nečekané)

  • ovlivněno zanořením

Použití: paddingy, marginy vázané na text

rem

Relativní k velikosti písma kořenového elementu (html).

html {
  font-size: 16px;
}
p {
  font-size: 1.25rem; /* 20px */
}

Výhody:

  • předvídatelné

  • vhodné pro přístupnost

  • doporučeno pro typografii

% – procenta

Relativní k nadřazenému elementu.

.container {
  width: 80%;
}

  • Pozor u height funguje jen pokud má rodič definovanou výšku

  • Použití pro nastavení šířky layoutu či obrázku.

Viewport jednotky

Co je viewport

Viewport = viditelná část okna prohlížeče.

Jednotky:

  • vw – 1 % šířky viewportu

  • vh – 1 % výšky viewportu

  • vmin – menší z hodnot vw/vh

  • vmax – větší z hodnot vw/vh

vw / vh

.heroW {
  width: 100vw;
}
.heroH {
  height: 100vh;
}

  • Typické použití u fullscreen sekce nebo responzivní layouty

  • Pozor u vh na mobilní prohlížeče, adresní řádek mění skutečnou výšku

Porovnání jednotek

JednotkaRelativní kTypické použití

px

zařízení

border, shadow

em

rodičovský font

paddingy

rem

root font

typografie

%

rodič

layout

vw/vh

viewport

fullscreen sekce

Doporučené kombinace

  • Typografie: rem

  • Layout: %, vw

  • Spacing: rem, em

  • Jemné detaily: px

Praktická ukázka

html {
  font-size: 16px;
}

.container {
  max-width: 70rem;
  margin: 0 auto;
  padding: 2rem;
}

.card {
  padding: 1.5em;
  border-radius: 8px;
}

Časté chyby

  • Používání px všude

  • Kombinování em bez pochopení dědičnosti

  • height: 100vh na mobilu bez testování

Best practices

Doporučení

  • Používat class selektory

  • Nepoužívat !important

  • Konzistentní pojmenování

  • Strukturovat CSS

Shrnutí a další kroky

  • CSS je základ moderního webu

  • Responzivita je nutnost

  • Praxe je klíčová