HTML tutoriál

HOME HTML Úvod do HTML HTML editory HTML Basic HTML prvky Atributy HTML HTML nadpisy HTML odstavce HTML styly Formátování HTML HTML citace HTML komentáře HTML barvy HTML CSS HTML odkazy HTML obrázky HTML favicon HTML tabulky HTML seznamy HTML Block & Inline HTML třídy ID HTML HTML iframe HTML JavaScript Cesty souboru HTML HTML hlava Rozložení HTML HTML responzivní Počítačový kód HTML Sémantika HTML Průvodce stylem HTML HTML entity HTML symboly HTML Emojis Znaková sada HTML HTML kódování URL HTML vs. XHTML

HTML formuláře

HTML formuláře Atributy formuláře HTML HTML prvky formuláře Typy vstupu HTML Vstupní atributy HTML Atributy vstupního formuláře HTML

HTML grafika

HTML plátno HTML SVG

HTML média

HTML média HTML video Zvuk HTML HTML pluginy HTML YouTube

HTML API

Geolokace HTML HTML Drag/Drop Webové úložiště HTML HTML Web Workers HTML SSE

Příklady HTML

Příklady HTML HTML kvíz HTML cvičení HTML certifikát HTML souhrn Přístupnost HTML

HTML reference

Seznam značek HTML Atributy HTML Globální atributy HTML Podpora HTML prohlížeče HTML události HTML barvy HTML plátno HTML Audio/Video HTML Doctypes HTML znakové sady HTML kódování URL HTML jazykové kódy Zprávy HTTP HTTP metody Převodník PX na EM Klávesové zkratky

HTML styly - CSS


CSS je zkratka pro Cascading Style Sheets.

CSS ušetří spoustu práce. Může ovládat rozvržení více webových stránek najednou.


CSS = Styly a barvy

Manipulovat s textem
Barvy,  krabice


Co je CSS?

Cascading Style Sheets (CSS) se používá k formátování rozvržení webové stránky.

Pomocí CSS můžete ovládat barvu, písmo, velikost textu, mezery mezi prvky, jak jsou prvky umístěny a rozmístěny, jaké obrázky na pozadí nebo barvy pozadí se mají použít, různá zobrazení pro různá zařízení a velikosti obrazovky a mnohem více!

Tip: Slovo kaskádové znamená, že styl použitý na nadřazený prvek bude platit také pro všechny podřízené prvky v nadřazeném prvku. Pokud tedy nastavíte barvu hlavního textu na „modrou“, všechny nadpisy, odstavce a další textové prvky v těle získají stejnou barvu (pokud neurčíte něco jiného)!


Pomocí CSS

CSS lze do HTML dokumentů přidat 3 způsoby:

  • Inline – pomocí styleatributu uvnitř prvků HTML
  • Interní - pomocí <style>prvku v <head>sekci
  • Externí – pomocí <link> prvku k propojení s externím souborem CSS

Nejběžnějším způsobem, jak přidat CSS, je ponechat styly v externích souborech CSS. V tomto tutoriálu však použijeme vložené a interní styly, protože se to snadněji demonstruje a snáze si to vyzkoušíte sami.


Inline CSS

Inline CSS se používá k aplikaci jedinečného stylu na jeden prvek HTML.

Inline CSS používá styleatribut prvku HTML.

Následující příklad nastaví barvu textu <h1>prvku na modrou a barvu textu <p>prvku na červenou:

Příklad

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


Interní CSS

Interní CSS se používá k definování stylu pro jednu HTML stránku.

Interní CSS je definováno v <head>sekci stránky HTML v rámci <style>prvku.

Následující příklad nastaví barvu textu VŠECH <h1>prvků (na této stránce) na modrou a barvu textu VŠECH <p>prvků na červenou. Kromě toho se stránka zobrazí s barvou pozadí „powderblue“: 

Příklad

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Externí CSS

Externí šablona stylů se používá k definování stylu pro mnoho stránek HTML.

Chcete-li použít externí šablonu stylů, přidejte na ni odkaz do <head>sekce každé stránky HTML:

Příklad

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Externí šablonu stylů lze napsat v libovolném textovém editoru. Soubor nesmí obsahovat žádný HTML kód a musí být uložen s příponou .css.

Takto vypadá soubor „styles.css“:

"styles.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

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


CSS barvy, písma a velikosti

Zde si ukážeme některé běžně používané vlastnosti CSS. Více se o nich dozvíte později.

Vlastnost CSS colordefinuje barvu textu, která se má použít.

Vlastnost CSS font-familydefinuje písmo, které se má použít.

Vlastnost CSS font-sizedefinuje velikost textu, který se má použít.

Příklad

Použití vlastností CSS color, font-family a font-size:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Hranice CSS

Vlastnost CSS borderdefinuje ohraničení kolem prvku HTML.

Tip: Můžete definovat ohraničení pro téměř všechny prvky HTML.

Příklad

Použití vlastnosti border CSS: 

p {
  border: 2px solid powderblue;
}

CSS padding

Vlastnost CSS paddingdefinuje výplň (mezera) mezi textem a okrajem.

Příklad

Použití vlastností ohraničení a odsazení CSS:

p {
  border: 2px solid powderblue;
  padding: 30px;
}

Okraj CSS

Vlastnost CSS margindefinuje okraj (mezera) vně okraje.

Příklad

Použití vlastností ohraničení a okrajů CSS:

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Odkaz na externí CSS

Na externí šablony stylů lze odkazovat pomocí úplné adresy URL nebo cesty relativní k aktuální webové stránce.

Příklad

Tento příklad používá úplnou adresu URL k odkazu na šablonu stylů:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Příklad

Tento příklad odkazuje na šablonu stylů umístěnou ve složce html na aktuální webové stránce: 

<link rel="stylesheet" href="/html/styles.css">

Příklad

Tento příklad odkazuje na šablonu stylů umístěnou ve stejné složce jako aktuální stránka:

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

Více o cestách k souborům si můžete přečíst v kapitole Cesty k souborům HTML .


Shrnutí kapitoly

  • Použijte atribut HTML stylepro inline styling
  • Element HTML použijte <style>k definování interních CSS
  • Element HTML použijte <link>k odkazu na externí soubor CSS
  • Element HTML použijte <head>k uložení prvků <style> a <link>
  • colorPro barvy textu použijte vlastnost CSS
  • Použijte vlastnost CSS font-familypro textová písma
  • font-sizePro velikosti textu použijte vlastnost CSS
  • Použijte vlastnost CSS borderpro ohraničení
  • Použijte vlastnost CSS paddingpro prostor uvnitř ohraničení
  • marginPro prostor za okrajem použijte vlastnost CSS

Tip: Mnohem více o CSS se můžete dozvědět v našem CSS Tutorial .


HTML cvičení

Otestujte se pomocí cvičení

Cvičení:

Pomocí CSS nastavte barvu pozadí dokumentu (těla) na žlutou.

<!DOCTYPE html>
<html>
<head>
<style>

  :žlutá;

</style>
</head>
<body>

<h1>Moje domovská stránka</h1>

</body>
</html>


Značky ve stylu HTML

Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource

Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .