Tento článek přináší zajímavé a důležité téma známé jako Selektory a navazuje na podpůrnou praktickou ukázku. V tomto článku se budeme zabývat následujícími ukazateli,
- Styling prvků HTML
- Selektory CSS
- Výběr ID CSS
- Výběr třídy CSS
- CSS Universal Selector
- Selektory skupin CSS
Pojďme tedy začít,
Styling prvků HTML
Než se dostaneme k selektorům CSS, podívejme se, co je to CSS. Pokud má být HTML považován za kostru, pak je CSS (Cascading Style Sheets) jako svaly a kůže. Mozek je JavaScript. Takže pro webovou stránku jsou styly CSS v podstatě rozložení a design. Přímo od umístění obrázků a textu až po velikost písma a barvu pozadí řídí CSS vzhled prvků HTML v prohlížeči.
CSS můžete lépe porozumět, pokud máte dobrý přehled o tom, co jsou selektory CSS. Tyto selektory vám umožňují cílit na konkrétní prvky HTML, abyste na ně mohli použít správný styl.
Pojďme pochopit, jak můžeme vybrat prvky HTML,
Jak vybrat prvky?
Řekněme, že chcete, aby byl určitý nadpis stylizován odlišně od zbytku obsahu webové stránky. Nyní pomocí selektorů CSS můžete cílit na tento prvek HTML, abyste jej stylizovali jinak. Selektory CSS pomáhají definovat prvky, pro které platí určitá sada pravidel CSS. Existují různé typy selektorů CSS, které vám umožňují přesně vybrat prvky, které chcete stylovat. Můžete dát celé webové stránce obecný styl a pak se dopracovat ke stylizaci dalších prvků stránky.
jak kombinovat data v tablo
Selektory jsou součástí pravidla CSS a tyto selektory přicházejí těsně před deklarací bloků CSS. Pro lepší pochopení se můžete podívat na obrázek níže.
Pokračujeme článkem CSS Selectors
Selektory CSS
Tento volič umožňuje vybrat prvek HTML podle názvu.
Zvažte níže uvedený kód:
p {text-align: center color: magenta}Tento styl bude použit na každý odstavec.
Odstavec 1
Odstavec 2
Tento kód vám poskytne následující výstup:
Tento styl bude použit na každý odstavec
Odstavec 1
Odstavec 2
Ve výše uvedeném kódu byly prvky HTML zarovnány na střed a mají barvu „purpurová“.
Pokračujeme článkem CSS Selectors
Výběr ID CSS
Výběrem atributu id prvku HTML můžete vybrat konkrétní prvek. Jelikož je id pro stránku jedinečný, můžete vybrat ten správný prvek pomocí atributu id.
Prvek HTML můžete vybrat pomocí „#“ následovaného ID tohoto prvku. Například „#firstname“ vybere prvek, kde je ID „firstname“.
Zvažte následující kód:
# para1 {text-align: center color: orange}Ahoj světe
Tento odstavec nebude ovlivněn.
Výstup pro výše uvedený kód je:
Ahoj světe
Tento odstavec nebude ovlivněn.
Jak vidíte ve výše uvedeném výstupu, zahrnutím id = ”para1 ″ jsme byli schopni změnit barvu tohoto prvku na oranžovou. Další prvek, který to nemá, zůstává nedotčen.
Pokračujeme článkem CSS Selectors
Výběr třídy CSS
Pomocí selektoru tříd můžete vybrat prvky HTML, které mají konkrétní atribut třídy. Selektor můžete definovat pomocí tečky (symbol tečky), za kterou následuje název třídy. Například .intro vybírá prvky, kde je třída „intro“. Je třeba mít na paměti, že název třídy nikdy nemůžete začít číslem.
Zvažte následující kód:
.center {text-align: center color: pink}Tento nadpis je růžový a zarovnaný na střed.
Tento odstavec je růžový a zarovnaný na střed.
Výstupem výše uvedeného kódu je:
Tento nadpis je růžový a zarovnaný na střed.
Tento odstavec je růžový a zarovnaný na střed.
algoritmy a datové struktury v Javě
Pro konkrétní prvek můžete použít selektory tříd CSS. Pokud chcete stylovat pouze jeden konkrétní prvek, můžete spolu s voličem třídy použít název prvku.
Zvažte například následující kód:
p.center {text-align: center color: pink}Tento nadpis není ovlivněn
Tento odstavec je růžový a zarovnaný na střed.
Výstupem výše uvedeného kódu je:
Tento nadpis není ovlivněn
Tento odstavec je růžový a zarovnaný na střed.
Jak vidíte na výstupu, nadpis h2 není ovlivněn stylem. Protože jsme zadali „p.center“, styl bude ovlivněn pouze na odstavec.
Pokračováním tohoto článku o volbách CSS,
CSS Universal Selector
Tento typ selektoru lze považovat za zástupný znak, který vybírá všechny prvky na stránce. Vybírá všechny prvky na stránce a je specifikováno znakem „*“.
Zvažte například následující kód:
* {color: darkgreen font-size: 30px}Toto je test (menší písmo)
Toto je odstavec.
Výstup pro výše uvedený kód je:
Ahoj světe
Toto je test (menší písmo)
Toto je odstavec.
Jak vidíte na výstupu, všechny prvky, které jsou definovány pomocí selektoru skupin, mají stejnou definici stylu - jsou zarovnány na střed a barva písma je azurová.
co je podřetězec v Javě
Tím se dostáváme na konec tohoto článku.
Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás dotaz? Uveďte to prosím v sekci komentářů článku a my se vám ozveme.