CSS (Cascading Style Sheets, kaskádové styly) je stylový jazyk, který se používá k určení vzhledu webové stránky. Umožňuje vám ovládat barvy, písma, odsazení, rámečky a další aspekty designu.
Když napíšeme webovou stránku, obvykle vložíme CSS kód přímo do souboru HTML pomocí značky . Při navrhování složitých projektů to však může být problém, zvláště pokud máte několik různých stylů pro různé prvky stránky.
Naštěstí existuje způsob, jak oddělit CSS kód od HTML a vytvořit samostatný soubor. To usnadňuje správu stylů a usnadňuje doprovod kódu. V tomto článku se podíváme, jak na to.
Výhody oddělení CSS kódu od HTML
Když je CSS kód v samostatném souboru, lze jej kdykoli změnit, aniž byste museli provádět změny v HTML kódu. To výrazně zjednodušuje proces vývoje a umožňuje flexibilnější přizpůsobení vzhledu webové stránky.
Oddělení CSS kódu od HTML také přispívá k opětovnému použití stylů. Když jsou styly v samostatném souboru, lze je použít na libovolný počet stránek HTML, což výrazně šetří čas a úsilí vývojáře.
Další důležitou výhodou je zlepšení čitelnosti a podporovatelnosti kódu. Když je CSS kód oddělen od HTML, html kód se stává kompaktnějším a srozumitelnějším. Tento přístup také umožňuje použití vývojových metodik, jako je BAM (blokový prvek modifikátor), což přispívá k organizovanějšímu a strukturovanějšímu kódu.
Nedílnou výhodou oddělení CSS kódu od HTML je možnost mezipaměti. Když je soubor CSS v samostatném souboru, prohlížeč může tento soubor uložit do mezipaměti a použít jej pro všechny stránky, což urychluje načítání a zvyšuje výkon webu.
Použití samostatného souboru CSS umožňuje vývojáři zaměřit se spíše na strukturu a obsah HTML než na styly a vzhled. Díky tomu je vývojový proces efektivnější a umožňuje vytvářet kvalitnější a profesionálnější webové stránky.
Všechny tyto výhody činí oddělení CSS kódu od HTML nedílnou součástí moderního vývoje webu a jsou doporučeny pro použití každému vývojáři.
Vytvoření samostatného souboru CSS
Oddělení CSS kódu od HTML kódu má své výhody, jako je lepší organizace a strukturovanost kódu a možnost opětovného použití stylů na různých stránkách webu. Chcete-li vytvořit samostatný soubor CSS, musíme postupovat podle následujících kroků:
1. Vytvořte nový soubor s příponou .css, například, styles.css.
2. Otevřete vytvořený soubor v textovém editoru.
3. Začněte do souboru přidávat pravidla CSS. Každé pravidlo by mělo začínat selektorem prvku následovaným závorkami<>. V závorkách jsou umístěny vlastnosti a hodnoty stylu.
4. Uložte soubor CSS.
5. Do souboru HTML přidejte odkaz na vytvořený soubor CSS pomocí značky . Zadejte atribut rel="stylesheet" pro určení typu souboru a atributu href Chcete-li zadat cestu k souboru CSS.
Nyní jsou HTML kód a CSS kód v různých souborech, což usnadňuje změnu stylů webových stránek a jejich opětovné použití na různých stránkách.
Připojení souboru CSS k HTML
Chcete-li oddělit CSS od HTML a vytvořit samostatný soubor, musíte k dokumentu HTML připojit soubor CSS. K tomu se používá značka .
Značka umožňuje zadat cestu k souboru CSS a nastavit jeho vztah s stránkou HTML. Obvykle se připojení souboru CSS provádí v sekci dokumentu.
V atributu href zobrazí se cesta k souboru CSS. Pokud je například soubor CSS ve stejné složce jako dokument HTML, pak stačí zadat pouze název souboru.
V atributu rel Typ vztahu souboru CSS s dokumentem HTML by měl být specifikován. Chcete-li určit, že soubor je šablona stylů, musíte použít hodnotu "stylesheet".
Značka bude nakonec vypadat následovně:
Nyní dokument HTML připojí soubor CSS a použije jeho styly k formátování prvků na stránce. To vám umožní vytvořit čistší a organizovanější kód rozdělením do různých souborů.