Voliče CSS a jejich typy

CSS selektory jsou specifické CSS struktury, které vám umožní vybrat konkrétní prvek v kódu HTML a stylizovat jej. Každá z nich má svou vlastní specifičnost, to znamená, že se může překrývat s vlastnostmi ostatních, více "slabých".

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

Nejjednodušší voliče - podle značky a třídy. Volič na tagu je nejběžnější a vybere všechny prvky s určenou značkou. Například můžete psát vlastnosti kódu CSS následujícího formuláře: p {color: blue} ", kde" p "je značka odstavce a barva: modrá vlastnost označuje barvu textu. Výsledkem je, že text v odstavcích bude modrý. Voliče podle značky mohou být počítány čárkou, pak nebudete muset zapisovat vlastnost dvakrát.


Pokud jsou některým třídám přiřazena určitá třída, např. "Modrá", volič CSS lze nastavit ještě přesněji. Ale jeho zápis do vlastností bude jiný - před názvem třídy se objeví bod. To znamená, že chcete vybrat všechny odstavce, které jsou přiřazeny modré třídě a barvy je modře, vlastnosti CSS by měly být napsány takto: ".blue: {color: blue}". Tento volič je specifičtější než volič CSS podle značky a je silnější než ten, ale je to nejjednodušší. Existují složitější pravidla, která vám umožní vybrat malé skupiny prvků.

Vlastnosti selektorů s identifikátorem

Selektory pro id nebo id jsou specifičtější než třída a atribut. To znamená, že když jsou používány v kaskádě, budou "vyvažovat" jiné podobné selektory. Identifikátory vám také pomohou přesně vybraturčitý prvek v kódu, ale jejich použití v návrhu stránek je považováno za špatnou praxi mezi plánovateli. Pouze ve velmi vzácných případech, jako je vytvoření posuvníku na CSS, je tato praxe nepřijatelná. Faktem je, že na jedné stránce může být pouze jeden prvek s určitým identifikátorem. Proto vzhledem k jedinečnosti selektoru id CSS může být použit pouze pro jeden prvek. V tomto případě je mnohem logičtější používat třídy, nikoli identifikátory.

různé názory na selektoru hodnota ID až

, ale tam je opačný názor, který pomáhá identifikovat číslo fragment kódu na straně, která by měla být jediná kopie. V tomto případě, i když třídní přepínače ji mohou nahradit, měly by být použity pro velké skupiny prvků a na těch místech, kde je třeba přesnosti, je lepší použít id. Každý řemeslník má právo rozvíjet svůj osobní názor na toto téma a napsat kód ve svém vlastním stylu. Při psaní selektoru podle id se před ním používá znak "#". To znamená, že kódová čára bude vypadat takto: "#blue: {color: blue}". S touto položkou bude položka s ID #blue malována modře.

Použití kaskády

Při použití voličů HTML CSS na id můžete také použít vlastnost kaskády. Například, pokud je uvnitř ID tag vybrat dětskou značku a změnit jeho vlastnosti, je třeba nejprve nahrát název ID sítě, pak dítě tag a jeho vlastnosti.Tyto voliče se nazývají vnořené. To znamená, že kódová řada bude vypadat takto: #id p {color: blue}. Pak se barva textu uvnitř nadřazeného prvku s tímto identifikátorem v odstavci podřízený změní na modrou.

Použití selektorů podřízených prvků

Další možností pro použití kaskády pro změnu vlastností podřízených prvků je použití, pokud potřebujete vybrat pouze určitou část kódu. To je také nazýváno selektorem potomků. Chcete-li například vybrat odstavec uvnitř řádku tabulky, použije se následující položka voliče CSS: "ul li & gt; p: {color: blue} ". Stojí za to věnovat pozornost skutečnosti, že čím delší je záznam, tím vyšší je pravděpodobnost, že bude možné změnit určitou specifickou vlastnost prvku, protože se stane pro kaskádu větší prioritou. Například prvky s jinými vlastnostmi nadřazeného voliče CSS nezmění své vlastnosti jako celek. Pouze určitá část textu v seznamu je malovaná.

Výběr sesterských prvků

Dalším zajímavým způsobem, jak používat kaskádování - další voliče CSS. Jsou zaznamenány jako součet selektorů: "span + a {color blue}". V tomto případě je sousedem ten, pod kterým je jiný, odpovídající požadovaným parametrům. Pokud tedy v kódu existují tři prvky, pak vlastnost se nevztahuje na první, protože nemá souseda a na všechny následující - tak. K tomu dochází prostřednictvím ikony částky, když jsou vytvořeny následující voliče, nikoliv předchozí. Tato položka pomáhá snížit kód a nenahrává několik voličů CSS pro různétagy, které jim používají stejné vlastnosti. Je-li druhá položka seznamu určit další třídu a změnit vstupní «.class + výši {} modrou barvu», zatímco počítání bude trvat od ní a měnit vlastnosti těchto prvků se vešly pravidlo, a první dva zůstávají stejné.

Nyní předpokládejme, že v našem kódu existují tři identické značky s různými třídami a je třeba vybrat všechny prvky po nějaké definici. V takovém případě nebude fungovat pouze volba značek CSS. Pro tento účel je použit selektor následujícího typu: ".class ~ div". Tím se vybírají položky s tagem div, které se pohybují po dané třídě. Pokud zvolíme ne pouze položky se značkou div, ale všechny tyto namísto tagu po tilda znamení by měl být kladen hvězdička - „*“. Takový záznam bude znamenat, že musíte vybrat vše, co následuje po dané třídě. Můžete všechny položky na stránce vybrat vůbec, pokud necháte hvězdičku jako volič.

voliče na CSS atributu

Předpokládejme, že v našem kódu obsahuje prvky s určitými atributy, ale všechny jsou odlišné od sebe navzájem a jsou psány s pomlčkou, a musíme vybrat ty s názvem třídy začíná určitá slova například "volič" a třídy jsou odděleny znaménkem "-". Co mám dělat v tomto případě? Volič rekord začíná s držáky, kde první zaznamenaný název atributu, pak vertikální lomítko znak „=“ a «voliče»: «Datové | = selektor». Pak napíšeme požadovanou vlastnost, kterou chcete změnit. V důsledku toho je položka vybrána s danými položkamiparametry. Změnou 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 položku s určitým konci v názvu třídy

Nyní dělat jinak a vybrat ty části kódu od začátku popisy třídy a poslední písmeno svého jména. K tomu potřebujeme dolarový odznak. Dali jsme ho na místě klíště a po rovnítka psaní názvu maturitní třída: «dat $ = ctor». Nyní budou vybrány prvky s touto kombinací písmen a na ně budou aplikovány určité vlastnosti. Můžete zvolit libovolný atribut. Podívejme se, jak postupovat, když potřebujeme najít nějaký prvek s nějakou kombinací dopisů uprostřed slova. V tomto případě změňte znak dolaru na hvězdy, a pak psát rovnítko jsou požadovány písmena: «údaje * = ct».

Pseudo - speciální selektory

Zvláštní odkazy běžně používaných CSS stylu selektory, které odrážejí jejich různý podmínku: klidný, soustředěné, aktivní cestoval - Nazývají se pseudotříd. Pseudotřída pro aktivní odkaz, ke kterému je kurzor zobrazen, je napsán jako "a: active". Následuje několik vlastností, nejčastěji změny pozadí nebo přidání stínu. Pokud tuto vlastnost přidáte na odkaz a kliknete na něj, změní se jeho barva na danou. Další pseudotřídní vznášadlo ukazuje, že odkaz už prošel.Nahrává se jako "a: hover".

Funkce aktivních stavů a ​​zaostření

Aktivní jsou často zaměňovány s jiným stavem ostření. Napíše: "a: focus" a označuje aktivní stav tlačítka při práci s klávesnicí. To znamená, že pokud použijete klávesu TABLES, aktivní odkaz bude zvýrazněn ve zvláštní barvě. Tato vlastnost musí být použita, protože pomocí myši k navigaci na webu nemusí všichni uživatelé. Některé mohou mít špatné vidění nebo jiné zdravotní omezení, takže se pohybují po stránce pomocí klíče nebo speciálních gadgetů. Ignorování stavu zaostřeného tlačítka je pro tento parametr velkou nevýhodou pro návrh místa, jako přístupnost a má významný dopad na jeho účast specializované kategorie uživatelů. Při běžné navigaci pomocí myši se spojení stává aktivní i zaostřeno. Při stylingových prvcích je proto důležité věnovat pozornost tomu.

Pseudo-elementy

Pseudo-elementy umožňují specifikovat speciální styly bez definování v samotné struktuře HTML. Jsou zaznamenány následovně: název selektoru, znak "::", název pseudo-prvku. Nejběžnější prvky "před" a "po". Mají vlastnost "obsahu", nelze je aplikovat na interní styly. Po zašifrování je nutné přidat obsah za obsah konkrétní položky. Co přesně chcete vložit, je zapsáno do vlastností "obsahu". Stejně tak pseudo-element "před" přidává obsah k obsahu prvku. Použití těchto speciálních přepínačů umožňuje snížit kód a ne vždy psát novýstrukturu některé části, pokud chcete přidat malý detail na konkrétní místo kontejneru. Často se používají při stylingových stránkách a přidávání některých dekorativních prvků. Kombinace všech těchto možností pomáhají vytvářet neobvyklé efekty na stránce a značně pomáhají řemeslníkovi.

Související publikace