Vývoj webových stránek je neodmyslitelně spojený se třemi klíčovými jazyky: HTML, CSS a JavaScript. HTML definuje samotnou strukturu webu, tedy jaké prvky se na stránce nacházejí.
Kaskádové styly (CSS) se starají o vizuální prezentaci HTML prvků, a JavaScript zajišťuje interaktivitu a dynamické prvky webových stránek.
CSS hraje zásadní roli při tvorbě atraktivních uživatelských rozhraní s výbornou uživatelskou zkušeností. Je zodpovědný za vzhled a úpravu webového obsahu, včetně rozvržení, vzhledu a stylu webu.
Například pomocí CSS můžeme ovlivnit, jak se obsah na stránce zobrazuje, a měnit prvky jako písma, barvy, okraje, odsazení, mezery a pozadí.
Kromě toho CSS je klíčové pro vytváření responzivních webů, které se přizpůsobí různým velikostem obrazovek a zařízením. Umožňuje také jednotný styl napříč všemi stránkami webu a pomáhá zpřístupnit web lidem s postižením.
Pokud chcete, aby vaše webové stránky ladily s vaší firemní identitou, CSS vám umožní efektivně používat barvy vaší značky na webu.
Bez CSS by webové stránky vypadaly pravděpodobně velmi fádně, bez stylů, barev, hover efektů nebo pozadí. Také by nebyly responzivní a postrádaly by možnosti přizpůsobení pro sladění s firemním stylem.
Proto je CSS pro webové vývojáře nepostradatelným nástrojem. Aby bylo možné CSS na webu použít, je potřeba ho propojit s HTML kódem stránky. HTML definuje prvky a obsah, proto je propojení s CSS nezbytné pro stylování těchto prvků a obsahu. Tento článek vás provede procesem propojení CSS s HTML. Předtím si ale představíme různé způsoby, jak můžete CSS zapisovat a používat pro stylování HTML prvků.
Možnosti vložení CSS do HTML
Existují tři základní způsoby, jak vložit CSS do HTML souborů:
#1. Inline styly
V tomto případě se CSS styly píší přímo do HTML prvku, jak je uvedeno v příkladu níže:
<body style="background-color: yellow;"> <h1 style="color: orangered; font-size: 40px;">etechblog.cz</h1> <p style="color: blue; font-size: 16px;">etechblog.cz je online platforma, která publikuje kvalitní články o technologiích, byznysu a FinTech, s cílem pomoci firmám i jednotlivcům v růstu.</p> </body>
I když je tento způsob jednoduchý pro přidání CSS stylů, není vhodný pro rozsáhlejší projekty. Je časově náročný, ztěžuje čitelnost a údržbu kódu, a může ovlivnit rychlost načítání webových stránek.
#2. Interní CSS
Interní CSS zahrnuje definování stylů pro danou webovou stránku uvnitř elementu <style>, který je umístěn v sekci <head> HTML dokumentu. Následuje ukázka:
<!DOCTYPE html>
<html lang="cs">
<head>
<title>etechblog.cz</title>
<style>
body {
background-color: yellow;
}
h1 {
color: orangered;
font-size: 40px;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>etechblog.cz</h1>
<p>etechblog.cz je online platforma, která publikuje kvalitní články o technologiích, byznysu a FinTech, s cílem pomoci firmám i jednotlivcům v růstu.</p>
</body>
</html>
Tato metoda, i když je jednoduchá na implementaci, není ideální pro sdílení stylů mezi různými HTML dokumenty.
#3. Externí CSS stylopis
Zahrnuje vytvoření samostatného CSS souboru, který obsahuje všechny styly pro vaše webové stránky. Tento soubor se následně propojí s HTML dokumentem. Příklad externího CSS souboru:
body {
background-color: yellow;
}
h1 {
color: orangered;
font-size: 40px;
}
p {
color: blue;
font-size: 16px;
}
Toto je doporučený způsob pro vkládání CSS do HTML dokumentů. Umožňuje snadno sdílet styly mezi různými soubory, odděluje HTML od CSS a tím zlepšuje modularitu, čitelnost a údržbu kódu.
Jak propojit CSS s HTML
Pro nácvik propojení CSS s HTML vytvořte složku a v ní vytvořte HTML soubor s názvem index.html a CSS soubor s názvem style.css. Názvy souborů mohou být libovolné, ale přípony musí být .html a .css.
Otevřete oba soubory ve svém textovém editoru. Do HTML souboru vložte následující kód:
<!DOCTYPE html>
<html lang="cs">
<head>
<title>etechblog.cz</title>
</head>
<body>
<h1>etechblog.cz</h1>
<p>etechblog.cz je online platforma, která publikuje kvalitní články o technologiích, byznysu a FinTech, s cílem pomoci firmám i jednotlivcům v růstu.</p>
<p>Mezi témata, kterým se etechblog.cz věnuje, patří:</p>
<ul>
<li>Programování</li>
<li>Kybernetická bezpečnost</li>
<li>Digitální forenzika</li>
<li>Produktivita</li>
<li>Hraní her</li>
</ul>
</body>
</html>
Tento HTML soubor otevřete v prohlížeči tak, že ho přetáhnete do okna prohlížeče.
Alternativně můžete kliknout pravým tlačítkem na HTML soubor a vybrat prohlížeč z nabídky, nebo ho otevřít poklikáním v prohlížeči nastaveném jako výchozí.
V této chvíli naše webová stránka vypadá následovně:
Abychom určili, jak se mají prvky v HTML souboru zobrazovat, budeme potřebovat CSS soubor se styly všech prvků. Do vašeho CSS souboru vložte tento kód:
body {
background: rgb(245,235,224);
background: linear-gradient(90deg, rgba(245,235,224,1) 0%, rgba(227,213,202,1) 35%, rgba(212,163,115,1) 100%);
}
h1 {
color: #fb5607;
font-size: 40px;
}
p {
color: #0f4c5c;
font-size: 16px;
font-weight: 700;
}
li {
color: #00b4d8;
font-weight: 400;
}
S připraveným CSS souborem, můžeme přejít k propojení s HTML. Pro propojení souboru index.html se souborem style.css přidejte do sekce <head> HTML souboru následující řádek:
<link rel="stylesheet" href="style.css">
V uvedeném řádku:
- <link>: je HTML prvek pro definování vztahů mezi aktuálním dokumentem a externím zdrojem, v našem případě CSS souborem. Tento prvek slouží k propojení CSS s HTML soubory.
- rel=“stylesheet“: atribut rel určuje vztah mezi HTML dokumentem a propojeným souborem. V tomto případě hodnota „stylesheet“ indikuje, že propojený soubor je CSS soubor.
- href=“style.css“: atribut href definuje cestu k CSS souboru, který chceme propojit s HTML. Protože je CSS soubor ve stejné složce jako HTML, je cestou jednoduše název souboru.
Kompletní HTML kód je zobrazen níže:
<!DOCTYPE html>
<html lang="cs">
<head>
<title>etechblog.cz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>etechblog.cz</h1>
<p>etechblog.cz je online platforma, která publikuje kvalitní články o technologiích, byznysu a FinTech, s cílem pomoci firmám i jednotlivcům v růstu.</p>
<p>Mezi témata, kterým se etechblog.cz věnuje, patří:</p>
<ul>
<li>Programování</li>
<li>Kybernetická bezpečnost</li>
<li>Digitální forenzika</li>
<li>Produktivita</li>
<li>Hraní her</li>
</ul>
</body>
</html>
Po propojení s CSS souborem vypadá HTML soubor v prohlížeči takto:
Doporučené postupy pro propojení CSS s HTML
Zde jsou některé osvědčené postupy pro propojení CSS s HTML:
- Používejte externí styly. Pro propojení HTML s CSS existuje více způsobů, ale nejlepším a doporučeným způsobem je použití externího CSS souboru. Tím je kód modulární, lépe čitelný, snadno se ladí a udržuje.
- Umístěte <link> prvek do sekce <head> HTML dokumentu. Častá chyba je umístění <link> do těla HTML. To vede k chybám a styly se na stránce nezobrazí.
- Používejte relativní cesty – při propojování CSS s HTML je nutné specifikovat umístění CSS souboru. Používejte relativní cesty místo absolutních, aby byl projekt přenosný.
- Kombinujte CSS soubory – pro urychlení načítání stránek a optimalizaci výkonu, zkombinujte více CSS souborů do jednoho, zejména pokud obsahují styly pro jednu stránku.
- Dbejte na správný pravopis při propojování CSS s HTML. Běžnou chybou začátečníků je překlep v rel=“stylesheet“ na „stylesheets“. Pokud se vám styly nezobrazují, zkontrolujte si prosím pravopis.
Kromě správného propojení CSS s HTML, dbejte na popisné názvy CSS souborů, dobrou organizaci kódu s komentáři a používejte smysluplné názvy tříd a ID. Tím dosáhnete příjemnějšího vývojářského zážitku.
Závěr
CSS je klíčový nástroj pro vytváření estetických webových stránek, které jsou radost používat. Jako vývojáři vám znalost CSS umožní vytvářet lepší uživatelské rozhraní a zážitky pro vaše uživatele. Pro použití CSS v HTML, vytvořte externí CSS soubor a postupujte podle kroků v článku pro správné propojení.
Doporučujeme také prozkoumat, jak využít SVG v HTML pro tvorbu úžasné grafiky.