Ef þú ætlar að nota CSS reglulega þarftu að öðlast skilning á því hvaða sérkenni er og hvernig það er beitt.

Annað en flóðir og stöður, sérstaða getur verið einn af erfiðustu hlutum til að venjast, hvað þá að læra. Valdararnir sem þú notar í CSS þínum eru allir með mismunandi lóð og þau eru stjórnað af sérstöðu. Þess vegna er stundum ekki endurspeglast í hönnun þinni þegar þú notar reglu á frumefni.

Ef þú hefur einhvern tíma treyst á ótti! Mikilvægt leitarorð til að hakka CSS þinn, þá er þessi grein fyrir þig.

Hvernig lesandi les CSS

Til að fá grunninn þinn traustan þarftu að vita hvernig vafrinn lesi í raun CSS og hvernig reglur eru brotnar.

Í fyrsta lagi vafrinn lesi stíllark frá toppi til botns sem þýðir að með þessum kóða:

/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}

Reglan sem þú tilgreindir í línu 10 verður yfirtekin og þessi akkeri merki verður blár því að vafrinn muni íhuga reglur frekar niður CSS til að halda meiri forgang.

Þetta virkar líka með raunverulegri röð sem þú flytur inn css skrár, til dæmis:

Þar sem þú setur custom.css eftir the style.css nokkuð sem þú skrifar í style.css (afsláttur fyrir nú, þyngd veljari) verður yfirtekin og skipt út fyrir það sem er í custom.css, þessi tækni er oft notuð af höfundum þema til að gefa notandanum einhverja pláss til að bæta eigin stíl án þess að breyta aðalskránni. (Athugaðu þó að sérsniðin.css kemur ekki í stað stíll.css alveg, aðeins þær reglur sem eru sérstaklega brotnar yfir verða skipt út.)

Sérkenni

Allt hér að ofan gildir aðeins ef þú notar sömu þyngd á hverju vali. Ef þú tilgreinir auðkenni, kennslustundir eða stafsetningarþætti þá gefurðu þeim þyngd, og það er sérkenni.

Það eru fjórir flokkar sem skilgreina sértækisstig valsins: inline stíll (þessi sjálfur eru stundum notuð af javascript), kennitölur, flokkar og þættir. Hvernig á að mæla sérhæfni? Sérkenni er mæld í stigum, þar sem hæsta stigs gildi er beitt.

  • ID er virði 100 stig.
  • Flokkar eru 10 stigar virði.
  • Þættirnir eru 1 stig.

Vitandi þetta, ef þú notar val eins og svo:

#content .sidebar .module li a

Heildarþyngd hennar er 122 stig (100 + 10 + 10 + 1 +1), sem er kennitölu, tveir flokkar og tveir þættir.

Atriði sem þarf að muna

  • Kennimerki eru of mikið þyngd samanborið við flokka og þætti svo þú ættir að takmarka notkun kennimarka í stílblöðunum þínum á takmörkuðu lágmarki.
  • Í þeim tilvikum þar sem valsmenn hafa sömu þyngd, þá er röðin sem þau birtast að snúa aftur til síðarnefndu, sem er hærri forgang.
  • Stíll embed in í HTML trump stílum þínum í stíll, vegna þess að þeir eru nær frumefni.
  • Eina leiðin til að hunsa inline stíl er að nota mikilvægar yfirlýsingar.
  • Gerviklasar og eiginleikar hafa sömu þyngd og venjulegir flokkar.
  • Pseudo þættir hafa einnig sömu þyngd og eðlilegur þáttur.
  • Alhliða valbúnaðurinn (*) hefur enga þyngd.

Dæmi

ul li a {color: red;}

Þessi valbúnaður mun halda þyngd 3, sem þýðir að bara með því að bæta við bekknum einhvers staðar er hægt að hunsa það.

.content #sidebar {width: 30%;}

Þessi valbúnaður er 110 stig, aðallega vegna þess að auðkenni sem bætir 100 stig af 110 samtals.

.post p:first-letter {font-size: 16px;}

Þessi valbúnaður er 12 stig, frá því að gervi-frumefni: Fyrsti stafurinn vegur aðeins 1 stig og einnig er p-merkið.

p {font-family: Helvetica, arial, sans-serif;}

Þessi valbúnaður vegur aðeins 1 stig. Þessi tegund valhneigðar ætti að nota efst á síðunni þegar þú merkir grunnstílina sem síðar er hægt að yfirgefa fyrir tiltekin svæði.

Alltaf hafðu í huga að til að hunsa kennimerki þarf að skrifa 256 flokka fyrir sama þætti, eins og svo:

#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}

Aðeins þessi leið mun seinna valið slá einn með því að nota kennitölu.

Niðurstaða

Sérkenni er ekki áberandi þáttur í CSS, en að mínu mati er það mest sjást. Að fá sérstöðu þína rétt hjálpar ekki aðeins að koma í veg fyrir galla, en það mun hraða bæði þróun þinni og lokasvæðinu þínu.

Gera þú ofnotkunarupplýsingar þegar þú skrifar CSS? Ert þú alltaf að falla aftur á! Mikilvægt? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, nákvæmni mynd um Shutterstock.