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
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í
style
atributu 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á style
atribut 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 color
definuje barvu textu, která se má použít.
Vlastnost CSS font-family
definuje písmo, které se má použít.
Vlastnost CSS font-size
definuje 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 border
definuje 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 padding
definuje 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 margin
definuje 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
style
pro 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> color
Pro barvy textu použijte vlastnost CSS- Použijte vlastnost CSS
font-family
pro textová písma font-size
Pro velikosti textu použijte vlastnost CSS- Použijte vlastnost CSS
border
pro ohraničení - Použijte vlastnost CSS
padding
pro prostor uvnitř ohraničení margin
Pro 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í
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 .