Tyyppi - CSS-temppuja

Anonim

Tyyppivalitsin (jota joskus kutsutaan elementtityypin valitsimeksi) vastaa elementtejä vastaavan elementtisolmun nimiin, kuten

, ja tunnisteet. Tyyppivalitsimia käytetään yleensä "tyylilajin" muutoksiin sivuston tyyliin.

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

Yleinen käyttö

Tyyppivalitsimet asetetaan usein oletusasetuksiksi, kuten CSS-nollaus, jossa selaimen oletusasetukset on tarkoitus ohittaa. Esimerkki normalize.css: n ensimmäisestä rivistä, suosittu CSS-nollaus:

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

Yllä olevat tyyppivalitsimet asettavat kyseisten tunnisteiden näyttöominaisuuden estämään, niin että mitä tahansa näistä tunnisteista käytetään kaikkialla sivustossa, ne näytetään estona, ellei niitä korvata tietyllä tyylillä.

Parhaat käytännöt

Yleensä pidetään huonona käytäntönä hienojen yksityiskohtien muutosten tekemistä pelkästään tyypin valitsimella. Esimerkiksi "color: white" -ominaisuuden soveltaminen peittämättömästi kaikkiin tunnisteisiin olisi harvoin hyödyllistä millä tahansa sivustolla. Tämä johtuu siitä, että tunnisteet ovat yleisiä ja niitä käytetään sivustoissa eri tarkoituksiin.

Kuitenkin tyypin valitsin kuten body ( ), asettamalla oletuksena font-size ja line-heighton yhteinen. Tämä johtuu osittain siitä, että millä tahansa sivulla voi olla vain yksi tunniste, joten ristiriitoja on vähemmän.

Tyyppivalitsimen tarkkuus ja suorituskyky

Tyyppivalitsimet ovat spesifisyyden kaskadin alimmalla tasolla (yleensä kirjoitettu muodossa 0, 0, 0, 1), mikä tarkoittaa, että melkein kaikki ohittaa pelkän tyyppivalitsimen kautta käytetyn tyylin ja lisäämällä tyypin valitsimen luokkaan tai tunnukseen CSS tarjoaa minimaalisen lisäspesifisyyden.

Tyyppivalitsimet sijoittuvat myös CSS-tehokkuustasolla matalammiksi kuin luokat ja tunnukset. Siksi on teknisesti parempi suorituskyvyn valinta käyttää luokkaa tai tunnusta kuin yleisempää tyypin valitsinta (vaikka todellinen nopeusero on yleensä vähäinen).

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
Minkä tahansa Minkä tahansa Minkä tahansa Minkä tahansa Minkä tahansa Minkä tahansa Minkä tahansa