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

Vytvořením vašeho webu a jeho naplněním určitými prvky webové stránky se všichni jistě setkávají s konceptem, jako je selektor 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 "podle prvku", je to nejjednodušší a nejběžnější. Jako jeho název v dokumentu CSS jsou názvy těch prvků html souboru, který popisujeme. Pokud například chceme určit styl odstavce, zadáme vlastnosti a jejich hodnoty pro prvek p {pozadí: x-color: y-size: z}. V tomto případě budou všechny odstavce webové stránky mít stejné formátování (barva pozadí, text, velikost 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-font-size: 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 třeba definovat styl ještě přesněji, například na jeden 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 hlavičku h1 identifikátor, například artiklu. 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 nazvat "jednoduchým voličem 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ů

Navíc k výše uvedeným existují selektory atributů CSS - 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í titul (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.