Externí soubory css jsou nedílnou součástí vytváření stylového a moderního webového designu. Umožňují vývojářům spravovat vzhled webové stránky, takže je atraktivnější a uživatelsky přívětivější.
Pokud se právě začínáte seznamovat s vývojem webu, musíte vědět, jak správně připojit externí soubor css. Existuje několik jednoduchých způsobů, které vám to umožní bez velkého úsilí.
Prvním způsobem je použití značky . Chcete-li to provést, musíte vytvořit samostatný soubor s příponou .css, ve kterém bude kód stylů. Poté musíte do sekce přidat další kód vaší webové stránky: . Zde href - toto je cesta k vašemu souboru css, pokud jde o Vaši webovou stránku.
Druhým způsobem je použití vestavěného stylu. Obecně se tento způsob používá, když chcete styly aplikovat přímo na konkrétní položku na webové stránce. K tomu musíte přidat atribut style na příslušnou značku. Pokud například chcete nastavit barvu pozadí pro odstavec, musíte přidat atribut style="background-color: yellow;" k Tegu .
Připojení externího souboru css
Vývoj webových stránek je neoddělitelná od použití kaskádových stylových tabulek, známých také jako CSS (Cascading Style Sheets). Umožňují vám spravovat vzhled webové stránky, takže je krásnější a atraktivnější pro uživatele.
Jedním ze způsobů, jak připojit externí soubor CSS k stránce HTML, je použití značky . Zde je jednoduchý příkaz:
V tomto příkladu nastavíme atribut rel s hodnotou "stylesheet" - to určuje prohlížeči, že soubor je šablona stylů. Atribut href označuje cestu k souboru CSS, který chcete připojit.
Externí soubor CSS musí mít příponu .css a být k dispozici na uvedené cestě. Pokud se například váš soubor CSS nazývá " styles.css " a je ve stejné složce jako HTML stránka, můžete použít relativní cestu, jak je znázorněno výše.
Nyní, když je váš soubor CSS připojen k stránce HTML, můžete použít všechny reklamy stylů z tohoto souboru. Prohlížeč je automaticky použije na všechny relevantní položky na stránce.
Metoda 1: Použití odkazu na externí soubor
Pokud potřebujete k dokumentu HTML připojit externí soubor se styly CSS, můžete použít speciální značku . Tato značka vám umožňuje vytvořit odkaz na externí soubor, který obsahuje veškerý požadovaný CSS kód.
Pro připojení souboru s CSS styly můžete použít následující kód:
Popis:
- je to značka HTML, která se používá k vytvoření odkazu na externí soubor.
rel= "stylesheet" je atribut značky , který označuje, že připojený soubor je šablona stylů (CSS).
href="styles.css" je atribut značky, který označuje cestu k souboru s CSS styly. Tady " styles.CSS " představuje název vašeho souboru CSS a měl by být dostupný po zadané cestě.
Je důležité, aby soubor s CSS styly byl ve stejném adresáři nebo byl k dispozici na uvedené cestě. Prohlížeč tak bude vědět, kde hledat soubor s CSS styly a aplikovat jej na dokument HTML.
Metoda 2: Importovat soubor css do dokumentu html
Pokud potřebujete připojit externí soubor css a nechcete používat značku link, můžete jej importovat přímo do dokumentu html. K tomu se používá značka style.
Chcete-li importovat soubor CSS do dokumentu html, musíte:
- Vytvořit značku style orámováním otvíráním ( ) tagy.
- Uvnitř značky style použijte příkaz import, po kterém v uvozovkách zadejte cestu k souboru CSS. Například:
Soubor CSS bude tedy připojen přímo do dokumentu html, což může být užitečné v případě malých projektů nebo pro ladicí účely.
Metoda 3: Použití inline stylů
Kromě externích souborů CSS a vestavěných stylů lze také použít inline styly přímo v kódu HTML. Tento přístup umožňuje přiřadit styly konkrétním prvkům nebo skupinám prvků v dokumentu.
Chcete-li přidat inline styly, musíte použít atribut style v úvodní značce položky. Hodnotou tohoto atributu je sada pravidel CSS, například:
Je důležité si uvědomit, že inline styly mají vyšší prioritu než vestavěné nebo externí styly a budou se vztahovat právě na uvedené prvky.
Inline styly byste však měli používat opatrně, protože mohou zkomplikovat podporu a škálování projektu.
Metoda 4: použití css uvnitř značek style
Pokud chcete styly použít na jednotlivé prvky webové stránky bez připojení externího souboru CSS, můžete použít atribut style uvnitř příslušných značek.
Chcete-li například změnit barvu textu uvnitř odstavce, můžete použít následující kód:
Этот текст будет красного цвета
V tomto příkladu jsme použili vlastnost color a určili mu význam red (červený). Můžete použít různé vlastnosti CSS, jako jsou font-size, background-color, margin a tak dále, pro každou jednotlivou položku přímo uvnitř značek.
Je však třeba vzít v úvahu, že použití stylů uvnitř značek může vést k opětovnému napsání stejných stylů pro různé položky na stránce, což se z hlediska podpory a čitelnosti kódu nedoporučuje. Proto je lepší použít tuto metodu pouze pro malé a krátkodobé změny stylů.