Voliče CSS a jejich typy

Voliče CSS jsou specifická struktura CSS, která vám umožňuje vybrat konkrétní prvek v kódu HTML a stylovat jej. Každá z nich má svou vlastní specifičnost, tj. Může překrývat jiné, "slabší" vlastnosti.

Volič CSS podle značky a třídy

Nejjednodušší voliče jsou podle značky a podle třídy. Volič značek je nejběžnější a vybere všechny položky se specifickou značkou. Například můžete zapsat následující kód CSS do vlastností: "p {color: blue}", kde "p" je značka odstavce a vlastnost "color: blue" označuje barvu textu. Výsledkem je, že text ve všech odstavcích bude modrý. Volič tagů lze oddělit čárkami a pak nebudete muset zapisovat vlastnost dvakrát.

Pokud jsou některým odstavcům přiřazena třída, např. "Modrá", může být odpověď voliče CSS ještě přesněji konfigurována. Jeho vstup do vlastností se však bude lišit - před názvem třídy se objeví tečka. To znamená, že chcete vybrat všechny odstavce, kterým je přiřazena "modrá" třída a zbarvovat je modrou, je třeba v CSS vlastnostech zapsat následující kód: ".blue: {color: blue}". Tento volič je specifičtější než selektor CSS podle značky a je silnější než je, ale je to jeden z nejjednodušších. Existují složitější pravidla, která vám umožní vybrat malé skupiny prvků.

Funkce výběru podle ID

Selektory podle id nebo podle id jsou přesnější než podle třídy a podle atributu. To znamená, že při použití v kaskádě "převáží" jiné podobné selektory. Identifikátory také pomáhají přesně vybrat určitý prvek v kódu, ale jejich použití v návrhu stránek je považováno za špatnou praxi mezi webovými designéry. Pouze ve velmi vzácných případech, například při vytváření posuvníku na CSS, je tato praxe přijatelná. Faktem je, že na jedné stránce může být pouze jeden prvek se specifickým identifikátorem. V důsledku toho, díky jedinečnosti selektoru CSS podle id, lze jej použít pouze pro jeden prvek. V tomto případě je mnohem logičtější používat třídy než identifikátory.

Různé názory na selektor id

Existuje však i opačný názor, že identifikátor pomáhá identifikovat tento kód na stránce, který by měl být v jediné kopii. Současně, přestože je možné ji nahradit, je třeba je použít pro velké skupiny prvků a na místech, kde je požadována přesnost, je lepší použít id. Každý psací stroj má právo rozvíjet své osobní názory na tento problém a psát kód ve svém vlastním stylu. Při psaní voliče na id před ním je použit symbol "#". To znamená, že řádek kódu bude vypadat takto: "#blue: {color: blue}". Při takovém záznamu bude prvek s označením "# blue" malován modře.

Kaskádové použití

Při použití voličů CSS podle id v HTML můžete použít také kaskádní vlastnost. Pokud například potřebujete vybírat nějaký podřízený štítek uvnitř tagu s identifikátorem a změnit jeho vlastnosti, musíte nejprve napsat jméno identifikátoru s mřížkou, potom s podřízenou značkou a jejími vlastnostmi. Takové voliče se nazývají vnořené. To znamená, že řádek kódu bude vypadat takto: "# p p {color: blue}". Potom uvnitř rodičovského prvku s tímto identifikátorem v odstavci podřízený text změní barva textu na modrou.

Použití dětských selektorů

Další možnost použití kaskády pro změnu vlastností podřízených prvků se používá, pokud potřebujete vybrat pouze určitou část kódu. Také se nazývá volič potomků. Chcete-li například vybrat odstavec v řádku tabulky, použijte následující položku voliče CSS: "ul li> p: {color: blue}". Stojí za to věnovat pozornost skutečnosti, že čím delší je záznam, tím vyšší pravděpodobnost, že budete moci změnit určitou vlastnost prvku, protože se stane pro kaskádu větší prioritou. Například prvky s nějakou jinou vlastností selektoru CSS na třídě, která je nadřazená, zcela nezmění jejich vlastnosti. Pouze určitá část textu v seznamu bude překreslena.

Výběr sesterských prvků

Dalším zajímavým způsobem, jak použít kaskádování, jsou sousední selektory CSS. Zaznamenávají se jako součet voličů: "span + a {color blue}". V tomto případě je sousedem ten, pod nímž je jiný, který odpovídá potřebným parametrům. Pokud tedy v kódu existují tři prvky, pak vlastnost nebude aplikována na první z nich, protože nemá sousední a všechny další, ano. Je to kvůli ikonu součtu, když jsou přidány další voliče, nikoliv předchozí. Takový záznam pomáhá snížit kód a nepsat několik CSS voličů pro různé tagy a používat je pro ně stejné vlastnosti. Je-li druhý prvek seznamu také nastaven na třídu a záznam je změněn na ".class + a {color blue}", začne odpočítávání od něj a vlastnosti budou změněny pro další prvky odpovídající pravidlu a první dva zůstanou stejné.

Nyní předpokládejme, že v našem kódu existují tři identické značky s různými třídami a musíte vybrat všechny prvky po určité konkrétní. V tomto případě nepomůže použití pouze výběrů značek CSS. Chcete-li to provést, použijte následující volič: ".class ~ div". Tím se vybírají prvky s tagem div, který se řídí zadanou třídou. Pokud chceme vybrat nejen prvky s tagem div, ale všechny následující, namísto tagu po značce tilde je třeba umístit hvězdičku - "*". Takový záznam bude znamenat, že je třeba vybrat vše, co následuje po dané třídě. Můžete vybrat všechny prvky na stránce obecně, pokud ponecháte pouze hvězdičku jako volič.

Výběr atributů CSS

Předpokládejme, že v našem kódu existují prvky s některými atributy, ale všechny se navzájem liší a jsou napsány pomlčkou a musíme vybrat všechny ty, jejichž název začíná určitým slovem, například "selector" a třídy jsou odděleny znaménko "-". Co dělat v tomto případě? Položka voliče začíná hranatými závorkami, kde je nejprve napsán název atributu, poté vertikální lomítko, znaky "=" a "selektor" znamenají: "data- | = selektor". Poté napište požadovanou vlastnost, kterou chcete změnit. Výsledkem je vybrání prvku se zadanými parametry. Při změně tříd můžete změnit vlastnosti určitých částí kódu. Pokud názvy tříd nejsou napsány pomlčkou, ale jedním slovem, mohou být také vybrány, ale pomocí trochu jiného záznamu. V tomto případě je vertikální lomítko nahrazeno symbolem "^": "data ^ = selektor". Tento volič vybere podřetězce se začátkem názvu třídy.

Jak vybrat prvek s určitým koncovým názvem třídy

Teď budeme jednat jinak a vybírat části kódu ne na začátku popisu třídy, ale posledními písmeny ve svém názvu. K tomu potřebujeme ikonu dolaru. Vložíme je na místo zaškrtávacího pole a za znaménkem rovnosti napíšeme konec názvu třídy: "data $ = ctor". Prvky s touto kombinací písmen nyní vyberou určité vlastnosti a použijí je. Můžete zvolit libovolný atribut. Pojďme analyzovat, co dělat, když potřebujeme najít nějaký prvek s nějakou kombinací dopisů uprostřed slova. V tomto případě změníme znak dolaru na hvězdičku a po rovnoměrném znaménku zapíšeme potřebná písmena: "data * = ct".

Pseudotřídy - speciální selektory

Pro odkazy se obvykle používají speciální selektory CSS, které zobrazují různé stavy: klidné, zaměřené, aktivní, předané - nazývají se pseudotřídami. Pseudotřída pro aktivní odkaz, na které směřuje kurzor, je napsán takto: "a: active". Dále existují některé vlastnosti, nejčastěji se mění pozadí nebo se přidává stín. Pokud přidáte tuto vlastnost k odkazu a kliknete na něj, změní jeho barvu na zadanou. Další pseudotřídní - ukázka ukazuje, že odkaz již byl předán. Je napsáno takto: "a: hover".

Funkce aktivních a zaostřovacích stavů

Aktivní je často zaměňována s jiným stavem. Nahrává se takto: "a: focus" a označuje aktivní stav tlačítka při práci z klávesnice. To znamená, že pokud použijete klávesu TAB, aktivní odkaz bude zvýrazněn speciální barvou. Tato vlastnost musí být použita, protože ne všichni uživatelé mohou používat myš k navigaci na webu. Některé mohou mít špatný zrak nebo jiné zdravotní omezení, takže se mohou pohybovat po stránce pomocí klíče nebo speciálních zařízení. Ignorování stavu tlačítka ve fokusu je velkou nevýhodou pro takový parametr v návrhu webových stránek jako přístupnosti a má významný dopad na jeho účast určitou kategorií uživatelů. Při běžné navigaci myší se spojení stává aktivní i zaostřeno. Při stylování je proto důležité věnovat pozornost tomu.

Pseudo-prvky

Pseudo-prvky vám umožňují definovat konkrétní styly bez definování v samotné struktuře HTML. Jsou napsány takto: název selektoru, znak "::", název pseudo-prvku. Nejběžnější prvky jsou "před" a "po". Mají vlastnost "obsah", nelze je aplikovat na interní styly. Po přidání obsahu je třeba za obsah konkrétní položky přidat určitý obsah. Co přesně musí být vloženo, je zaznamenáno v vlastnostech obsahu. Stejně tak pseudo-element "před" přidává obsah před obsahem prvku. Použití těchto speciálních přepínačů vám umožní snížit kód a neukládat novou strukturu pokaždé, když se na nějakou část z nich, pokud potřebujete přidat malý detail na konkrétní místo v kontejneru. Často se používají při stylingových stránkách a přidávají nějaké dekorativní prvky. Kombinace všech těchto možností pomáhají vytvářet neobvyklé efekty na stránce a značně pomáhají práci návrháře rozvržení.