Conas Ranganna Il-CSS a Úsáid ar Eilimint Aonair

Níl aon rang CSS amháin in aghaidh an eilimint agat.

Tugann Caileoga Stíleanna Cascáideacha (CSS) duit chuma eilimintí a shainiú trí na ceanglais a chuireann tú isteach ar an eilimint sin a ionchorprú. Is féidir na tréithe seo a bheith i gceart agus le haitheantas nó i rang agus, cosúil le gach tréith, cuireann siad faisnéis chabhrach leis na heilimintí a bhfuil siad ceangailte leo. Ag brath ar an tréith a chuireann tú le eilimint, is féidir leat roghnóir CSS a scríobh chun na stíleanna amhairc is gá a chur i bhfeidhm a theastaíonn chun an cuma agus an mothúchán a bhaint amach don eilimint sin agus don láithreán gréasáin ina iomláine.

Cé go n-oibríonn IDanna nó ranganna chun rialacha CSS a bhaint amach, modhanna dearadh nua-aimseartha gréasáin babhtáil le ranganna thar IDanna, go páirteach, toisc nach bhfuil siad níos sainiúla agus níos éasca a bheith ag obair leis an iomlán. Sea, gheobhaidh tú go leor suímh fós a úsáideann IDanna, ach tá na tréithe sin á gcur i bhfeidhm níos giorra ná mar a bhí san am atá caite agus tá na ranganna tar éis glacadh le leathanaigh ghréasáin nua-aimseartha.

Ranganna Aonair nó Il i CSS?

Sa bhformhór de chásanna, ba mhaith leat tréith aicme amháin a shannadh d'eilimint, ach níl tú i dteideal ach rang amháin i ndáiríre ar bhealach a bhfuil tú le IDanna. Cé nach féidir le eilimint amháin aitheantas ID amháin, is féidir leat ranganna ilghnéitheacha a thabhairt go hiomlán agus, i gcásanna áirithe, déanfaidh tú an leathanach a dhéanamh níos éasca le stíl agus i bhfad níos solúbtha!

Más gá duit il-ranganna a shannadh d'eilimint, is féidir leat na ranganna breise a chur leis agus spás a scaipeadh i do tréith.

Mar shampla, tá trí rang sa mhír seo:

pullquote featured left "> Seo téacs na paragraf

Leagann sé seo na trí ranganna seo a leanas ar an gclib mír:

  • Pullquote
  • Réadmhaoin
  • Clé

Fógraíodh na spásanna idir gach ceann de na luachanna ranga seo. Is iad na spásanna sin a leagann suas iad mar aicmí difriúla, aonair. Is é seo freisin cén fáth nach féidir spásanna a bheith acu i n-ainmneacha ranga, mar go mbainfeadh sé sin iad mar ranganna ar leithligh.

Mar shampla, má d'úsáid tú "tarraingt siar-le feiceáil-chlé" gan spás, bheadh ​​sé ar aon luach ranga, ach an sampla thuas, áit a bhfuil na trí fhocal seo scartha le spás, leagann siad iad mar luachanna aonair. Tá sé tábhachtach an coincheap seo a thuiscint mar a chinneann tú cé na luachanna ranga atá le húsáid ar do chuid leathanaigh ghréasáin.

Nuair atá do luachanna ranga agat i HTML, is féidir leat iad sin a shannadh mar ranganna i do CSS agus na stíleanna ba mhaith leat a chur leis a chur i bhfeidhm. Mar shampla.

.pullquote {...}
.featured {...}
p.left {...}

Sna samplaí seo, bheadh ​​na péirí dearbhuithe agus luachanna CSS taobh istigh de na bracaí cuartha, agus mar a chuirfeadh na stíleanna sin i bhfeidhm ar an roghnóir cuí.

Tabhair faoi deara - má leagannrang ar ghné shonrach (mar shampla, p.left), is féidir leat é a úsáid mar chuid de liosta na ranganna; áfach, a bheith ar an eolas nach ndéanfaidh sé difear ach na heilimintí sin atá sonraithe sa CSS. I bhfocail eile, ní bheidh feidhm ag an stíl p.left ach amháin le míreanna leis an aicme seo ós rud é go bhfuil do roghnóir ag rá go gcuirfí é i "míreanna le luach ranga" ar chlé ". I gcodarsnacht leis sin, ní shonraíonn an dá roghnóir eile san sampla eilimint áirithe, mar sin bheadh ​​feidhm acu maidir le haon eilimint a úsáideann na luachanna ranga sin.

Buntáistí a bhaineann le Ranganna Il

Is féidir le haicmí éagsúla a dhéanamh níos éasca éifeachtaí speisialta a chur le heilimintí gan stíl iomlán nua a chruthú don eilimint sin.

Mar shampla, b'fhéidir gur mhaith leat go mbeadh na cumais chun snámhphointe a dhéanamh ar chlé nó ar dheis go tapa. D'fhéadfá dhá rang a fhágáil ar chlé agus ar dheis le snámhphointe díreach: clé; agus snámhphointe: ceart; iontu. Ansin, aon uair a raibh gné agat a theastaíonn uait chun snámh ar chlé, ba mhaith leat ach an "fág" a chur ar a liosta ranga.

Tá fíneáil ag siúl anseo, áfach. Cuimhnigh go ndearbhaíonn caighdeáin ghréasáin scaradh stíl agus struchtúr. Déantar an struchtúr a láimhseáil trí HTML agus tá stíl i CSS.

Má dhéantar do dhoiciméad HTML a líonadh le heilimintí go bhfuil ainmneacha ranga ar fad cosúil le "dearg" nó "ar chlé", is iad sin ainmneacha a dhearbhaíonn cén chaoi ar cheart breathnú ar eilimintí seachas an méid atá siad, tá tú ag dul trasna an líne sin idir struchtúr agus stíl. Déanaim iarracht mo ainmneacha rang neamh-sheanacha a theorannú a oiread agus is féidir ar an gcúis seo.

Ranganna Il, Seiméitic, agus JavaScript

Buntáiste eile chun úsáid a bhaint as ilranganna ná go dtugann sé go leor féidearthachtaí idirghníomhaíochta duit.

Is féidir leat ranganna nua a chur i bhfeidhm ar ghnéithe atá ann cheana féin a úsáideann JavaScript gan aon cheann de na ranganna tosaigh a bhaint. Is féidir leat ranganna a úsáid chomh maith chun seansamh eilimint a shainmhíniú. Ciallaíonn sé seo gur féidir leat ranganna breise a chur le chéile chun a shainmhíniú a chiallaíonn an eilimint sin go leathnach. Seo é mar a oibríonn Microformats.

Míbhuntáistí a bhaineann le Ranganna Il

Is é an míbhuntáiste is mó a bhaineann le húsáid ranganna il ar do chuid eilimintí ná gur féidir leo a dhéanamh beagán neamhfhósta chun breathnú orthu agus a bhainistiú le himeacht ama. D'fhéadfadh sé a bheith deacair a chinneadh cad iad na stíleanna a mbíonn tionchar acu ar ghné agus má tá scripteanna ar bith ag baint leo. Bíonn cuid mhaith de na creatlaí atá ar fáil inniu, cosúil le Bootstrap, a úsáid go trom d'eilimintí le ilranganna. Is féidir leis an gcód sin a fháil amach agus go crua chun oibriú go han-tapa mura bhfuil tú cúramach.

Nuair a úsáideann tú ranganna il, bíonn riosca agat freisin go ndéanann an stíl do rang amháin an stíl eile a mhaolú fiú amháin más rud é nach raibh sé ar intinn agat é seo a dhéanamh. Is féidir é seo a dhéanamh deacair ansin a fhíorú cén fáth nach bhfuil do stíleanna á gcur i bhfeidhm fiú nuair is cosúil gur chóir dóibh.

Ní mór duit a bheith ar an eolas faoi shainiúlacht, fiú leis na tréithe a chuirtear i bhfeidhm ar an ngné amháin sin!

Trí úsáid a bhaint as uirlis cosúil le huirlisí máistir Gréasáin i Chrome, is féidir leat a fheiceáil go héasca conas a dhéanann do ranganna difear do stíleanna agus an fhadhb seo a bhaineann le stíleanna agus tréithe coinbhleachtaí a sheachaint.

Airteagal bunaidh le Jennifer Krynin. Arna eagarthóireacht ag Jeremy Girard ar 8/7/17