Typ - Triky CSS

Anonim

Výběr typu (někdy označovaný jako výběr typu prvku) odpovídá prvkům s odpovídajícím názvem uzlu prvku, například

, a značky. Selektory typů se obecně používají k provedení „širokého tahu“ ve stylu webu.

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

Běžné použití

Selektory typů jsou často nastaveny jako výchozí, například při resetu CSS, kde je záměrem přepsat výchozí nastavení prohlížeče. Příklad z prvního řádku populárního resetu CSS normalize.css:

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

Výše uvedené selektory typů nastavují vlastnost zobrazení těchto značek na blokování, takže kdykoli se některá z těchto značek použije na celém webu, zobrazí se jako blok, pokud nebude přepsána konkrétnějším stylem.

Osvědčené postupy

Obecně se považuje za špatný postup aplikovat jemné změny detailů pouze selektorem typu. Například hromadné použití vlastnosti „color: white“ na všechny značky by bylo zřídka na jakémkoli webu užitečné. Je to proto, že značky jsou obecné a používají se na různých webech k různým účelům.

S výběrem typu, jako je například body ( )nastavení výchozí font-size a line-heightje běžné. To je částečně způsobeno skutečností, že na dané stránce může být pouze jedna značka, takže existuje méně příležitostí ke konfliktům.

Specifikace a výkon selektoru typu

Selektory typů jsou na nejnižší úrovni kaskády specificity (obvykle psané jako 0, 0, 0, 1), což znamená, že téměř cokoli přepíše styl použitý pouze pomocí Selektoru typu a přidání selektoru typu do třídy nebo ID v váš CSS poskytuje minimální zvláštní přesnost.

Selektory typů mají také nižší hodnocení na škále efektivity CSS než třídy a ID. Proto je technicky lepší volba výkonu použít třídu nebo ID než obecnější Type Selector (ačkoli skutečný rozdíl rychlostí je obvykle zanedbatelný).

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Žádný Žádný Žádný Žádný Žádný Žádný Žádný