Syntaxe je následující: označujeme tečku (.“), za kterou zapíšeme název třídy. K ovládání prvního bloku používáme konstrukci .red. Druhá je .blue a tak dále.

Důležité! Pro atribut class se doporučuje použít jasné hodnoty. Za špatnou formu se považuje použití transliterace (například krasiviy-blok) nebo náhodných kombinací písmen/číslic (ojfh834871). V takovém kódu se určitě zmate, nemluvě o obtížích, kterým budou muset čelit ti, kteří budou na projektu pracovat po vás. Nejlepší možností je použít nějakou metodologii, jako je BEM.

Výhody: poměrně vysoká flexibilita.

Nevýhody - několik prvků může mít stejnou třídu, což znamená, že budou upravovány současně. Problém je řešen pomocí metodologie a také děděním preprocesorů. Ujistěte se, že ovládáte méně, sass nebo nějaký jiný preprocesor, výrazně vám zjednoduší práci.

Selektor podle ID

Názory návrhářů rozvržení a programátorů ohledně této možnosti jsou nejednoznačné. Nějaké učebniceCSSnedoporučuje se používat vůbecID,protože při neopatrném použití mohou způsobit problémy s dědičností. Mnoho odborníků je však aktivně umisťuje do celého značení. Vy rozhodnete. Syntaxe je: symbol hash ("# "), pak název bloku. Například,#Červené.

IDse liší od třídy v několika ohledech. Za prvé, na stránce nemohou být dvě stejné.ID.Jsou jim přiřazena jedinečná jména. Za druhé, takový volič má vyšší prioritu. To znamená, že pokud dáte bloku tříduČervenéa uveďte v tabulkáchCSSčervená a pak mu ji přiřaditid modréa zadejte modrou barvu, blok zmodrá.

Výhody – můžete ovládat konkrétní prvek, aniž byste věnovali pozornost stylům značek a tříd.

Nevýhody - snadno se splést ve velkém počtuIDAtřída.

Důležité! Pokud používáte metodiku BEM (nebo její analogy),IDObecně to nepotřebujete. Tato technika rozložení zahrnuje použití jedinečných tříd, což je mnohem pohodlnější.

Univerzální volič

Syntaxe: hvězdička („*“) a složené závorky, tj. *{}.

Používá se k přiřazení určitých atributů všem prvkům stránky najednou. Kdy se to může hodit? Například pokud chcete nastavit vlastnost stránkybox-sizing: border-box.Lze jej použít nejen k ovládání všech komponent dokumentu, ale také k ovládání všech podřízených prvků konkrétního bloku, např.div *().

Výhody - můžete spravovat velké množství prvků současně.

Nevýhody - není dostatečně flexibilní. Kromě toho může použití tohoto selektoru v některých případech zpomalit stránku.

Podle atributů

Umožňuje spravovat prvek s určitým atributem. Například máte několik vstupních značek s různým atributem typu. Jeden z nich je text, druhý je heslo, třetí je číslo. Samozřejmě můžete každému přiřadit třídy nebo ID, ale to není vždy vhodné. Selektory atributů CSS umožňují specifikovat hodnoty pro konkrétní značky s maximální přesností. Například takto:

vstup()

Tento selektor atributu vybere všechny vstupy s textem typu.

Nástroj je poměrně flexibilní, lze jej použít s libovolnými značkami, které mohou mít atributy. Ale to není všechno! Specifikace CSS umožňuje manipulovat s prvky ještě pohodlněji!

Představme si, že vaše stránka má vstup s atributem zástupný symbol = „Zadejte jméno“ a zástupný znak vstupu = „Zadejte heslo“. Lze je také vybrat pomocí voliče! K tomu slouží následující konstrukce:

input() nebo input

Je možná flexibilnější práce s atributy. Řekněme, že máte několik značek s podobnými atributy názvu (řekněme „Kaspické“ a „Kaspické“). Chcete-li vybrat oba, použijte následující selektory:

CSS vybere všechny prvky, jejichž název obsahuje znaky „Kaspiysk“, tj. „Kaspiyskiy“ i „Kaspiyskaya“.

Můžete také vybrat značky, jejichž atributy začínají určitými znaky:

nebo s nimi skončit:

{}.

Výhody - maximální flexibilita. Můžete vybrat jakékoli existující prvky stránky, aniž byste si museli pohrávat s třídami.

Nevýhody - používá se poměrně zřídka, pouze ve specifických případech. Mnoho návrhářů rozvržení dává přednost metodologiím, protože určení třídy může být snazší než uspořádání četných a rovnátek. Tyto selektory navíc nefungují v aplikaci Internet Explorer 7 a nižší. Kdo však nyní potřebuje starý Internet Explorer?

Selektory pseudotříd

Pseudotřída označuje stav prvku. Například :hover je to, co se stane s částí stránky, když je kurzor umístěn, :visited je navštívený odkaz. Patří sem také prvky jako:first-child a:last-child.

Tento typ selektoru se aktivně používá v moderním uspořádání, protože díky němu můžete stránku „oživit“ bez použití JavaScriptu. Chcete se například ujistit, že když najedete na tlačítko s třídou btn, změní se jeho barva. K tomu používáme následující konstrukci:

Btn:hover (

Barva pozadí: červená;

Pro krásu můžete v hlavních vlastnostech tohoto tlačítka určit vlastnost přechodu, například na 0,5s – v tomto případě tlačítko nezčervená okamžitě, ale na půl vteřiny.

Výhody - aktivně se používají k „oživení“ stránek. Snadné použití.

Nevýhody - nejsou žádné. Toto je opravdu pohodlný nástroj. Nezkušení návrháři rozvržení však mohou být zmateni množstvím pseudotříd. Problém je řešen studiem a praxí.

Pseudovoliče prvků

"Pseudo prvky" jsou ty části stránky, které nejsou přítomny v HTML, ale přesto s nimi lze manipulovat. Nerozumíte ničemu? Všechno je jednodušší, než se zdá. Například chcete, aby první písmeno v řádku bylo velké a červené, ale zbytek textu ponechat malý a černý. Samozřejmě můžete toto písmeno vložit do rozsahu s konkrétní třídou, ale to je dlouhé a nudné. Je mnohem jednodušší vybrat celý odstavec a použít pseudoprvek::první-písmeno. Umožňuje vám ovládat vzhled prvního písmene.

Pseudoprvků je poměrně velké množství. Je nepravděpodobné, že je bude možné uvést v jednom článku. Relevantní informace můžete najít ve svém oblíbeném vyhledávači.

Výhody - umožňují flexibilně přizpůsobit vzhled stránky.

Nevýhody – začátečníci se v nich často pletou. Mnoho selektorů tohoto typu funguje pouze v určitých prohlížečích.

Shrnout

Selektor je výkonný prostředek pro řízení toku dokumentu. Díky němu můžete vybrat naprosto každou komponentu stránky (i ty, které existují pouze podmíněně). Určitě se naučte všechny své možnosti nebo si je alespoň zapište. To je zvláště důležité, pokud vytváříte složité stránky s moderním designem a množstvím interaktivních prvků.

Poslední aktualizace: 21.04.2016

Definování stylu začíná selektorem. Například:

Div( šířka:50px; /* šířka */ výška:50px; /* výška */ barva pozadí:červená; /* barva pozadí */ okraj: 10px; /* odsazení od ostatních prvků */ )

V tomto případě je selektor div . Řada selektorů zdědí název formátovaných prvků, například div, p, h2 atd. Když je takový selektor definován, jeho styl bude aplikován na všechny prvky odpovídající tomuto selektoru. To znamená, že výše definovaný styl bude aplikován na všechny prvky