CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

Úvod do CSS


CSS je jazyk, který používáme ke stylování webové stránky.


Co je CSS?

  • CSS je zkratka pro Cascading Style Sheets
  • CSS popisuje, jak mají být prvky HTML zobrazeny na obrazovce, na papíře nebo v jiných médiích
  • CSS ušetří spoustu práce. Může ovládat rozvržení více webových stránek najednou
  • Externí šablony stylů jsou uloženy v souborech CSS

CSS Demo - Jedna HTML stránka - Více stylů!

Zde ukážeme jednu HTML stránku zobrazenou se čtyřmi různými styly. Chcete-li zobrazit různé styly, klikněte na níže uvedené odkazy „Stylesheet 1“, „Stylesheet 2“, „Stylesheet 3“, „Stylesheet 4“:



Proč používat CSS?

CSS se používá k definování stylů pro vaše webové stránky, včetně designu, rozvržení a variací zobrazení pro různá zařízení a velikosti obrazovky.

Příklad CSS

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS vyřešilo velký problém

HTML NIKDY nemělo obsahovat značky pro formátování webové stránky!

HTML byl vytvořen k popisu obsahu webové stránky, jako je:

<h1>Toto je nadpis</h1>

<p>Toto je odstavec.</p>

Když byly do specifikace HTML 3.2 přidány značky jako <font> a atributy barev, začala to pro webové vývojáře noční můra. Vývoj velkých webových stránek, kde byly na každou stránku přidávány fonty a informace o barvách, se stal dlouhým a nákladným procesem.

K vyřešení tohoto problému vytvořilo World Wide Web Consortium (W3C) CSS.

CSS odstranilo formátování stylu ze stránky HTML!

Pokud nevíte, co je HTML, doporučujeme vám přečíst si náš HTML tutoriál .


CSS ušetří spoustu práce!

Definice stylů jsou obvykle uloženy v externích souborech .css.

Pomocí externího souboru šablony stylů můžete změnit vzhled celého webu změnou pouze jednoho souboru!