Volič
Univerzální volič

Osnova kódu CSS vypadá takto:

Selektor (vlastnost CSS: hodnota; vlastnost CSS: hodnota; ... atd.)

V univerzálním voliči hvězdička * funguje jako volič:

* (Vlastnost CSS: hodnota; Vlastnost CSS: hodnota; ... atd.)

Univerzální volič, ovlivňuje všechny značky dokumentu HTML najednou.

Můžete například odstranit veškeré odsazení a odsazení ze všech značek v dokumentu HTML:

* (okraj: 0; výplň: 0;)

Řekněme, že máme dokument HTML obsahující následující kód:

Levhart sněžný

následujícím způsobem.

Univerzálním selektorem změňme barvu písma všech značek na zelenou zelenou, název písma arial, styl písma šikmý.

Levhart sněžný

Levhart sněžný (irbis, ak leopard) je velký dravý kočkovitý savec. Žije v pohořích Afghánistánu, Barmy, Bhútánu, Indie, Kazachstánu, Kyrgyzstánu, Číny, Mongolska, Nepálu, Pákistánu, Ruska, Tádžikistánu a Uzbekistánu. Irbis se vyznačuje tenkým, dlouhým, pružným tělem, relativně krátkými nohami, malou hlavou a velmi dlouhým ocasem. Délka sněžného leoparda s ocasem je 200-230 cm, hmotnost do 55 kg. Barva srsti je světlá, kouřově šedá s prstencovitými nebo celistvými tmavými skvrnami.

Levhart sněžný loví především horské kozy a berany, v jeho potravě se vyskytují i ​​divočáci, bažanti a dokonce i gophery. Vzhledem k nepřístupnosti biotopu tohoto druhu jsou sněžní leopardi stále špatně pochopeni. Jejich počet se však podle hrubých odhadů pohybuje kolem 10 tisíc jedinců. Od roku 2013 je lov sněžných leopardů obecně zakázán.

Stránka v prohlížeči bude vypadat takto.

Můžete také experimentovat s paddingem, udělat nejprve 0 a poté 15px, přidat to do kódu CSS.

• Úkolem, který se provádí, je výběr všech položek. Obecně platí, že všichni.
• Označení - symbol hvězdičky - *.
• Příklad použití:

ve výchozím nastavení resetovat odsazení pro všechny prvky

Zjistěte více o univerzálním voliči

Zavedeno v CSS od verze 2. Odpovídá libovolnému prvku v. Proto se styly určené pro univerzální selektor aplikují na všechny prvky najednou. Z tohoto důvodu vám doporučuji používat jej velmi opatrně – může se dostat do problémů při dědění stylů. Nebo spíše nepředvídatelné (pro nezkušeného kodéra) chování. Podrobněji se tomuto bodu budeme věnovat v části o dědictví.

Další vlastností univerzálního selektoru je, že pokud je použit ve spojení s jiným selektorem (například selektorem třídy, identifikátoru nebo atributu) jako součást jednoduchého selektoru, lze jej beztrestně přeskočit. To je asi totéž, jako kdybychom řekli jednoduše „dromedárové jsou jednohrbí velbloudi“ namísto „Všichni dromedáři jsou jednohrbí velbloudi“. Význam se nezměnil.

Příklad:

* .error (barva: červená;) .error (barva: červená;) / * tato dvě pravidla jsou ekvivalentní. Univerzální volič je přeskočen ve druhém případě * /

Oblast použití

Ve skutečnosti je nejpohodlnější použít univerzální selektor, jako v prvním příkladu, k resetování počátečních hodnot stylů závislých na prohlížeči (zejména odsazení).

Ale ani tato aplikace se ne vždy ukáže jako dobrý nápad. Vzhledem k nedostatkům univerzálního voliče popsaného v tomto článku je lepší použít. To znamená, že použijte selektory typu.

Tak jsme se hladce dostali k dalšímu tématu. S univerzálním voličem to, zdá se, vyřešilo. Je čas jít dál. Příští zastávka - .

Dobrý den, milí čtenáři tohoto blogu. Dnes budeme pokračovat v plnění těch našich materiálů a začneme se bavit o tak zásadní věci, jako jsou selektory v jazyce CSS.

Je jich sedm typů – tag, class, Id, universal, atributy, dále pseudotřídy a pseudoprvky. Trochu moc, ne? No nic, pomalu si je všechny rozebereme a s tím i na podrobných příkladech.

V předchozích publikacích jsme již zvažovali a také se seznámili s jednotkami velikostí, například jsme se dozvěděli o principech dědičnosti v CSS. No, dnes, jak jsem řekl, otevíráme velmi vážnou kapitolu studia značkovacího jazyka stylu.

CSS tag a selektory tříd

Před prostudováním pravidel stylu budete muset vědět, jak a podle jakých principů nastavit ty štítky, podle kterých prohlížeč pochopí, na které prvky Html kódu je třeba aplikovat. Existují různé selektory. Nejjednodušší, z hlediska porozumění, použijte názvy značek, na které se budou muset aplikovat pravidla CSS napsaná za nimi.

Tento příklad použije červenou pro barvu písma a šedou pro výplň pozadí pro všechny značky P odstavců. Každé pravidlo CSS může mít několik selektorů najednou. Jak je v tomto případě bude třeba číst? Je vždy zprava doleva, tj. začněte nejblíže k otevírací složené závorce.

Ve výše uvedeném příkladu první řádek zobrazuje selektor tagu (prvku), který říká, že barva písma má být červená pro všechny prvky Div.

Obsah běžného kontejneru Div

Na druhém řádku vidíme příklad komplexního selektoru, ve kterém máme nový prvek jako třída (třída)... Je předepsáno v kvalitě. Jako hodnotu pro třídu můžeme použít libovolný název pomocí symbolů ,,, [_], [-].

Ale kromě třídy se Id používá také ve značkovacím jazyce stylu. Jaký je rozdíl mezi třídou a ID? Hodnota posledně jmenovaného musí být jedinečná, protože Id je jedinečný identifikátor pro Html tag a jeho název (hodnotu) lze v kódu použít pouze jednou.

A hodnota pro třídu není jedinečná a lze ji použít pro libovolný počet prvků v kódu. Tito. různé značky (Div, P, H1 atd.) mohou mít stejnou hodnotu pro atribut třídy:

Jak se používá v selektorech CSS? Ukázalo se, že jeho jméno je napsáno tečkované dopředu.

Když tedy v kódu CSS vidíme něco začínajícího tečkou, okamžitě pochopíme, že mluvíme o třídě. Pokud vezmeme v úvahu příklad zobrazený na snímku obrazovky, nyní ve všech prvcích Html kódu, kde bude napsáno „class“ s hodnotou „Blue“, bude text zbarven modře.

To se ale vůbec nestane, protože jsme zvolili název třídy „Blue“. Můžete si to pojmenovat, jak chcete (i „xyz“), a barva v našem příkladu je nastavena přesně tak, jak je přiřazena selektoru s touto třídou. Doufám, že je to jasné? Změňme název (hodnotu) třídy v příkladu:

Odstavec s textem

Odstavec s textem

Tito. nyní máme třídu XYZ a pro ni napsané pravidlo:

Xyz (barva: modrá)

obarvil text odstavce modře. Tento příklad to dále zdůrazňuje název pro atribut třídy lze použít jakýkoli. Nicméně pokračujme.

Podívejme se ještě jednou na příklad toho, jak se v CSS používají selektory značek a tříd. Představme si, že máme následující pravidla stylu:

Div (barva: červená) div.a123 (barva: zelená) .xyz (barva: modrá)

A také si představte, že v Html kódu máme následující prvky:

V souladu s předepsanými pravidly pro uvedené selektory by obsah daných prvků Html kódu měl vypadat takto:

Nyní se podívejme, proč prohlížeč takto interpretoval styling těchto prvků Html kódu. Pro první kontejner Div, ve kterém není zapsána žádná třída, bude platit pravidlo CSS platné pro všechny kontejnery: div (barva: červená). Proto bude jeho obsah zbarven červeně. Co bylo třeba ukázat.

V tagu druhého Div máme zaregistrovanou třídu "a123". V tomto případě se použijí pravidla CSS odpovídající "div.a123" (protože máme pouze značku Div s atributem class = "a123" zapsaným v ní). Proto bude obsah druhé nádoby zbarven zeleně.

Pravděpodobně jste si ale všimli, že první pravidlo CSS „div (barva: červená)“ lze použít i na druhý prvek Div, protože je určeno pro všechny kontejnery bez výjimky. Ukazuje se rozpor, který se v CSS řeší zavedením konceptu.

Budeme o tom hovořit podrobně o něco později, ale zatím jen řeknu, že priorita "div.a123" (pro druhý Div v tomto příkladu) bude vyšší.

Mimochodem, podobná situace nastává u třetího Div z našeho příkladu. Hodí se pro něj dvě možnosti najednou: selektor tagu „div“ a selektor třídy „.xyz“. Opět z důvodů, které jsem zatím nevysvětlil (přečtěte si o tom na výše uvedeném odkazu), bude priorita toho druhého vyšší, takže obsah třetího kontejneru bude zbarven modře.

Pokračujme. Ve výše uvedeném příkladu máme další značku odstavce P, která je napsána class = "a123". Ukazuje se, že tento prvek nespadá pod žádný ze tří selektorů, které jsme napsali (všem třem chyběl).

Má pouze přesah s druhou možností, ale tento selektor bude použit pouze pro tagy Div s třídou a123, nikoli tag odstavce P. V důsledku toho zůstane barva textu v tomto odstavci výchozí, tzn. Černá.

Dále v příkladu máme prvek odstavce s class = "xyz". Bude na něj aplikováno poslední CSS pravidlo „.xyz (barva: modrá)“. Proto bude text v tomto odstavci zbarven modře. Tady je, myslím, vše jasné.

Obecný volič a jedinečné ID

Nyní přejděme k ID, které jsem již zmínil. Když něco vidíme v kódu CSS přední mřížka (hash), pak to znamená, že máme co do činění s Id:

Obvykle je tento selektor napsán bez uvedení značky, na který odkazuje (první možnost v příkladu uvedeném výše), i když druhá možnost pravopisu je také přijatelná, ale používá se zřídka. Důvodem je skutečnost, že hodnota atributu Id v kódu bude jedinečná, což znamená, že nemohou existovat dva prvky se stejnými hodnotami Id. Tito. nemá smysl upřesňovat, i když to není zakázáno.

Obvykle tedy napíšou jen hash (lattice) a hned za něj hodnotu (název) atributu Id. Předpokládejme, že máme pro Id následující pravidlo:

#záda (barva: červená)

a kód obsahuje následující fragment:

což v důsledku použití pravidla po "#back" bude prohlížečem interpretováno následovně:

Kontejner div s jedinečným ID

CSS také poskytuje univerzální volič označený hvězdičkou, což ukazuje, že toto pravidlo bude obecně platit pro jakýkoli prvek v kódu:

* (Černá barva)

V tomto případě bude text uzavřený v libovolné značce černý (výchozí barva). Je jasné, že všechny ostatní selektory (tagy, třídy a Id) budou mít vyšší prioritu než ten univerzální.

Selektory atributů a jejich budoucnost v moderním CSS

Všechny výše popsané možnosti (tag, class, Id a generic) budou fungovat v naprosto všech prohlížečích. Jsou ale i další možnosti, které ne všude fungují.

Tento typ zahrnuje selektory atributů, které jsou velmi pohodlné a umožňují výrazně rozšířit a zároveň zjednodušit možnosti bodové akce na, které ale bohužel není 100% podporován všemi prohlížeči.

Jak si jistě pamatujete, v jazyce Html uvnitř značek můžeme používat různé atributy, které nám umožňují dát určité vlastnosti obsahu těchto prvků samotných. Proto by bylo logické používat v CSS jako selektory nejen názvy značek, ale také názvy atributů.

Ve skutečnosti jsme to již udělali, když jsme zvažovali třídu a Id, protože to byly v podstatě atributy některých značek. Jde jen o to, že Aidi a Klass jsou velmi důležité v rozložení a byly rozděleny do samostatných skupin, z nichž každá má svou vlastní syntaxi.

A jak použít další atributy existující v jazyce Html (ne Id a ne class) v selektorech? Docela jednoduché - uzavřete je do hranatých závorek:

(barva: zelená)

Nyní bude mít každá značka v Html kódu, která bude mít „title“, barvu textu zelenou.

Velmi pohodlné podle mého názoru. Ale celý problém s používáním selektorů atributů je v tom v IE 6 a nižších nefungují obecně, nebo fungují, ale jen částečně. Dokud nebude podíl uživatelů surfujících na internetu pomocí IE 6 nulový, je nepravděpodobné, že by tato pohodlná metoda byla široce používána v rozložení. Ale přesto musíte o jejich existenci vědět a umět je používat.

Jak můžete vidět z příkladu, nezáleží na tom, zda má atribut zadaný ve selektoru nějakou hodnotu nebo je prázdný. Ale to není zdaleka vše, co se s ním dá dělat, protože tohle je jen píseň.

Můžete v nich uvést nejen název atributu, ale také jeho hodnotu:

(barva: zelená)

V důsledku toho budou pravidla CSS napsaná pro takový selektor použita pouze pro značku, která má „title“ s hodnotou „První odstavec“ (v našem příkladu to bude druhý řádek):

Popsaný příklad byl přísná rovnost, ale tento selektor můžete napsat takto:

(barva: zelená)

Že. toto pravidlo CSS se bude vztahovat pouze na ty prvky kódu Html, které mají v názvu slovo „odstavec“ (v našem příkladu to bude druhý a třetí řádek):

Interprety syntaxe selektoru atributů «~=» jako „obsahuje celé slovo“. Například pro prvek s title = "(! LANG: Druhý odstavec" CSS правило «color:green» уже применяться не будет.!}

Ale můžete místo toho dát «*=» a pak budou zohledněna nejen jednotlivá slova zadaná ve selektoru, ale také části slov (jakýkoli kus textu obsažený kdekoli v atributu):

(barva: zelená)

V tomto případě a pro prvek s title = "(! LANG: Druhý odstavec" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (cokoli, co začíná hodnotou v závorkách), což pomáhá vytvořit selektor atributu, jako je tento:

(červená barva)

Pravděpodobně si pamatujete, že atribut má označovat. Interní odkazy na webu jsou tedy poměrně často relativní a externí odkazy, jinak, jak je učinit absolutními, nebudou fungovat.

Všechny externí odkazy proto budou začínat „http“ a interní odkazy lze zadat v relativním tvaru bez použití „http“. Že. selektor zapsaný v našem příkladu umožní obarvit všechny externí odkazy na webu(vše absolutní) v červené barvě. No a ty relativní, které neobsahují "http", zůstanou ve výchozí barvě. Podle mě super!!!

Jak vidíte, selektory atributů nám dávají spoustu možností a to, že se zatím moc nepoužívají, je zásluha velmi ubohé a uražené společnosti Melkosoft, a zejména jejich duchovního dítěte IE 6. Ale pomalu se začínají používat v CSS a brzy si samozřejmě proniknou do života.

Ano, je tu ještě jeden operátor «$=» - cokoli, co končí uvedenou hodnotou:

(barva: zelená)

Výsledkem je, že druhý a třetí řádek z našeho prvního příkladu budou obarveny zeleně. hodnoty „title“ končí „raf“. Takto by selektory atributů fungovaly úžasně v moderním CSS, kdyby nebylo určitého procenta uživatelů IE 6.

Ve skutečnosti ze všech typů zbývá vzít v úvahu pouze dva:. Chci to ale přenést do dalšího článku, kde si povíme i o jejich různých kombinacích.

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás to zajímat

Selektory pseudotříd a pseudoprvků v CSS (hover, first-child, first-line a další), vztahy mezi tagy v Html kódu
Priority CSS a posílení s důležitými, kombinacemi selektoru a seskupením, vlastními a autorskými styly
Styl seznamu (typ, obrázek, pozice) - Pravidla CSS pro přizpůsobení vzhledu seznamů v Html kódu
Pozadí v CSS (barva, pozice, obrázek, opakování, příloha) - vše pro nastavení barvy pozadí nebo obrázku na pozadí Html prvků
CSS - co to je, jak jsou kaskádové styly propojeny s html kódem pomocí Style a Link
Jednotky velikosti (Pixely, Em a Ex) a dědičnost pravidel CSS
K čemu slouží CSS, jak propojit kaskádové styly s Html dokumentem a základy syntaxe tohoto jazyka
Padding, Margin and Border - nastavujeme vnitřní a vnější okraje v CSS, stejně jako okraje pro všechny strany (nahoře, dole, vlevo, vpravo) Jak nastavit střídající se barvu pozadí řádků tabulek, seznamů a dalších prvků Html na webu pomocí pseudotřídy nth-child
Jak najít a odstranit nepoužívané stylové řádky (extra selektory) v souboru CSS vašeho webu
Zobrazení (blok, žádné, inline) v CSS - nastavte typ zobrazení Html prvků na webové stránce

Někdy je při vytváření webu nutné použít specifický styl na všechny prvky, které se na stránce nacházejí, bez výjimky. K provedení tohoto úkolu se používá univerzální selektor.

Popis

Označuje se jako symbol "*". S jeho pomocí můžete vybrat všechny značky na stránce najednou, aniž byste museli provádět opravy pro jejich účel a vnořování. Například:

* (velikost písma: 18px;)

Tímto záznamem jsme všem prvkům s textem přidělili výšku písma 18 pixelů.

Pojďme se na to podívat blíže. Až do druhé verze CSS neexistoval žádný univerzální selektor. Shoduje se se všemi prvky, takže styly, které bude mít, se na ně použijí současně. Při používání tohoto voliče buďte velmi opatrní. Tato opatrnost je způsobena možným výskytem obtíží při dědění stylů, respektive jejich nepředvídatelným chováním.

Za zmínku také stojí, že použití třídy, identifikátoru, atributu umožňuje přeskočit univerzální selektor bez jakékoli újmy. Například:

*. vlevo (ohraničení: 1px plný # 000;). vlevo (ohraničení: 1px plný # 000;)

Tyto položky nesou stejné sémantické zatížení a styl bude aplikován stejným způsobem jak s univerzálním selektorem, tak bez něj.

Kde se dá uplatnit?

Univerzální selektor v podstatě najdeme v praxi při nulování výchozích stylů prohlížeče. Například výplň, velikost písma a tak dále.

Přestože je tato metoda jednoduchá a navíc výrazně zkrátí délku kódu, má řadu nevýhod.

Nevýhody univerzálního voliče při vypouštění standardních stylů:

• některé styly nelze resetovat
• pro select atribut nemůže nulová výplň
• může „zabít“ standardní vzhled tlačítka ve většině prohlížečů
• Mozila pracuje s drobnými chybami v prohlížeči
• výrazně zpomaluje načítání stránek pro Mozilu (to však platí pro weby s CSS větším než tisíc řádků, jinak je zpoždění neviditelné.)

Z výše popsaných důvodů se doporučuje vypsat styly specificky pro každý prvek pomocí selektoru typu. Příklad podobného kódu pro resetování stylů je uveden na konci.

Obecný selektor CSS je možná nejsnáze pochopitelný, protože určuje, že styly budou aplikovány na absolutně všechny prvky bez výjimky. Univerzální selektor se skládá pouze z jednoho znaku - hvězdičky (*), obecná syntaxe je následující:

* { hodnota majetku; hodnota majetku; ...)

Příklad použití obecného selektoru CSS

odstavec 1

odstavec 2

odstavec 3

Výsledek v prohlížeči

odstavec 1

odstavec 2

odstavec 3

V tomto příkladu byly odstraněny okraje, odsazení a okraje prvků stránky. K čemu to je? Jak již víte z lekce , některé prvky HTML mají zpočátku určité hodnoty některých vlastností, například odstavce mají nenulové horní a spodní okraje prázdného místa, odkazy na obrázky mají rámečky atd. Ne všechno je ale tak jednoduché, faktem je, že v různých prohlížečích se velikost těchto polí může mírně lišit a některé již dávno nenastavují výchozí rámce pro odkazy na obrázky. A to nejsou všechny možné rozdíly.

Mnoho návrhářů rozvržení (a vy se nyní učíte přesně rozvržení) tedy vytváří takzvané „Resetovat styly CSS“, to znamená, že na samém začátku šablony stylů resetují všechny možné nenulové hodnoty CSS a poté v procesu, přidat styly k prvkům, ale již, samozřejmě, s vlastními významy. Můžete si tak být jisti, že HTML stránka bude vypadat ve všech prohlížečích stejně.

Velmi často se univerzální selektor používá k resetování stylů, i když někteří dávají přednost jednoduchému vypsání některých selektorů značek oddělených čárkami a jiní reset nepoužívají vůbec, spoléhají na jejich péči. Jak se budete chovat, je na vás, ale v každém případě je příliš brzy na to myslet. A buďte si jisti, že postupem času si vyvinete svůj vlastní styl psaní (omlouvám se za tautologii), takže se s tím neobtěžujte.

Domácí práce.

Nevidím žádný smysl dělat domácí úkoly na univerzálním voliči, protože zde je vše příliš zřejmé, takže to uděláme trochu jinak.

1. Změňte styly značky tak, aby vypadala jako odstavec. Jakou nemovitost k tomu potřebujete, si rozmyslete sami.
2. Změňte značku odstavce tak, aby vypadala jako značka zvýraznění pro dlouhé uvozovky.
3. Převeďte značku z vloženého prvku na prvek bloku. Použijte k tomu nemovitost