Jak přidat CSS
Když prohlížeč čte šablonu stylů, naformátuje dokument HTML podle informací v šabloně stylů.
Tři způsoby vložení CSS
Existují tři způsoby vložení šablony stylů:
- Externí CSS
- Interní CSS
- Inline CSS
Externí CSS
Pomocí externí šablony stylů můžete změnit vzhled celého webu změnou pouze jednoho souboru!
Každá stránka HTML musí obsahovat odkaz na externí soubor šablony stylů uvnitř prvku <link> v sekci head.
Příklad
Externí styly jsou definovány v prvku <link> v sekci <head> stránky HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.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 a musí být uložena s příponou .css.
Externí soubor .css by neměl obsahovat žádné značky HTML.
Takto vypadá soubor „mystyle.css“:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Poznámka: Mezi hodnotu vlastnosti a jednotku nepřidávejte mezeru:
Nesprávně (mezera): margin-left: 20 px;
Správně (bez mezery):margin-left: 20px;
Interní CSS
Pokud má jedna stránka HTML jedinečný styl, lze použít interní šablonu stylů.
Vnitřní styl je definován uvnitř prvku <style>, uvnitř sekce hlavy.
Příklad
Interní styly jsou definovány v prvku <style> v části <head> stránky HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
Vložený styl lze použít k použití jedinečného stylu pro jeden prvek.
Chcete-li použít vložené styly, přidejte atribut stylu k příslušnému prvku. Atribut style může obsahovat libovolnou vlastnost CSS.
Příklad
Vložené styly jsou definovány v atributu „style“ příslušného prvku:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Tip: Vložený styl ztrácí mnoho výhod šablony stylů (smícháním obsahu s prezentací). Tuto metodu používejte střídmě.
Více stylů
Pokud byly některé vlastnosti definovány pro stejný selektor (prvek) v různých šablonách stylů, použije se hodnota z poslední přečtené šablony stylů.
Předpokládejme, že externí šablona stylů má pro prvek <h1> následující styl:
h1
{
color: navy;
}Pak předpokládejme, že interní šablona stylů má také následující styl pro prvek <h1>:
h1
{
color: orange;
}Příklad
Pokud je interní styl definován za odkazem na externí šablonu stylů, prvky <h1> budou „oranžové“:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Příklad
Pokud je však interní styl definován před odkazem na externí šablonu stylů, prvky <h1> budou „navy“:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Kaskádové pořadí
Jaký styl se použije, když je pro prvek HTML určen více než jeden styl?
Všechny styly na stránce se „kaskádují“ do nové „virtuální“ šablony stylů podle následujících pravidel, kde číslo jedna má nejvyšší prioritu:
- Vložený styl (uvnitř prvku HTML)
- Externí a interní šablony stylů (v hlavičce)
- Výchozí nastavení prohlížeče
Vložený styl má tedy nejvyšší prioritu a přepíše externí a interní styly a výchozí nastavení prohlížeče.
Slyšeli jste někdy o W3Schools Spaces ? Zde si můžete zdarma vytvořit svůj vlastní web nebo uložit úryvky kódu pro pozdější použití.
Začněte zdarma ❯* není vyžadována žádná kreditní karta