Zvažování selektorů CSS. a nastavte styl pro zadanou třídu. Styly vytvořené pomocí třídy lze aplikovat na jiné prvky, ne nutně tohoto typu.

Domov CSS (Cascading Style Sheets), neboli kaskádové styly , se používají k popisu vzhled dokument napsaný ve značkovacím jazyce. Styly CSS se obvykle používají k vytváření a změně stylu prvků webové stránky a uživatelská rozhraní zapsáno v HTML jazyky

a XHTML, ale lze je také použít na jakýkoli druh dokumentu XML, včetně XML, SVG a XUL.

Kaskádové styly popisují pravidla pro formátování prvků pomocí vlastností a povolené hodnoty pro tyto vlastnosti. Pro každý prvek můžete použít omezenou sadu vlastností, ostatní vlastnosti na něj nebudou mít žádný vliv. Deklarace stylu se skládá ze dvou částí: prvku webové stránky − volič a příkazy pro formátování - reklamní blok

. Selektor říká prohlížeči, který prvek má formátovat, a deklarační blok (kód ve složených závorkách) uvádí formátovací příkazy – vlastnosti a jejich hodnoty.

Rýže. 1. Struktura deklarace stylu CSS

Typy kaskádových stylů a jejich specifika

1. Typy stylů

1.1. Externí šablona stylů Externí šablona stylů představuje textový soubor s příponou .css, která obsahuje sadu stylů CSS pro prvky. Soubor je vytvořen v editoru kódu, stejně jako stránka HTML. Soubor může obsahovat pouze styly bez značek HTML. Externí šablona stylů je připojena k webové stránce pomocí značky , který se nachází uvnitř sekce

. Tyto styly fungují pro všechny stránky webu. Ke každé webové stránce můžete připojit více šablon stylů přidáním více značek za sebou

, označující účel této šablony stylů v atributu media tag. rel="stylesheet" určuje typ odkazu (odkaz na šablonu stylů).

Atribut type="text/css" standard HTML5 nevyžaduje, lze jej tedy vynechat. Pokud atribut chybí, výchozí hodnota je type="text/css" .

1.2. Vnitřní styly Vnitřní styly vložené do sekce HTML dokumentu a jsou definovány uvnitř značky

...

. Interní styly mají přednost před externími, ale jsou nižší než vložené styly (určené pomocí atributu style).

Když píšeme inline styly, zapíšeme kód CSS do souboru HTML přímo do značky prvku pomocí atributu style:

Věnujte pozornost tomuto textu.

Takové styly ovlivňují pouze prvek, pro který jsou nastaveny.

1.4. @import pravidlo

@import pravidlo Umožňuje načíst externí šablony stylů. Aby direktiva @import fungovala, musí se objevit v šabloně stylů (externí nebo interní) před všemi ostatními pravidly:

Pravidlo @import se také používá k zahrnutí webových písem:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Typy selektorů

Selektory představují strukturu webové stránky. Pomáhají vytvářet pravidla pro formátování prvků webové stránky. Selektory mohou být prvky, jejich třídy a identifikátory, stejně jako pseudotřídy a pseudoprvky.

2.1. Univerzální volič

Odpovídá jakémukoli prvku HTML. Například * (margin: 0;) obnoví okraje pro všechny prvky webu. Selektor lze také použít v kombinaci s pseudotřídou nebo pseudoprvkem: *:after (CSS styly) , *:checked (CSS styly) .

2.2. Selektor prvku

Selektory prvků umožňují formátovat všechny prvky tohoto typu na všech stránkách webu. Například h1 (rodina písem: Humr, kurzíva;) nastaví celkový styl formátování pro všechny nadpisy h1.

2.3. Výběr třídy

Selektory tříd vám umožňují stylovat jeden nebo více prvků se stejným názvem třídy různá místa ah stránkách nebo na jiných stránkách webu. Chcete-li například vytvořit nadpis s třídou nadpisu, musíte přidat atribut třídy s nadpisem hodnoty v úvodní značce

a nastavte styl pro zadanou třídu. Styly vytvořené pomocí třídy lze aplikovat na jiné prvky, ne nutně tohoto typu.

Návod k použití osobní počítač

.headline ( text-transform: velká písmena; barva: světle modrá; )

2.4. Volič ID

Volič ID umožňuje formátování jeden konkrétní prvek. ID musí být jedinečné a může se objevit pouze jednou na jedné stránce.

#sidebar ( šířka: 300px; plovoucí: vlevo; )

2.5. Selektor potomků

Potomkové selektory aplikují styly na prvky v prvku kontejneru. Například ul li (text-transform: velká písmena;) - vybere všechny prvky li, které jsou potomky všech prvků ul.

Pokud potřebujete formátovat potomky konkrétní prvek, tomuto prvku je třeba přiřadit třídu stylu:

p.first a (barva: zelená;) — tento styl bude platit pro všechny odkazy potomky odstavce s třídou jako první;

p .first a (barva: zelená;) – pokud přidáte mezeru, budou stylizovány odkazy umístěné uvnitř jakékoli značky .first class, která je potomkem prvku

First a (color: green;) - tento styl bude aplikován na jakýkoli odkaz umístěný uvnitř jiného prvku, označeného class.first .

2.6. Dětský volič

Podřízený prvek je přímým potomkem svého obsahujícího prvku. Jeden prvek může mít několik podřízené prvky a každý prvek může mít pouze jednoho rodiče. Podřízený selektor umožňuje použít styly pouze v případě, že podřízený prvek následuje bezprostředně za nadřazeným prvkem a mezi nimi nejsou žádné další prvky, to znamená, že podřízený prvek není vnořen do ničeho jiného.
Například p > silný vybere všechny silné prvky, které jsou potomky prvku p.

2.7. Sestra volič

K sesterství dochází mezi prvky, které sdílejí společného rodiče. Selektory sesterské prvky umožňují vybrat prvky ze skupiny prvků stejné úrovně.

h1 + p - vybere všechny první odstavce bezprostředně za libovolnou značkou

aniž by byly dotčeny zbývající odstavce;

h1 ~ p - vybere všechny odstavce, které jsou sesterské k jakémukoli nadpisu h1 a bezprostředně za ním.

2.8. Volič atributů

Selektory atributů vybírají prvky na základě názvu atributu nebo hodnoty atributu:

[atribut] - všechny prvky obsahující zadaný atribut, — všechny prvky, pro které je zadán atribut alt;

selector[attribute] - prvky tohoto typu obsahující zadaný atribut, img - pouze obrázky, pro které je zadán atribut alt;

selector[attribute="value"] - prvky tohoto typu obsahující zadaný atribut s konkrétní hodnotou, img - všechny obrázky, jejichž název obsahuje slovo květina;

selector[attribute~="value"] - prvky částečně obsahující daná hodnota, pokud je například prvku uvedeno několik tříd oddělených mezerou, p — odstavce, jejichž název třídy obsahuje feature ;

selector[attribute|="value"] - prvky, jejichž seznam hodnot atributů začíná zadaným slovem, p - odstavce, jejichž název třídy je feature nebo začíná feature ;

selector[attribute^="value"] - prvky, jejichž hodnota atributu začíná zadanou hodnotou, a - všechny odkazy začínající http://;

selector[attribute$="value"] - prvky, jejichž hodnota atributu končí specifikovaná hodnota, img - všechny obrázky ve formátu png;

selector[attribute*="value"] - prvky, jejichž hodnota atributu obsahuje kdekoli určené slovo, a — všechny odkazy, jejichž název obsahuje knihu .

2.9. Selektor pseudotřídy

Pseudotřídy jsou třídy, které ve skutečnosti nejsou připojeny ke značkám HTML. Umožňují vám aplikovat pravidla CSS na prvky, když dojde k události nebo se podřídí konkrétnímu pravidlu. Pseudotřídy charakterizují prvky s následujícími vlastnostmi:

:hover - jakýkoli prvek, nad kterým je umístěn kurzor myši;

:zaměření — interaktivní prvek, který byl zpřístupněn pomocí klávesnice nebo aktivován pomocí myši;

:active - prvek, který byl aktivován uživatelem;

:valid - pole formuláře, jejichž obsah byl v prohlížeči zkontrolován, zda odpovídá zadanému datovému typu;

:invalid — pole formuláře, jejichž obsah neodpovídá zadanému datovému typu;

:enabled - všechna aktivní pole formuláře;

:disabled — blokovaná pole formuláře, tj. v neaktivním stavu;

:in-range - pole formuláře, jejichž hodnoty jsou v určeném rozsahu;

:out-of-range - pole formuláře, jejichž hodnoty nejsou v určeném rozsahu;

:lang() - prvky s textem v určeném jazyce;

:not(selektor) - prvky, které neobsahují zadaný selektor - třída, identifikátor, název nebo typ pole formuláře - :not() ;

:target je prvek se symbolem #, na který se v dokumentu odkazuje;

:checked — vybrané (uživatelem vybrané) prvky formuláře.

2.10. Strukturální selektor pseudotříd

Strukturální pseudotřídy vybírají podřízené prvky podle parametru uvedeného v závorkách:

:nth-child(liché) - liché podřízené prvky;

:n-té dítě(sudé) - sudé podřízené prvky;

:nth-child(3n) - každý třetí prvek mezi dětmi;

:nth-child(3n+2) - vybere každý třetí prvek, počínaje druhým potomkem (+2) ;

:nth-child(n+2) - vybere všechny prvky počínaje druhým;

:nth-child(3) - vybere třetí podřízený prvek;

:nth-last-child() - v seznamu podřízených prvků vybere prvek s zadané místo, podobně jako:nth-child() , ale začíná od posledního, v opačném směru;

:first-child - umožňuje stylizovat pouze úplně první podřízený prvek značky;

:last-child - umožňuje formátovat poslední podřízený prvek značky;

:only-child - vybere prvek, který je jediným podřízeným prvkem;

:empty - vybere prvky, které nemají žádné potomky;

:root - vybere prvek, který je kořenem dokumentu - prvek html.

2.11. Selektor pseudotřídy strukturního typu

Označuje konkrétní typ podřízené značky:

:nth-of-type() - vybírá prvky podobné :nth-child() , ale bere v úvahu pouze typ prvku;

:first-of-type - vybere prvního potomka daného typu;

:last-of-type - vybere poslední prvek tohoto typu;

:nth-last-of-type() - vybere prvek daného typu v seznamu prvků podle zadaného umístění, počínaje od konce;

:only-of-type - vybere jediný prvek zadaného typu mezi podřízenými prvky nadřazeného prvku.

2.12. Selektor pseudoprvků

Pseudo prvky se používají k přidávání obsahu, který je generován pomocí vlastnosti content:

:first-letter - vybere první písmeno každého odstavce, platí pouze pro prvky bloku;

:first-line - vybere první řádek textu prvku, vztahuje se pouze na prvky bloku;

:before - vloží vygenerovaný obsah před prvek;

:after - přidá vygenerovaný obsah za prvek.

3. Kombinace voličů

Chcete-li přesněji vybrat prvky pro formátování, můžete použít kombinace selektorů:

img:nth-of-type(even) – vybere všechny sudé obrázky, alternativní text který obsahuje slovo css.

4. Selektory seskupení

Stejný styl lze použít na více prvků současně. Chcete-li to provést, musíte na levé straně deklarace uvést požadované selektory oddělené čárkami:

H1, h2, p, span ( barva: rajče; pozadí: bílá; )

5. Dědičnost a kaskáda

Dědičnost a kaskáda jsou dva základní pojmy v CSS, které spolu úzce souvisí. Dědičnost je místo, kde prvky dědí vlastnosti od svého rodiče (prvku, který je obsahuje). Kaskáda se projevuje v tom, jak různé typyšablony stylů se aplikují na dokument a jak se vzájemně přepisují konfliktní pravidla.

5.1. Dědictví

Dědictví je mechanismus, kterým se určité vlastnosti přenášejí z předka na jeho potomky. Specifikace CSS poskytuje dědění vlastností souvisejících s textovým obsahem stránky, jako je barva, písmo, mezery mezi písmeny, výška řádku, styl seznamu, zarovnání textu, odsazení textu, transformace textu, viditelnost, bílá -mezera a mezera mezi slovy. V mnoha případech je to výhodné, protože nemusíte nastavovat velikost písma a rodinu písem pro každý prvek na webové stránce.

Vlastnosti související s formátováním bloku se nedědí. Jsou to pozadí , ohraničení , zobrazení , plovoucí a jasné , výška a šířka , okraj , min-max-výška a -šířka , obrys , přetečení , odsazení , pozice , zdobení textu , svislé zarovnání a z-index.

Nucené dědictví

Použitím klíčové slovo dědit může donutit prvek, aby zdědil jakoukoli hodnotu vlastnosti svého nadřazeného prvku. To funguje i pro vlastnosti, které se ve výchozím nastavení nedědí.

Jak se nastavují a fungují styly CSS

1) Styly lze zdědit z nadřazeného prvku (zděděné vlastnosti nebo pomocí dědičné hodnoty);

2) Styly umístěné v tabulce stylů níže přepisují styly umístěné v tabulce výše;

3) Lze použít styly z jednoho prvku různé zdroje. V režimu vývojáře prohlížeče můžete zkontrolovat, které styly jsou použity. Chcete-li to provést, klikněte na prvek klikněte pravým tlačítkem myši a vyberte „Zobrazit kód“ (nebo něco podobného). V pravém sloupci budou uvedeny všechny vlastnosti, které jsou nastaveny na tomto prvku nebo zděděny z nadřazeného prvku, spolu se soubory stylů, ve kterých jsou specifikovány, a sériové číslořádky kódu.

Rýže. 2. Zapněte režim vývojáře Prohlížeč Google Chrome

4) Při definování stylu můžete použít libovolnou kombinaci selektorů - selektor prvku, pseudotřídu prvku, třídu nebo identifikátor prvku.

div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

5.2. Kaskáda

Kaskádové je mechanismus, který řídí konečný výsledek v situaci, kdy jsou na jeden prvek aplikována různá pravidla CSS. Existují tři kritéria, která určují pořadí, ve kterém jsou vlastnosti aplikovány – důležité pravidlo, specifičnost a pořadí, ve kterém jsou zahrnuty šablony stylů.

Pravidlo! důležité

Váhu pravidla lze určit pomocí klíčového slova!important, které se přidá bezprostředně za hodnotu vlastnosti, například span (váha písma: bold!important;) . Pravidlo musí být umístěno na konec deklarace před uzavírací závorku, bez mezery. Takové oznámení bude mít přednost před všemi ostatními pravidly. Toto pravidlo umožňuje zrušit hodnotu vlastnosti a nastavit novou pro prvek ze skupiny prvků v případě, že neexistuje přímý přístup k souboru stylu.

Specifičnost

Pro každé pravidlo prohlížeč vypočítá specifičnost selektoru a pokud má prvek konfliktní deklarace vlastností, vezme se v úvahu pravidlo, které má největší specifičnost. Hodnota specificity má čtyři části: 0, 0, 0, 0. Specifičnost selektoru je definována takto:

pro id se přidá 0, 1, 0, 0;
pro třídu 0 se přidává 0, 1, 0;
pro každý prvek a pseudoprvek se přidá 0, 0, 0, 1;
pro inline styl přidaný přímo k prvku - 1, 0, 0, 0 ;
Univerzální volič nemá žádné specifikum.

H1 (barva: světle modrá;) /*specifičnost 0, 0, 0, 1*/ em (barva: stříbrná;) /*specifičnost 0, 0, 0, 1*/ h1 em (barva: zlatá;) /*specifičnost: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (barva: modrá;) /*specifičnost: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (barva: šedá;) /*specifičnost 0, 0, 1, 0 */ #sidebar (barva: oranžová;) /*specifičnost 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

V důsledku toho budou na prvek aplikována ta pravidla, která jsou konkrétnější. Pokud má například prvek dvě specifika s hodnotami 0, 0, 0, 2 a 0, 1, 0, 1, vyhraje druhé pravidlo.

Pořadí spojených tabulek

Můžete vytvořit více externích šablon stylů a připojit je k jedné webové stránce. Pokud se vyskytují v různých tabulkách různé významy vlastnosti jednoho prvku, v důsledku toho bude na prvek použito pravidlo v níže uvedeném seznamu stylů.

Tato kapitola podrobně vysvětluje, proč se kaskádové styly (CSS) nazývají kaskádové styly. Nejprve si připomeňme, jak můžete webové stránce přidat styl:

• připojit externí šablonu stylů;
• přidat vnitřní stůl styly v dokumentu HTML prostřednictvím značky . V důsledku toho barva značek

  Bude červená.

  Toto je jeden ze způsobů, jak kontrolovat důležitost stylů. Dalším způsobem, jak zvýšit prioritu, je cíleně zvýšit váhu selektoru, například přidáním ID nebo třídy.

  Oznámení! důležité

  Pokud se setkáte stav nouze a potřebujete zvýšit důležitost vlastnosti, můžete k ní přidat!důležité prohlášení:

  P (barva: červená !důležité;) p (barva: zelená;)

  Také!důležité přepíše inline styly. Mnoho vývojářů odrazuje příliš časté používání!important. Většinou, toto oznámení Je zvykem jej používat pouze tehdy, když konflikt stylů nelze překonat jinými prostředky.

  Resetování stylů pomocí reset.css

  V předchozí kapitole jsme již zmínili, že každý prohlížeč má své vlastní vestavěné styly HTML dokumentů, které mají zlepšit čitelnost. Pravděpodobně jste již viděli, jak vypadá nahá webová stránka v prohlížeči: modře podtržené odkazy, černé písmo, tučné nadpisy atd.

  Každý prohlížeč má své vlastní rozdíly ve vestavěných stylech: například IE nemá odsazení od horního okraje okna, ale Firefox ano. Takových rozdílů je mnoho. Aby při psaní nenarušovaly kompatibilitu mezi prohlížeči vlastní styl CSS, můžete použít metodu resetování inline stylů.

  Nástroj pro resetování stylu je v podstatě stejný CSS tabulka, která popisuje pravidla, která resetují vestavěné styly prohlížečů na výchozí hodnoty vlastností. Tato tabulka se nazývá reset.css a používá se k tomu, abyste mohli začít vytvářet styl od začátku. Zde je příklad standardní stůl resetovat:

  Html, tělo, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, citovat, code, del, dfn, em, img, ins, kbd, q, s, samp, malý, úder, silný, sub, sup, tt, var, b, u, i, střed, dl, dt, dd, ol, ul, li, fieldset, formulář, štítek, legenda, tabulka, titulek, tbody, tfoot, hlavička, tr, th, td, článek, stranou, plátno, detaily, vložit, obrázek, titulek, zápatí, záhlaví, hgroup, nabídka, navigace, výstup, rubín, sekce, shrnutí, čas, značka, zvuk, video ( margin: 0; padding: 0; border: 0; font-size: 100 %; font: inherit; vertical-align: baseline; ) /* HTML5 display-role reset for starší prohlížeče */ článek, stranou, podrobnosti, popis obrázku, obrázek, zápatí, záhlaví, hgroup, menu, navigace, sekce ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( uvozovky: žádné; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border-collapse: kolaps; border-spacing: 0; )

  Dobrý den, milí čtenáři tohoto blogu. Dnes navrhuji pokračovat v rozhovoru, o kterém jsme začali ve výše uvedeném článku. Ještě dříve jsme se seznámili s tím, co jsou to tabulky kaskádové styly, dozvěděli se, co znamenají, a mnoho dalšího.

  Všechny materiály o kaskádových stylech, které již byly na tomto blogu zveřejněny, naleznete v. Dnes si nejprve povíme, jak můžete kombinovat a seskupovat selektory, a poté se podrobně podíváme na pravidla, která platí pro stejný prvek v HTML kód(Důležité, selektory počítání a psaní pravidel atribut stylu).

  Kombinace a seskupení selektorů v CSS

  Takže v předchozích článcích se nám podařilo zvážit 7 typů:

  Z těchto sedmi možné typy PROTI jazyk CSS lze vytvářet kombinace. Všechny kombinace, které uděláme, přímo souvisí (předci - potomci, rodiče - děti, bratři - sestry).

  První typ kombinace je tzv kontextový selektor. Bere v úvahu vztah prvků HTML kódu podle principu „předek - potomek“:

  

  Samostatný selektory v kombinacích se píší oddělené mezerou a musíte jej číst zprava doleva. Že. Pravidla CSS se budou vztahovat pouze na poslední z této kombinace (tu úplně vpravo) a vše, co před ní bude, nám umožňuje pouze specifikovat přesnější aplikaci (cílení) pro naše pravidla (zdůraznit).

  První příklad říká, že všechny prvky B (tučně), které mají předky Div prvky, bude zbarven zeleně.

  

  Ve výše uvedeném kódu bude pouze podtržený fragment zbarven zeleně, protože mezi jeho předky je Div a druhý fragment kódu, zvýrazněný značkami B, zůstane barvou, která je pro něj ve výchozím nastavení vybrána, protože kontejner Div již není mezi jeho předky (pouze P a Body):

  

  Takové kombinace fungují v jakémkoli prohlížeči.

  Další typ kombinace by byl dětský volič, který je postaven na principech vztahů mezi prvky kódu typu „Rodič - Dítě“:

  

  Jsou psány s oddělovačem známější (>):

  

  Tento záznam bude prohlížeč interpretovat následovně: pro , „rodič“ (nejbližší předek), jehož je kontejner Div, bude zvýrazněn červeně.

  

  Ve výše uvedeném příkladu budou pouze vyznačené odstavce zbarveny červeně, protože jsou uzavřeny přímo v kontejneru Div, který je jejich rodičem (nejbližším předkem). Pokud upravíte výše uvedený příklad podřízeného selektoru, aby vypadal takto:

  Tělo > p (barva:červená)

  Pak bude červeně zvýrazněn pouze poslední odstavec, protože... jeho rodičem je Značka těla a první dva odstavce zůstanou barvou, která jim byla poskytnuta ve výchozím nastavení (Tělo je jejich předek, ale ne rodič, což je Div). Dětské voliče nefungují v prohlížeči např. 6.

  Jak a proč jsou selektory seskupeny v kódu CSS

  Poslední kombinace je tzv sousední voliče a splňuje principy vztahů mezi prvky HTML kódu typu „Sisters - Brothers“. Jako oddělovač mohou použít „+“ nebo „~“:

  

  Tento záznam znamená, že obsah prvku I (kurzívou) bude zbarven červeně pouze v případě, že jeho nejbližší soused vlevo (v kódu nahoře) je prvek B (tučně). Například, tento stav bude následovat v tomto příkladu:

  

  Pokud napíšete sousední volič CSS kód v této podobě:

  H1 ~ p (barva:červená)

  To bude znamenat, že všechny odstavce (P), které mají sousední prvek H1 (nadpis) umístěný výše v kódu, budou obarveny červeně. Týká se to konkrétně sousedních prvků (vztahů typu „Sestry - Bratři“). V níže uvedeném příkladu daný volič Zakroužkované odstavce uspokojí:

  

  Kombinace sousedních selektorů v prohlížeči Ie 6 také bohužel nejsou podporovány. V Ie 6 je podporován pouze první typ kombinace, ale v Ie 7 a vyšších jsou podporovány všechny ostatní. V jiných prohlížečích by neměly být žádné problémy.

  Selektory v Css Můžete se také seskupit. Například pokud některé z nich používají jeden nebo více stejná pravidla, pak je lze spojit do skupiny, aby se snížilo množství kódu CSS.

  

  V příkladu zobrazeném na snímku obrazovky se opakuje pro každý selektor záhlaví (h1-3), což může způsobit složitost (vícenásobná práce), pokud chcete změnit hodnotu této vlastnosti. Proto druhá možnost seskupeného záznamu vypadá trochu vhodněji.

  Vezměte prosím na vědomí, že při seskupování selektory se píší oddělené čárkami. Pokud bude stejných pravidel více, pak bude úspora kódu znatelnější. A ta pravidla, která byla jedinečná, musí být ještě zapsána jednotlivě.

  Priority vlastností CSS (s důležitými a bez nich)

  Nyní se zamysleme nad tím, jaký styl prohlížeč použije, pokud pro něj žádné styly nejsou tohoto prvku Nebyl poskytnut HTML kód? A k tomu existuje odpovídající specifikace, kde je toto vše popsáno.

  

  Jak vidíte, nyní došlo k finálnímu oddělení Html a Css. Tito. i pro čistý HTML kód bude prohlížeč stále používat výchozí vlastnosti stylů. Zde jsou tedy výchozí vlastnosti: mají nejnižší prioritu.

  Vlastnosti, které uživatel přiřadí v nastavení svého prohlížeče, mají vyšší prioritu. Tyto styly budou použity na všechny dokumenty, které si prohlíží v tomto prohlížeči.

  Pravda, ne všechny prohlížeče tuto funkci mají, ale alespoň Ie a Opera ji mají. Tito. V případě potřeby bude uživatel moci zahrnout svůj vlastní soubor CSS jako zdroj označení stylu.

  Například v Ie, abyste to udělali, musíte vybrat „Nástroje“ - „Možnosti Internetu“ z nabídky vpravo nahoře a poté na první kartě „Obecné“ kliknout na spodní tlačítko „Vzhled“. V okně, které se otevře, musíte zaškrtnout políčko „Navrhnout pomocí vlastního stylu“ a pomocí tlačítka „Procházet“ najít soubor značek stylu CSS, který potřebujete v počítači:

  

  Tito. uživatel má možnost, aby jakákoli stránka otevřená v prohlížeči vypadala v souladu s jeho požadavky popsanými v souboru CSS. Jmenuje se "vlastní styly" a mají přednost před styly, které jsou definovány ve výchozí specifikaci. Ale stejně vyšší prioritu bude mít tzv. autorské styly.

  To znamená, že pokud bych (vývojář webu) chtěl v návrhu jakéhokoli prvku kódu Html použít jiné styly než výchozí (nezapomeňte, že jsou popsány ve specifikaci), pak uživatel s vlastním CSS soubor Nebude moci přerušit můj návrh.

  Bude uživatel nucen to přijmout? Žádný. Má příležitost Zvyšte prioritu vlastností CSS přidáním položky Důležité na konci každého z nich. Toto slovo je napsáno skrz vesmírný charakter a předchází mu vykřičník:

  P (barva:červená !důležité;)

  Pokud má uživatel stejnou vlastnost s Důležité ve svém vlastním souboru stylu, který připojil k prohlížeči, pak uvidí všechny odstavce červeně. Ale autor (vývojář) stránek by pro tuto vlastnost mohl použít i Důležité. Kdo pak vyhraje a čí priorita bude vyšší?

  Rozhodli jsme se tak vlastní styly s důležitým bude mít v každém případě vyšší prioritu než autorské styly, ať už s nebo bez Důležité.

  Shrňme ve formě seznamu všechny prezentované informace o prioritách vlastnosti stylu. Priorita se sníží shora dolů:

  1. Vlastní s důležitým
  2. Copyright s důležitým
  3. Copyright
  4. Zvyk
  5. Styly akceptované pro prvky Html ve specifikaci ve výchozím nastavení (pokud autor ani uživatel neuvedli nic jiného)

  Tito. bez důležitého jsou důležitější autorské styly a s nimi jsou nejdůležitější a prioritní uživatelské styly. Nyní se pojďme zabývat autorskými tabulkami, protože to, co uživatel dělá, je nám neznámé a je zahaleno temnotou.

  Jak zvýšit priority vlastností CSS v autorských stylech

  Nyní přejdeme k otázce kaskádové tabulky CSS styly . Podívejme se na to na příkladu, aby to bylo jasnější. Řekněme, že máme kus kódu s následujícími prvky Html (odstavec uvnitř kontejneru Div):

  Obsah kontejneru

  Nejprve si zapišme následující vlastnosti:

  P (barva:červená) .sbox (pozadí:#f0f0f0)

  V důsledku toho se na odstavec použije jak první z nich (protože je tvořen tagem P), tak vlastnost, která určuje šedé pozadí pro prvek s třídou „sbox“, kterou má opět tento odstavec:

  Nyní přidáme do druhého selektoru (třídy) ještě jednu vlastnost, která bude v konfliktu s prvním řádkem (oba nastavují , ale používají jiné hodnoty):

  P (barva:červená) .sbox (pozadí:#f0f0f0;barva:modrá)

  To způsobí, že se barva odstavcového textu změní na modrou místo na červenou.

  Proč? Protože to je přesně způsob, jak se konflikt řeší, když je stejný HTML prvek kód obdrží několik stejných pravidel najednou, ale s různými hodnotami a z různých míst v kódu CSS. Abyste mohli určit, které pravidlo má vyšší prioritu, musíte spočítat jeho selektory.

  Kromě toho sebe selektory mají gradaci podle priorit. ID má nejvyšší prioritu. V tomto příkladu bude barva textu modrá právě proto, že priorita ID (#out) bude vyšší než priorita selektoru značek (p):

  P (barva:červená) #out (barva:modrá)

  Dále v žebříčku priority jsou selektory tříd, pseudotříd a atributů. V následujícím příkladu se značka (p) přehraje znovu a barva textu odstavce bude modrá, protože soutěží s selektorem vyšší priority (třídy):

  P (barva:červená) .sbox (barva:modrá)

  No a nejnižší prioritu (nepočítáme-li univerzální *, která má nejnižší váhu a nedělá na takovém buttingu žádné změny) jsou selektory tagů a pseudoprvků.

  Div p (barva:červená) p (barva:modrá)

  Jakou barvu bude mít výsledný odstavcový text? Přesně tak, je to červené, protože... Tato vlastnost má více selektorů značek (dva versus jeden). Oh jak. Tito. Jako první se berou v úvahu ID. Není-li vítěz identifikován, jsou zvažovány třídy, pseudotřídy a atributy. No a pokud se tam nic nevyřešilo nebo se takové nenašlo, tak se berou v úvahu selektory tagů a pseudoprvků.

  Je ale dost možné, že vítěz nevzejde a selektoři soutěžících tříd budou mít v součtu stejnou přednost. Například pro náš trpělivý odstavec uzavřený v kontejneru Div:

  Obsah kontejneru

  Bylo by docela možné napsat část kódu CSS takto:

  Div.box #out(barva:červená) #v p.sbox(barva:modrá)

  A jakou barvu má mít text odstavce? Obě kombinace přesně popisují náš odstavec. První by se jako obvykle mělo číst zprava doleva: aplikujte tyto vlastnosti (barva: červená) na prvek s ID #out, který se nachází někde uvnitř (máte ho mezi „předky“) kontejneru Div s class.box (div.box ). Zcela odpovídá našemu odstavci.

  Druhá kombinace: použijte tyto vlastnosti (color:blue) na prvek odstavce s třídou sbox (p.sbox), který je uvnitř jakéhokoli prvku s ID #in. Opět to zcela vystihuje náš odstavec. Spočítejme selektory.

  ID se vyskytují jednou v obou kombinacích a totéž lze říci o třídách. Zbývá pouze spočítat selektory značek, ale také se používají stejně často v obou kombinacích (jedna). Přepadení.

  Máme to rovné priority stejná vlastnost s různými hodnotami (barva textu červená nebo modrá). Jak prohlížeč toto dilema vyřeší?

  Zde bude platit pravidlo - kdo je poslední, má pravdu. Proto v mém příkladu bude barva textu odstavce modrá, protože tato vlastnost (color:blue) je v kódu umístěna níže. Pokud jsou tato pravidla obrácena:

  #in p.sbox(barva:modrá) div.box #out(barva:červená)

  V důsledku toho se barva odstavcového textu změní na červenou. Q.E.D. K libovolné kombinaci můžete přidat například další selektor tagů a my nakloníme misky vah na jeho stranu, i když není v kódu níže:

  Tělo #v p.sbox(barva:modrá) div.box #out(barva:červená)

  V tomto případě se barva odstavce změní na modrou. Univerzální volič „*“ nemá na výpočet priorit vůbec žádný vliv. Mimochodem, výše jsme se podívali na způsob, jak zvýšit prioritu pravidel CSS přidáním Důležité. V našem příkladu to může vypadat takto:

  P (barva:zelená !důležité) #v p.sbox(barva:modrá) div.box #out(barva:červená)

  Jakou barvu bude mít text odstavce v tomto případě? Zelená, samozřejmě. A nemusíte ani nic počítat, protože přidání Důležité na vlastnost stylu, kterou tento řeší kontroverzní záležitost jednoznačně, bez ohledu na to, kde se v kódu nachází a kolik selektorů má.

  Důležité však není jediný způsob, jak bezpodmínečně zvýšit prioritu nemovitosti. Druhým způsobem zvýšení může být použití stylu vlastnosti v atributu Styl prvek HTML, který potřebujete.

  Tito. uvnitř stejného trpělivého P tagu přidejte atribut Style určující libovolnou barvu:

  Obsah kontejneru

  To je vše. Nyní, bez ohledu na to, jaké vlastnosti jsou pro tento prvek specifikovány externí soubor styly nebo vnitřní značky Styl HTML kód, barva textu odstavce bude žlutá.

  Ale nebude moci porazit vlastnosti s důležitým. Tito. v posledním příkladu, kde jsme přidali pravidlo "p (color:green !důležité)", bude barva textu stále zelená, i když style="color:yellow".

  Ve skutečnosti je priorita těchto dvou pravidel (s Důležité v externím souboru šablony stylů a v atributu style) stejná, což znamená, že musíme přistoupit k počítání selektorů. Mohou být skutečně uvnitř atributu style?

  Ano, nemůže být žádný, to znamená, že pravidlo zapsané v atributu style vždy prohraje s pravidlem s Důležité pouze kvůli menšímu počtu selektorů (nula bude menší než libovolné číslo).

  No a co potom? bude dávat nejvyšší prioritu Vlastnost CSS ? Správně, bude to napsáno v atributu style a dokonce i s Důležité:

  Obsah kontejneru

  
  
  

  V tomto případě bude barva odstavcového textu žlutá a nebude možné ji přerušit ničím v autorových stylech. Našli jsme absolutní způsob, jak nastavit styly. Přerušit ho může pouze uživatel s vlastním vlastní soubor styly a vlastnost Important specifikovaná pro tuto vlastnost.

  Zkusme tedy skládat seznam faktorů ovlivňujících prioritu vlastnosti v autorských stylech v sestupném pořadí:

  1. Určení vlastnosti v atributu style požadovanou značku spolu s Důležité
  2. Přidání položky Důležité do vlastnosti v externím souboru šablony stylů nebo ve značce stylu přímo v Html kódu
  3. Na prvku je potřeba jednoduše nastavit tuto vlastnost v atributu style
  4. Použití většího počtu ID pro danou vlastnost
  5. Používání více třída, pseudotřída nebo selektory atributů
  6. Použití více selektorů značek a pseudoprvků
  7. Snižte umístění vlastnosti v kódu CSS, všechny ostatní věci jsou stejné

  Ve skutečnosti se pravidla v atributu style používají extrémně zřídka (představte si, jak obtížné by v tomto případě bylo provést změny v celém kódu webu a nikoli samostatný soubor CSS).

  Tento atribut se používá hlavně tehdy, když potřebujete něco rychle otestovat. Je také výhodné, když vložíte svůj kód do kódu někoho jiného HTML stránky, které mají svůj vlastní styl a které lze zdědit () pro vaše vložené prvky.

  Proč a jak vkládat svůj kód na stránky jiných lidí? Možná to nepotřebujeme, ale Yandex a Google to dělají, když nebo na webech jiných lidí (našich webech).

  Přidáním atributu style ke všem prvkům kódu reklamního bloku, s vlastnostmi v něm uvedenými a přidaným Důležité, se již nemusíte starat o to, že by se kód reklamy jakkoli změnil (ačkoli reklamy Yandex lze stále měnit pomocí CSS a Důležité, zřejmě tuto metodu nepoužili).

  Ať se vám daří! Brzy se uvidíme na stránkách blogu

  Na další videa se můžete podívat na

  ");">
  

  Mohlo by vás to zajímat

  Tagy, class, Id a univerzální selektory, stejně jako selektory atributů v moderním CSS
  Selektory pseudotříd a pseudoprvků v CSS (hover, first-child, first-line a další), vztahy mezi značkami Html kódu
  Styl seznamu(typ, obrázek, pozice) - Pravidla CSS k přizpůsobení vzhledu seznamů v HTML kódu
  K čemu slouží CSS, jak k nim připojit kaskádové styly HTML dokument a základní syntaxi tohoto jazyka

  Blíže ke druhé hodině ranní přicházejí na mysl neméně věčné otázky s myšlenkami na věčné - "jaký je smysl života?", "Proč člověk vůbec spí?" nebo "Proč sakra tohle #%^$ nefunguje?" a čím víc se ráno blíží, tím víc začíná znepokojovat poslední otázka.

  Níže budu mluvit o tom, proč se sakra css selektory někdy nechovají tak, jak si myslíme, že je správné, a o tom, jak by se ve skutečnosti chovat měli.

  Kapitola první – pojďme správně!

  Selektory mají váhu, aby určily, který styl bude použit, když více selektorů nějakým způsobem ukazuje na stejný prvek a pokouší se změnit stejný styl. Kdo váží víc, má styly a zákony vážení jsou tisíckrát jednodušší než ty, které se zdají čistě empirické.

  Pojďme to tedy zvážit – nejprve si představte pár řad po 8 číslech:

  0,1,0,0,0,0,0,0
  1,0,0,0,0,0,0,0

  Seznamte se - takhle vypadají některé dva selektory v číslech, aby nikdo nic neuhádl, budu jim konvenčně říkat „horní“ a „dolní“

  Chcete-li zjistit, který z nich je těžší, musíte to udělat další kroky a nic nezaměňovat:

  1. Podíváme se na čísla úplně vlevo
  2. Vyberme co nejvíce z nich. - tento volič bude nejtěžší
  3. Pokud jsou čísla stejná, posuňte jedno číslo doprava a opakujte pokyny od kroku 2.
  4. Pokud jsou všechna čísla stejná, použijí se styly ze selektoru, který byl deklarován jako poslední

  Nejhorší tajemství

  Pokud si toto přečtete, váš klid bude nenávratně pryč, ale alespoň budete moci v noci spát.

  Odhalením nejhoršího tajemství vám prozradím, jak vlastně proměnit obyčejný volič v tak srozumitelný a krásná čísla? Vše je jako vždy velmi jednoduché:

  1. Tagy Pro každou značku v selektoru můžete přidat jedničku k číslu úplně vpravo:

     A je 0,0,0,0,0,0,0,1 div a je 0,0,0,0,0,0,0,2

  2. třídy, pro každou třídu nebo pseudotřídu ve selektoru můžete přidat jedničku k druhému číslu zprava

     Head .logo je 0,0,0,0,0,0,2,0 .logo.big je 0,0,0,0,0,0,2,0 div:first-child je 0,0, 0 ,0,0,0,1,1 .logog > .big – a to je také 0,0,0,0,0,0,2,0
     Ano, pochopil jsi vše správně. Selektor CSS se nestaral o všechny vaše oblíbené věci, jako jsou mezery nebo „>“.

  3. Pro každého ID ve voliči přidejte jedničku ke třetímu číslu zprava.

     #head je 0,0,0,0,0,1,0,0 #head #logo je také 0,0,0,0,0,2,0,0

  Myslím, že jste pochopili pointu, nyní si můžete udělat malý kvíz, abyste to zjistili:

  Kvíz

  
  
  
  Otázka: Jakou barvu bude mít pozadí v odstavci?
  Odpověď: Správně, červená, protože selektoru je jedno, co si myslíte, že tam je, a nezáleží mu na vzdálenosti mezi tagy. A protože je váha značek stejná, použije se poslední.
  ?
  
  
  
  Otázka: Jakou barvu bude mít pozadí v našem divu?
  Odpověď: Správně, červená, protože při hloubkovém měření hmotnosti stále dáváte mezi třídy mezeru, znaménko větší než, nebo je píšete těsně. Hmotnost všech těchto voličů je stejná, to znamená, že bude použit poslední.
  ?
  
  
  
  Otázka: Pořád to samé.
  Odpověď: A odpověď je pro změnu jiná: naše diva bude šedá. Protože jak jsem uvedl výše, selektoru je absolutně lhostejné, co jste tam myslel. První volič má větší váhu a nikoho nezajímá, že to asi není chování, které jste očekávali.

  Pokračujeme v odhalování tajemství

  Stále nám zbývá tolik čísel a asi opravdu chceme zjistit, co všechna znamenají – pokračujeme v odhalování tajemství.
  1. Volič * absolutně beztíže, tedy úplně.
  2. Volič atributů toto je nejběžnější pseudotřída a váží stejně jako běžné třídy
  3. Jakýkoli inline styl napsaný v atributu style=”” prvku má automaticky přednost 0,0,0,0,1,0,0,0 , což ho okamžitě velmi ochladí.
  4. A další čtyři číslice jsou všichni naši staří přátelé pouze s přívlastkem !důležité

     Div ( background-color: gray !important; ) Má váhu při definování vlastnosti background-color - 0,0,0,1,0,0,0,0 .header ( background-color: gray !important; ) 0, 0,1,0,0,0,0,0

  Všichni milujeme kvízy

  ?