Typ - Triky CSS

Anonim

Selektor typov (niekedy označovaný ako selektor typov prvkov) spáruje prvky s príslušným názvom uzla prvku, napríklad

, a značky. Selektory typov sa zvyčajne používajú na vykonávanie „širokých ťahov“ zmien v štýle stránok.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Bežné použitie

Selektory typov sú často nastavené ako predvolené, napríklad pri resetovaní CSS, kde je zámerom prepísať predvolené hodnoty prehľadávača. Príklad z prvého riadku populárneho resetu CSS normalize.css:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

Vyššie uvedené Selektory typov nastavujú vlastnosť zobrazenia týchto značiek na blokovanie, takže kedykoľvek sa ktorákoľvek z týchto značiek použije na celom webe, zobrazia sa ako blok, pokiaľ nebudú prepísané konkrétnejším štýlom.

Osvedčené postupy

Všeobecne sa považuje za nesprávny postup aplikovať zmeny jemných detailov iba pomocou Selektora typu. Napríklad plošné použitie vlastnosti „color: white“ na všetky značky by bolo na akomkoľvek webe zriedka užitočné. Je to tak preto, lebo značky sú všeobecné a na rôznych weboch sa používajú na rôzne účely.

Avšak pri voľbe typu, ako je body ( ), je nastavenie predvolenej hodnoty font-size a line-heightje bežné. Je to čiastočne spôsobené tým, že na ľubovoľnej stránke môže byť iba jedna značka, takže existuje menej príležitostí na konflikty.

Špecifikácia a výkon selektora typu

Selektory typov sa nachádzajú na najnižšej úrovni kaskády špecifickosti (všeobecne sa píše ako 0, 0, 0, 1), čo znamená, že takmer čokoľvek prepíše štýl použitý iba prostredníctvom Selektora typov a pridanie Selektora typov do triedy alebo ID v váš CSS poskytuje minimálnu zvláštnosť.

Selektory typov majú tiež nižšie hodnotenie na škále efektivity CSS ako triedy a identifikátory. Preto je technicky lepšou voľbou výkonu použiť triedu alebo ID ako všeobecnejší selektor typu (aj keď skutočný rozdiel v rýchlosti je zvyčajne zanedbateľný).

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
akýkoľvek akýkoľvek akýkoľvek akýkoľvek akýkoľvek akýkoľvek akýkoľvek