Připojení souboru CSS k HTML je jedním z důležitých kroků při vytváření moderních webových stránek. Styly vám umožňují zlepšit vzhled a umístění prvků stránky a učinit ji informativnější a uživatelsky přívětivější.
Ukázalo se, že připojení souboru CSS k HTML je docela jednoduché, pokud znáte několik pravidel a po sobě jdoucích akcí. V tomto článku se podíváme na podrobný návod, jak připojit soubory CSS a HTML do jedné složky, abyste mohli tuto techniku snadno použít na svém webovém projektu.
Prvním krokem je vytvoření dvou souborů v jedné složce-souboru HTML a souboru CSS. V tomto případě je důležité zachovat správnou strukturu a pojmenování souborů pro pohodlnější práci. Soubor HTML obsahuje kód webové stránky a soubor CSS je Kód stylů.
Příprava souborů
Než začnete s HTML a CSS soubory, musíte vytvořit samostatnou složku, do které budou uloženy všechny potřebné soubory. To umožní zorganizovat strukturu projektu a zjednodušit jeho podporu.
1. Vytvořte novou složku v počítači. Chcete-li to provést, klikněte pravým tlačítkem na požadované adresáře a vyberte Vytvořit - > složka.
2. Pojmenujte složku vhodným jménem, které by ji spojovalo s vaším projektem. Například "my_project".
3. Uvnitř složky "my_project" vytvořte dva nové textové soubory s příponami."html "a".css".
4. Pojmenujte soubory podle jejich účelu. Například " index.html "pro hlavní stránku projektu a" styles.css " pro soubor stylů.
Nyní jste připraveni přejít na konfiguraci a připojení souborů HTML a CSS.
Vytvoření složky a souborů
Krok 1: Najděte místo v počítači, kde chcete vytvořit novou složku. Obvykle to může být plocha nebo složka Dokumenty.
Krok 2: Klikněte pravým tlačítkem myši na vybrané místo a z kontextové nabídky vyberte možnost Vytvořit novou složku.
Krok 3: Zadejte název nové složky. Pojmenujte ji například "moje webová stránka".
Krok 4: Stiskněte klávesu "Enter" nebo kliknutím někde mimo pole pro zadání názvu složky vytvořte složku.
Nyní, když máte složku, dalším krokem je vytvoření souborů HTML a CSS:
Krok 1: Otevřete vytvořenou složku.
Krok 2: Klikněte pravým tlačítkem do složky a z kontextové nabídky vyberte možnost "vytvořit textový dokument".
Krok 3: Poklepejte na nový textový dokument a proveďte požadované změny. Uložte jej s rozšířením."html " vytvořit html soubor.
Krok 4: Opakováním odstavců 2 a 3 vytvořte další textový dokument, ale uložte jej s rozšířením."CSS " vytvořit CSS soubor.
Nyní máte složku se dvěma soubory uvnitř: HTML a CSS. Už jste téměř připraveni připojit tyto soubory k sobě!
Umístění souborů do složky
Chcete-li připojit soubory HTML a CSS ke své webové stránce, musíte vytvořit speciální strukturu složek.
Pro začátek vytvořte hlavní složku pro váš projekt. V této složce vytvořte dvě podsložky-jednu pro soubory HTML a druhou pro soubory CSS.
Ve složce s HTML soubory vytvořte nový soubor a uložte jej s příponou .html. Pro tento návod jej nazveme index.html. V tomto souboru budete psát celý HTML kód pro Vaši webovou stránku.
Dalším krokem je vytvořit soubor CSS. Ve složce souborů CSS vytvořte nový soubor a uložte jej s příponou .css. Pro tento návod jej nazveme style.css. V tomto souboru budete psát celý CSS kód pro stylizaci vaší webové stránky.
Nyní, když máte dva soubory-index.html a style.css – můžete začít pracovat se svou webovou stránkou.
V HTML souboru musíte k připojení souboru CSS použít značku link s atributem href a zadat cestu k souboru CSS. Například:
Zde "./css/style.css " je cesta k souboru style.CSS týkající se složky s HTML soubory. Pokud je váš CSS soubor v jiné složce, měli byste k němu zadat správnou cestu.
Nyní je celý CSS kód ze souboru style.css se bude vztahovat na všechny položky na vaší webové stránce.
Připojení CSS k HTML
Chcete-li připojit CSS k souboru HTML, musíte postupovat podle následujících kroků:
- Vytvořte soubor stylů CSS s příponou .CSS a uložte jej do stejné složky, kde je soubor HTML.
- Otevřete soubor HTML v textovém editoru.
- V části HTML souboru přidejte následující značku:
- rel= "stylesheet" je atribut, který označuje typ připojeného souboru, v tomto případě jde o soubor stylů.
- type= "text / css" je atribut, který označuje typ obsahu souboru, v tomto případě je to CSS.
- href="styles.CSS" je atribut, který označuje cestu k souboru stylů. Zde musíte zadat název souboru CSS.
- Uložte změny v souboru HTML.
Nyní soubor HTML připojí soubor CSS a použije jeho styly na své prvky.