Zkratka CSS znamená „kaskádové šablony stylů“. CSS slouží ke stylování webových stránek a aplikací používaných na všech zařízeních. Šablona stylů se běžně používá vedle HTML a programovacího jazyka front-end, jako je JavaScript.

CSS lze implementovat jedním ze tří způsobů - vloženým, interním nebo externím. Ačkoli je doporučeným přístupem externí CSS, existují případy, kdy mohou být zbývající dvě metody implementace praktičtější.

V tomto článku s návodem se naučíte všechny základy CSS, abyste mohli začít vytvářet aplikace ještě dnes.

Kdy použít různé metody implementace CSS

Inline CSS je ideální metodou implementace, pokud je záměrem zahrnout na webovou stránku pouze jednu nebo dvě předvolby stylu spolu s několika dalšími specializovanými případy. Vložená metoda CSS využívá styl klíčové slovo spolu s vlastností CSS k dosažení konkrétního výsledku.

Pokud máte v úmyslu změnit barvu jednoho nadpisu na červenou, může být vhodnou volbou vložený CSS. Specifický případ, jak je uvedeno výše, by byl při vytváření rozložení HTML primárně sestávajících z tabulek (zastaralá praxe).

Použití příkladu vloženého CSS

Hlavní nadpis

Na řádku kódu výše se zobrazí text „Hlavní nadpis“ potažený červenou barvou. To je dost možná jeden z mála praktických důvodů pro použití inline CSS, protože tam je obvykle jen jeden h1 prvek na dané webové stránce.

Pokud máte v úmyslu obléknout všechny h2 prvky na webové stránce se žlutou barvou. Budete muset použít CSS styl klíčové slovo spolu s příponou barva vlastnost a její hodnota (žlutá) na každém prvku. Efektivnější způsob, jak tento úkol splnit, je použít interní CSS.

Použití interního příkladu CSS

Umístění kódu výše do souboru tag vašeho HTML souboru zajistí, že všechny h2 prvky v tomto souboru jsou potaženy žlutou barvou. Interní CSS je odděleno od HTML kódu, a proto je metoda efektivnější, protože usnadňuje cílení na různé skupiny prvků.

Proč je tedy externí implementační metoda CSS stále nejvíce doporučovaným přístupem? Oddělení obav. Díky externímu CSS je váš CSS kód zcela oddělen od HTML kódu, což zajišťuje škálovatelnost pro velké projekty a zefektivňuje proces testování.

Použití externího příkladu CSS

Vložení řádku kódu výše do souboru tag vašeho HTML souboru usnadní styl vaší webové stránky pomocí externí metody CSS. Jediným aspektem výše uvedeného kódu, který se změní, je hodnota přiřazená href vlastnost, což by měl být vždy název souboru CSS (včetně přípony .css).

Příbuzný: Co jsou to kaskádové styly a k čemu slouží CSS? Když je váš soubor CSS propojen s vaším dokumentem HTML, můžete nyní začít psát kód CSS do souboru CSS. V tomto okamžiku je jediným rozdílem mezi výše uvedeným interním příkladem CSS a externím CSS soubor styl štítek. Vložení následujícího kódu do souboru CSS tedy vytvoří stejný výsledek jako výše uvedený interní příklad CSS.

h2 {
barva: žlutá;
}

Zkoumání základní struktury CSS

Základní deklarace CSS obsahuje sedm základních prvků, jak můžete vidět na příkladu níže. Všichni společně pracují na dosažení konkrétní sady stylingových preferencí.

Volič

V deklaraci CSS může být volič buď id, a třída, prvek, nebo v některých zvláštních případech pseudo-volič. Ve struktuře CSS nad A prvek se používá jako volič, což znamená, že všechny odkazy na webové stránce budou opatřeny červenou barvou. Účelem voliče je v zásadě identifikovat prvek (prvky), které by měly být stylizovány.

Prohlášení Začátek a konec

Začátek a konec deklarace jsou důležité, protože obsahují všechny předvolby stylů, které platí pro konkrétní selektor. Oba prvky jsou reprezentovány dvojicí otevřených a uzavřených složených závorek. Dobrým způsobem, jak si zapamatovat použití začátku deklarace nebo konce deklarace, je mít na paměti, že pokud máte otevřenou složenou závorku, měla by existovat odpovídající uzavřená složená závorka a naopak.

Vlastnictví

Vlastností CSS ve struktuře deklarace může být kterýkoli z více než stovky různých typů vlastností. Typ vlastnosti použitý ve struktuře CSS výše je barva a tato vlastnost cílí na text na webové stránce. Pokud se chcete dozvědět více, podívejte se na naše komplexní seznam vlastností CSS a jejich použití.

Oddělovač majetku/hodnoty

Ačkoli se to může zdát malé a nevýznamné, oddělovač vlastností/hodnot je stejně důležitý jako všechny ostatní prvky ve struktuře CSS. Pokud se někdy stane, že je tento prvek zapomenut, celá deklarace CSS se nespustí.

Hodnota

Hodnota vlastnosti CSS představuje přesný styl, který byste na danou službu chtěli použít. Hodnoty, které jsou k dispozici k použití, závisí na typu vlastnosti. Vlastnost použitá ve struktuře výše je například barva, což znamená, že na tuto vlastnost lze použít pouze jeden typ hodnoty, název barvy. A barva hodnota může být prezentována v jedné ze čtyř forem: hodnota slova (jako v příkladu výše), hexadecimální hodnota, hodnota HSL (odstín, sytost, světlost) nebo hodnota RGB (červená, zelená, modrá).

Oddělovač prohlášení

Oddělovač deklarací označuje, že jste na konci konkrétní deklarace stylu. Ve struktuře výše je pouze jeden oddělovač deklarací, ale může jich být více. Vše závisí na počtu vlastností CSS, které hodláte použít pro konkrétní třída, idnebo prvek.

Co jsou ID a třídy?

ID a třídy hrají zásadní roli v procesu stylingu CSS. Stejně jako prvky HTML, CSS ID a třídy se používají jako voliče v prohlášení CSS. Nicméně, třídy a ID mají přednost před prvkem HTML.

Obecným pravidlem v CSS je, že poslední deklarace stylu, kterou přidáte do souboru, přepíše ty, které tam byly dříve. Pokud tedy existují dvě deklarace s příponou h2 selektor v souboru CSS, deklarace, která byla přidána jako poslední, přepíše ta, která tam byla dříve.

Pokud však toto h2 prvek má id který se používá jako selektor v deklaraci CSS, bez ohledu na jeho pozici (před nebo po) k deklaraci CSS, která má h2 prvek jako jeho volič, preference stylu v id deklarace bude mít vždy přednost před prvkem. Stručně řečeno, id přepíše jiné voliče stylu.

Je důležité si uvědomit, že v prohlášení CSS ID začněte znakem čísla a hodiny začínají tečkou. Nejvýznamnější rozdíl mezi id a a třída je to id je jedinečný, zatímco a třída lze duplikovat. Například sbírka podobných tagům lze dát totéž třída název; nicméně id každého tag musí být jedinečný.

Zkoumání různých typů selektorů

Existují tři základní typy selektorů - jeden, více a vnořený. Tento článek dosud obsáhle pokrýval jednotlivé voliče.

Při používání CSS existují případy, kdy byste chtěli různé prvky na různých pozicích na webové stránky, aby měly podobný styl, který se liší od obecného stylu použitého na celou webovou stránku. V těchto případech bude užitečné vědět, jak používat více voličů.

Základní příklad šablony HTML

Vítejte

Lorem ipsum dolor sit amet consectetur, adipisicing ellit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







O

Lorem ipsum dolor sit amet consectetur, adipisicing ellit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Titul

Lorem ipsum dolor sit amet consectetur adipisicing ellit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Na ad laborum illo inventore quos est dolores
překážet fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur korupci
mollitia, minima, magni at iusto id needitatibus harum ratione, ipsum doloremque deleniti ex eligendi
znemožnit maximální čas? Eius modi optio ad, nisi tempora sapiente?







Titul

Lorem ipsum dolor sit amet consectetur adipisicing ellit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Na ad laborum illo inventore quos est dolores
překážet fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur korupci
mollitia, minima, magni at iusto id needitatibus harum ratione, ipsum doloremque deleniti ex eligendi
znemožnit maximální čas? Eius modi optio ad, nisi tempora sapiente?

Pokud se podíváte pozorně na výše uvedený soubor HTML, uvidíte dynamiku, která mezi nimi existuje ID a třídy. V odkazu na výše uvedený soubor, pokud chcete použít stejný styl na o a pouze články na webové stránce, následující kód CSS toho dosáhne.

Příklad použití více voličů

#O, .content {
barva bílá;
barva pozadí: darkcyan;
}

Při použití více voličů byste měli každý volič vždy oddělit čárkou. Výše uvedený příklad má dva voliče, an id a a třída. Pokud čárka, která následuje za oid chybí, deklarace CSS se nespustí.

Když se vrátíme k výše uvedenému příkladu základní šablony HTML, existují dva tagy přítomny - jeden v uvítací sekci a druhý v sekci o. Pokud je vaším cílem zacílit pouze na jeden z nich tagy, vnořený volič by měl být vaší metodou go-to.

Použití příkladů vnořených voličů

#Vítejte p rozpětí {
červená barva;
}

Vnořený volič výše obsahuje id a dva prvky HTML. Jak vidíte z výše uvedeného příkladu, vnořený selektor vám poskytuje možnost zacílit na konkrétní prvek ve skupině.

Proto pouze rozpětí sekce v značka div s uvítací ID bude potažen červenou barvou.

Ať už používáte stylingový jazyk jako CSS nebo programovací jazyk, měli byste absolutně vědět, jak napsat komentář. Komentáře jsou zásadní v projektech na podnikové úrovni, kde spolupracuje více vývojářů, a jsou také užitečné při vývoji v malém měřítku.

Komentář CSS obsahuje dvě lomítka, dvě hvězdičky a sekci komentáře.

/ * Takto napíšete jednořádkový komentář v CSS */

/*
Takhle píšeš
víceřádkový komentář
v CSS
*/

Co bude dál?

Tento článek vám poskytne základní součásti CSS. Nyní můžete použít identifikátor:

• Kterákoli ze tří metod implementace CSS
• Všechny prvky v deklaraci CSS
• Tři základní typy selektorů
• Komentář CSS

Přesto je to jen začátek. CSS má několik rámců, které vám pomohou rozvíjet lepší porozumění jazyku. Jedinou výzvou je rozhodnout, který z nich je pro vás nejlepší.

Tailwind CSS vs. Bootstrap: Který je lepší rámec?

Při výběru rámce CSS je důležité najít ten, který splňuje vaše požadavky.

Číst dále

O autorovi