Típus - CSS-trükkök

Anonim

A Típusválasztó (néha Element Type Selector néven is említik) elemeket illeszt a megfelelő elemcsomópont nevéhez, például

, és címkék. A típusválasztókat általában a webhely stílusának „széles körű” megváltoztatására használják.

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

Általános használat

Gyakran előfordul, hogy a típusválasztókat alapértelmezettként állítják be, például egy CSS-visszaállítás során, ahol a böngésző alapértelmezettjeit felül kívánja írni. Példa a normalize.css első sorára, egy népszerű CSS-visszaállításra:

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

A fenti Típusválasztók blokkolják a címkék megjelenítési tulajdonságát, így bármikor bármelyik címkét felhasználják az egész webhelyen, blokkként jelennek meg, hacsak nem írják felül egy konkrétabb stílus.

Legjobb gyakorlatok

Általában rossz gyakorlatnak tekinthető a finom részletek megváltoztatása csak a típusválasztóval. Például a „color: white” tulajdonság takarékos alkalmazása minden címkére ritkán lenne hasznos bármely webhelyen. Ez azért van, mert a címkék általánosak, és az egész webhelyen különféle célokra használják őket.

Azonban egy olyan típusválasztóval, mint például body ( )az alapértelmezett beállítás, font-size és line-heightgyakori. Ez részben annak tudható be, hogy egy adott oldalon csak egy címke lehet, így kevesebb az esély a konfliktusokra.

Típusválasztó specifikáció és teljesítmény

A típusválasztók a specifikussági kaszkád legalacsonyabb szintjén vannak (általában 0, 0, 0, 1 formátumban írva), ami azt jelenti, hogy szinte bármi felülírja a csak a Típusválasztóval alkalmazott stílust, és Típusválasztót ad hozzá egy osztályhoz vagy azonosítóhoz a a CSS minimális extra specifitást biztosít.

A típusválasztók szintén alacsonyabban helyezkednek el a CSS hatékonysági skálán, mint az osztályok és azonosítók. Ezért technikailag jobb választás egy osztály vagy azonosító használata, mint az általánosabb típusválasztó (bár a valós sebességkülönbség általában elhanyagolható).

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
Bármi Bármi Bármi Bármi Bármi Bármi Bármi