Ahoj milí čtenáři remontcompy! Jmenuji se Roman Nahvat a představuji vám řadu článků o jazyce CSS3. Zkratka CSS pochází z anglických kaskádových stylů, což znamená kaskádové styly. Styl nebo CSS je sada voleb formátování použitých na prvky dokumentu HTML ke změně jejich vzhledu. Samotný jazyk HTML je pouze standardním jazykem pro dokumenty HTML a používá se ke strukturování obsahu stránky HTML, takže HTML je pouze prvním krokem v procesu učení, jak vytvářet weby. Dalším krokem je naučit se styly nebo CSS, což je to, co uděláme. Existuje několik způsobů, jak přidat styly na webovou stránku. Každá metoda se liší ve svých schopnostech a účelu. V tomto článku se podíváme na tři způsoby, jak přidat styly do dokumentu HTML..

Jen o složitých nebo se učit CSS3. Část 1. Koncept CSS. Způsoby, jak připojit styly CSS k dokumentu HTML

Vytvořte standardní strukturu dokumentu HTML, jak je ukázáno níže.

Mezi značky a napište název dokumentu HTML, například „Metody propojení stylů CSS“

Používání značek

a

přidat název na webovou stránku s textem „Co je CSS“

Pod nadpisem pomocí značek

a

vytvořte malý odstavec s textem, jak je uvedeno níže

Tento dokument uložte na flash disk ve složce CSS pod indexem jmen s příponou .html

Určete index jmen, vyberte typ souboru html

Dostáváme následující.

Přejdeme do složky CSS, kde se nachází náš uložený html dokument s názvem index. Otevřete jej ve webovém prohlížeči

Jak vidíte, obsah webové stránky, kterou jsme vytvořili, byl zobrazen v okně webového prohlížeče, konkrétně nadpis s textem „Co je CSS“ a odstavec začínající slovy „CSS je stylový jazyk, který definuje ....“

Pomocí atributu zarovnání (přiřazení střední hodnoty) zarovnáme nadpis s textem „Co je CSS“ ve středu webové stránky.

Dostáváme následující.

Změňte barvu textu odstavce ze standardní černé na jinou. Používáme značku

Existuje mnoho barev html, například pro text odstavce na stránce, kterou jsme vytvořili, vyberte barvu DeepSkyBlue

Nastavte atribut color tagu na DeepSkyBlue

Znovu načteme naši webovou stránku a uvidíme, že text odstavce změnil barvu z černé na barvu, kterou jsme zadali

Stejným způsobem změňte barvu textu nadpisu, například na červenou.

Dostáváme následující

Vrátíme text nadpisu a odstavce na naší webové stránce do původního stavu, konkrétně odstraníme atribut zarovnání a značky ...

Po odstranění značek ... a atributu zarovnání získáme původní vzhled webové stránky

Pokud jsme výše změnili barvu a uspořádání nadpisu a odstavce textu na webové stránce pomocí značek html, nyní uděláme to samé, ale pomocí CSS. Jak je uvedeno výše, v tomto článku budeme zvažovat tři způsoby, jak přidat styly na webovou stránku, konkrétně: Přidání interních stylů na webovou stránku; Přidání globálních stylů na webovou stránku; Přidání souvisejících stylů na webovou stránku; Zvažte přidání interního stylu na webovou stránku. Interní styl je rozšíření jedné značky, která se používá na webové stránce. Atribut stylu se používá k definování stylu a jeho hodnota je určitá sada pravidel stylu. Změňte barvu textu nadpisu na webové stránce na červenou a také centrujte pomocí interního stylu. Označit

přidejte atribut style, pak si zapíšeme vlastnosti stylu, konkrétně: text-allign: center, color: red

Dostáváme následující.

Výsledkem je, že při otevření souboru index.html ve webovém prohlížeči vidíme, že text nadpisu na webové stránce je červený a vystředěný.

Stejně tak pomocí atributu style změňte barvu textu odstavce ze standardní černé na deepskyblue

Znovu načteme stránku index.html a uvidíme změnu barvy odstavce.

Změňte barvu textu nadpisu na webové stránce na červenou a vystředěnou, tentokrát pomocí globálního stylu. Pokud je použit globální styl, jsou vlastnosti CSS umístěny mezi značkami a a ty (a značky) jsou zase umístěny mezi značkami a .

Mezi značky a do složených závorek píšeme vlastnosti stylu pro záhlaví webové stránky (značka

) a odstavce (značka

): h1 zarovnání textu: střed; color: red - umístěte text nadpisu do středu webové stránky a změňte jeho barvu na červenou p color: deepskyblue - změňte barvu odstavce na deepskyblue

Výsledkem je stejný výsledek jako při použití interních stylů.

Zvažte poslední způsob přidání stylů na webovou stránku, konkrétně použití souvisejících stylů. Podstatou souvisejících stylů je to, že jsou definovány v souboru odděleném od html dokumentu a mají příponu .css. Vytvořte stále prázdný dokument a uložte jej na flash disk ve složce CSS pod stylem názvu a příponou .css.

Uložit.

Vytvořen soubor stylu s příponou .css

Ponechte soubor style.css zatím prázdný.

Pro propojení dokumentu html (v našem případě index.html) se souborem stylů style.css používáme značku. Značka by měla být umístěna uvnitř tagů ... Napíšeme mezi tagy následující řádek: where: rel = "stylesheet" - atribut značky, který webovému prohlížeči označuje, že styly budou spojeny; Atribut href = "style.css" označuje cestu k souboru stylů style.css

Při vytváření souborů stylů musíte dodržovat některá níže uvedená pravidla (při přidávání globálních stylů je třeba dodržovat stejná pravidla). Jedním z hlavních prvků souboru stylů je selektor. Selektor určuje, ke kterému prvku v dokumentu html se mají použít určité parametry stylu. Selektorem jsou značky, třídy a identifikátory. Po zadání selektoru jsou umístěny složené závorky, ve kterých je vlastnost style zaregistrována, pak je uvedena její hodnota. Například níže v diagramu je html značka h1 označena jako selektor, barva: jako vlastnost style je zapsána hodnota vlastnosti style

Protože chceme umístit text nadpisu (tag

) ve středu webové stránky a nastavte text na červený a text odstavce (značka

) zobrazte barevně deepskyblue, do souboru stylů style.css píšeme řádky: h1 text-zarovnání: střed; color: red a p color: deepskyblue kde: h1 text-zarovnání: střed; color: red - zarovnejte text záhlaví („Co je CSS“) ve středu a nastavte text na červený p color: deepskyblue - nastavte text odstavce („CSS je styl jazyka, který definuje ...“) color deepskyblue

V důsledku připojení souboru style.css k html dokumentu index.html vidíme, že text nadpisu na webové stránce je vystředěn a má červenou barvu. Text odstavce také změnil barvu na deepskyblue

Pokračování v článku: Téměř komplikované nebo se učte CSS3. Část 2. Typy selektorů CSS