CSS-selektor a jeho role při formátování html dokumentů

Vytváření vašeho webu a jeho plnění určitýmiprvky webové stránky, všichni jistě narazí na koncept, jako je volič CSS. Slouží k přesnému určení všech prvků html souboru, jejich designu a umístění na stránce. Chcete-li to provést, vytvořte dokument CSS, který předepisuje tyto nebo jiné voliče a parametry pro jejich formátování: barva, velikost, pozice a další. Každý webdesignér by měl vědět a být schopen správně zadat požadované voliče. Jsou rozděleny do typů, z nichž hlavní budeme uvažovat níže.

Typy selektorů v CSS

V závislosti na tom, který html prvek se formátování použije, volič CSS může odkazovat na jednu z následujících skupin:

• volič značek;
• volič třídy;
• id-selektor;
• atribut selector.

Značka výběru

Také se nazývá "volič typu" nebo "podleelement“, to je nejvíce jednoduchý a obyčejný. Jako jeho CSS-dokumentu jsou jména prvků HTML souboru, který popisujeme. Například, pokud budeme muset nastavit styl odstavce, určíme vlastnosti a jejich hodnoty pro prvek p { background: x; color: y; velikost :. z} V tomto případě jsou všechny odstavce webové stránky budou mít stejný formát (barva pozadí, velikost textu, atd ...).

Volič třídy

A co když musíte pro každý odstavec nastavit svůj vlastní styl jiný pro ostatní? K tomu je volič třídy.

Dokument CSS v tomto případě bude obsahovat následující položku: p.first {color: x; velikost písma: y}. Proto nastavíme vlastnosti "barva" a "velikost" pouze pro první třídu.

V html dokumentu v tomto případě zadáte nejprve atribut třídy s názvem stylu. Třídy mohou být stejně mnoho jako styly, které chcete použít na prvky webové stránky.

Selektor podle id

Často je potřeba definovat stylještě přesněji, například na jediný prvek stránky nebo na její vzorek. V takovém případě se id-selektor dostane k záchraně. V html souboru přiřadíme jméno požadovanému prvku, který ho identifikuje mezi ostatními. Například prvek, který chceme nastavit jiný než jiný styl, bude název článku.

V html dokumentu pak přiřadíme nadpis h1id, například articlename. A v souboru CSS nastavte styl přidáním mřížky před názvem identifikátoru: #articlename {color: blue; text-align: center}. Nyní bude náš titul mít modrou barvu a zarovnání ve středu.

Každá z výše uvedených typů lze volat"jednoduchý výběr CSS". Definují formátování pro určitý parametr html dokumentu: kolekce podobných prvků (například všechny odstavce článku), jednu třídu (například pouze první odstavec) nebo určitý prvek (například název článku).

Volič atributů

Kromě výše uvedených existují voliče CSSatributy je složitější způsob použití stylů. Umožňuje formátovat prvky html podle vybraného atributu nebo jeho hodnoty. Existuje několik druhů tohoto selektoru:

• přítomností atributu;
• přesnou hodnotu;
• částečnou hodnotou atributu;
• svým specifickým významem.

Podívejme se podrobně na každou z těchto odrůd:

1. První případ. Formátování se používá, pokud v html kódu existuje specifický atribut (mohou být p, div, hlavička a další). Pokud chybí, použije se univerzální styl pro všechny prvky. Například pro položky, které mají název (popiska).
2. Druhý případ. Styl je aplikován pouze na ty html prvky, které mají přesné shody hodnot atributů. Například na ty vstupní prvky, jejichž hodnota atributu type se rovná předání.
3. Třetí případ. Formátování je omezeno na položky s určitým slovem v seznamu hodnot. Například sidebar v atributu "class" prvků div.
4. Čtvrtý případ. Styl je určen pouze pro ty prvky html dokumentu, pro které určitý atribut má určitou hodnotu a začíná s ním. Například uplatnění specifikované barvy na všechny prvky, jejichž jazykem atributů je angličtina (to může být en, en-rus, en-au atd.).

Pomocí konkrétního voliče CSS můžete nejlépe navrhnout celou webovou stránku a popsat její jednotlivé prvky.