Cabhraíonn Ranganna agus IDanna Do Do CSS a Leathnú
Éilíonn láithreáin ghréasáin a thógáil ar an nGréasán inniu tuiscint dhomhain ar CSS (Bileoga Stíl Cascáideacha). Seo iad na treoracha a thugann tú láithreán gréasáin chun a chinneadh conas a leagfaidh sé amach i bhfuinneog an bhrabhsálaí. Cuirfidh tú sraith "stíleanna" i bhfeidhm ar do dhoiciméad HTML a chruthaíonn cuma agus mothú do leathanach gréasáin.
Tá go leor bealaí ann chun na stíleanna thuasluaite sin a chur i bhfeidhm ar dhoiciméad, ach is minic a theastaíonn uait stíl a úsáid ar chuid de na heilimintí i gcáipéis amháin, ach níl gach gné den eilimint sin ann.
B'fhéidir gur mhaith leat stíl a chruthú gur féidir leat iarratas a dhéanamh ar roinnt eilimintí i gcáipéis, gan an riail stíl a athdhéanamh do gach cás ar leith. Chun na stíleanna atá ag teastáil a bhaint amach, úsáidfidh tú tréithe HTML agus aitheantais HTML. Is tréithe domhanda iad na tréithe seo is féidir iad a chur i bhfeidhm ar bheagnach gach clibe HTML . Ciallaíonn sé sin go bhfuil tú ag baint le rannáin, míreanna, naisc nó aon chuid de na píosaí eile HTML i do dhoiciméad, is féidir leat dul i dtréithe ranga agus ID cabhrú leat an tasc seo a bhaint amach!
Roghnóirí Rang
Ceadaíonn an roghnóir ranga tú stíleanna il a leagan leis an eilimint chéanna nó an chlib i gcáipéis. Mar shampla, b'fhéidir gur mhaith leat go mbeadh codanna áirithe de do théacs ar a dtugtar i ndath difriúil ón gcuid eile den téacs sa doiciméad. D'fhéadfadh na hailt seo a bheith mar "airdeall" go bhfuil tú ag leagan síos ar an leathanach. D'fhéadfá do chuid míreanna a shannadh le ranganna mar seo:
p {dath: # 0000ff; }
p.alert {dath: # ff0000; }
Socraigh na stíleanna seo dath na míreanna go léir go gorm (# 0000ff), ach bheadh aon mhír le tréith ranga "alert" in ionad dearbhaithe dearg (# ff0000). Tá sé seo toisc go bhfuil sainiúlacht níos airde ag tréith an ranga ná an chéad riail CSS, a úsáideann ach roghnóir tag.
Nuair a bheidh sé ag obair le CSS, déanfaidh riail níos sainiúla ceann níos lú ar leith a sheasamh. Mar sin, sa sampla seo, leagann an riail níos ginearálta dath do na míreanna go léir, ach an dara riail níos sainiúla ná mar a tharlaíonn sé nach leagtar síos ach ar roinnt míreanna amháin.
Seo mar a d'fhéadfaí é seo a úsáid i roinnt marcála HTML:
Taispeánfaí an mhír seo i gorm, arb é an réamhshocrú don leathanach.
Bheadh an mhír seo i gorm freisin.
Agus bheadh an mhír seo ar taispeáint i dearg ós rud é go ndéanfadh tréith an ranga an dath gorm caighdeánach a scríobh ón stíl roghnóir eilimintí.
Sa sampla sin, ní bheadh feidhm ag stíl "p.alert" ach amháin le heilimintí mír a úsáideann an rang "airdeall" sin. Má theastaigh uait an aicme sin a úsáid ar ghnéithe ilghnéitheacha HTML, ba mhaith leat an ghné HTML a bhaint as tús an glao stíl (ach bí cinnte go bhfágfaidh tú an tréimhse (.) i bhfeidhm), mar seo:
.alert {background-color: # ff0000;}
Tá an rang seo ar fáil anois d'aon ghné atá riachtanach. Gheobhaidh aon phíosa de do HTML a bhfuil luach tréith ranga "alert" an stíl seo anois. Sa HTML thíos, tá mír araon againn agus leibhéal ceannteideal 2 a úsáideann an rang "airdeall". Bheadh dath cúlra dearg bunaithe ar an dá cheann de na CSS a léirigh muid díreach.
Scríobhadh an mhír seo go dearg.
Agus bheadh an h2 seo dearg freisin
Ar láithreáin ghréasáin inniu, is minic a úsáidtear tréithe ranga ar an chuid is mó de na heilimintí toisc go bhfuil sé níos éasca oibriú leo ó thaobh sainiúlacht gurb iad IDanna. Gheobhaidh tú na leathanaigh HTML is mó atá le líonadh le tréithe ranga, cuid acu arís agus arís eile arís agus arís eile i gcáipéis agus daoine eile a d'fhéadfadh a bheith le feiceáil uair amháin.
Roghnóirí ID
Ceadaíonn an roghnóir ID duit ainm a thabhairt ar stíl shonrach gan é a chomhcheangal le tag nó eilimint HTML eile. Abair go raibh roinn agat i do mharcáil HTML ina bhfuil eolas faoi ócáid.
D'fhéadfá tréith ID "teagmhas" a thabhairt don roinn seo, agus ansin má theastaigh uait an roinn sin a léiriú le teorainn dubh 1-picteilín ar fad, scríobhann tú cód ID mar seo:
#event {teorainn: 1px soladach # 000; }
Is é an dúshlán atá le roghnóirí ID ná nach féidir iad a athdhéanamh i gcáipéis HTML. Caithfidh siad a bheith uathúil (is féidir leat an t-aitheantas céanna a úsáid ar leathanaigh éagsúla de do shuíomh, ach amháin i ngach doiciméad HTML aonair). Mar sin, dá mbeadh 3 imeacht agat a raibh gá leis an teorainn seo go léir, bheadh ort tréithe ID "event1", "event2" agus "event3" a thabhairt dóibh agus stíl gach ceann acu. Dá bhrí sin, bheadh sé níos éasca an tréith ranga réamhluaite "teagmhas" a úsáid agus iad a stíl go léir ag an am céanna.
Dúshlán eile le tréithe ID ná go bhfuil sainiúlacht níos airde acu ná tréithe ranga. Ciallaíonn sé seo, más gá duit go mbeadh CSS ag maoirseacht ar stíl a bunaíodh roimhe seo, is féidir go mbeadh sé deacair é sin a dhéanamh má tá tú ag brath go mór ar IDanna. Is ar an gcúis seo go bhfuil go leor forbróirí gréasáin tar éis bogadh ar aghaidh ó úsáid a bhaint as IDanna ina marcáil, fiú amháin má tá sé i gceist acu an luach sin a úsáid aon uair amháin, agus go n-éireoidh siad in ionad na tréithe ranga neamhspleácha le haghaidh beagnach gach stíl.
Is é an réimse amháin ina bhfuil tréithe ID a thagann isteach nuair is mian leat leathanach a chruthú a bhfuil naisc ancaire in-leathanach aige. Mar shampla, má tá suíomh gréasáin stíl parallax agat ina bhfuil an t-ábhar go léir ar leathanach amháin le naisc a "léim" go dtí codanna éagsúla den leathanach sin. Déantar é seo trí úsáid a bhaint as tréithe ID agus naisc téacs a úsáideann na naisc ancaire seo.
Ní chuirfeadh ach luach na tréith sin, roimh an # siombail, roimh tréith href an nasc, mar seo:
Is é seo an nasc
Nuair a bheidh tú ag cliceáil nó i dteagmháil léi, léimfidh an nasc seo leis an gcuid den leathanach a bhfuil an tréith ID seo ann. Mura n-úsáidtear aon ghné ar an leathanach seo an luach ID, ní dhéanfadh an nasc rud ar bith.
Cuimhnigh, más mian leat a chruthú ar an leathanach a nascann ar shuíomh, beidh gá le tréithe ID a úsáid, ach is féidir leat ranganna a dhéanamh chun críocha stiúrtha ginearálta CSS. Seo mar a thabharfaidh mé suas leathanaigh inniu - d'úsáid mé roghnóirí ranga an oiread agus is féidir agus ní théann siad ach le IDanna nuair is gá dom an tréith le gníomhú, ní hamháin mar dhúiche do CSS ach freisin mar nasc in-leathanach.
Airteagal bunaidh le Jennifer Krynin. Arna eagarthóireacht ag Jeremy Girard ar 8/9/17