A 'cleachdadh clasaichean agus IDan stoidhle

Cuidich clasaichean agus IDan Leudaich do CSS

Feumaidh làrach-lìn togail air an latha an-diugh tuigse dhomhainn air CSS (Cascading Style Sheets). Is iad seo an stiùireadh a bheir thu làrach-lìn gus dearbhadh ciamar a thèid an cruth a dhèanamh ann an uinneag a 'bhrabhsair. Bidh tu a 'cur a-steach sreath de "stoidhlichean" don sgrìobhainn HTML agad a chruthaicheas coltas agus faireachdainn na duilleig-lìn agad.

Tha iomadh dòigh ann airson na stoidhlichean a tha air ainmeachadh roimhe sin a chur an cèill thar sgrìobhainn, ach gu tric tha thu airson stoidhle a chleachdadh air cuid de na h-eileamaidean ann an sgrìobhainn, ach chan eil a h-uile suidheachadh den eileamaid sin.

Is dòcha gum bi thu airson stoidhle a chruthachadh a dh'fhaodas tu a chur gu grunn eileamaidean ann an sgrìobhainn, gun a bhith a 'feuchainn ris an riaghailt stoidhle a dhèanamh a-rithist airson gach cùis fa leth. Gus na stoidhlichean a tha a dhìth ort a choileanadh, cleachdaidh tu na feartan HTML agus clasaichean ID. Is e feartan cruinneil a tha anns na feartan sin a dh'fhaodar a chleachdadh gu faisg air gach tag HTML . Tha seo a 'ciallachadh a bheil thu a' dealbhadh roinnean, paragrafan, ceanglaichean, liostaichean no pìosan sam bith eile de HTML anns an sgrìobhainn agad, faodaidh tu tionndadh gu feartan ID agus clas cuideachadh le bhith a 'coileanadh na h-obrach seo!

Taghtaichean Clas

Tha an tagraiche clas a 'leigeil leat iomadh stoidhle a shuidheachadh chun an aon eileamaid no tag ann an sgrìobhainn. Mar eisimpleir, is dòcha gum biodh thu airson earrannan sònraichte den teacsa agad a ghairm a-mach ann an dath eadar-dhealaichte bhon chòrr den teacsa san sgrìobhainn. Dh'fhaodadh na h-earrannan a chaidh a chomharrachadh a bhith mar "rabhadh" gu bheil thu a 'suidheachadh air an duilleig. Dh'fhaodadh tu clasaichean mar seo a shònrachadh do pharagrafan:


p {dath: # 0000ff; }
p.alert {dath: # ff0000; }

Bhiodh na stoidhlichean sin a 'suidheachadh dath nan paragrafan gu gorm (# 0000ff), ach bhiodh paragraf sam bith le adhbhar clas "rabhadh" ann an àite dearg (# ff0000). Tha seo air sgàth gu bheil gnè sa chlas nas àirde na a 'chiad riaghailt CSS, a chleachdas tagraiche tagaichean a-mhàin.

Nuair a bhios tu ag obair le CSS, cuiridh riaghladh nas mionaidiche thairis air rud nach eil cho sònraichte. Mar sin anns an eisimpleir seo, tha an riaghailt nas fharsainge a 'suidheachadh dath gach paragraf, ach an dàrna riaghailt nas sònraichte na tha a' toirt thairis air an suidheachadh sin a-mhàin air cuid de pharagrafan.

Seo mar a dh'fhaodar seo a chleachdadh ann an comharra HTML:


Bhiodh am paragraf seo air a thaisbeanadh ann an gorm, is e sin am bunait airson na duilleige.


Bhiodh am paragraf seo cuideachd ann an gorm.


Agus bhiodh am paragraf seo air a thaisbeanadh ann an dearg bho chuireadh an gnè clas thairis air an dath gorm àbhaisteach bhon stuth roghnaiche eileamaid.

Anns an eisimpleir sin, cha bhiodh an stoidhle "p.alert" a 'buntainn ach ri eileamaidean paragraf a chleachdas an clas "rabhaidh" sin. Nam biodh tu airson an clas sin a chleachdadh thar iomadh eileamaid HTML, bhiodh tu dìreach air falbh bhon eileamaid HTML bho thoiseach an gairm stoidhle (dìreach dèan cinnteach gu fàg thu an ùine (.) an àite), mar seo:


.alert {background-color: # ff0000;}

Tha an clas seo a-nis ri fhaotainn airson eileamaid sam bith a tha a dhìth. Bidh pìos sam bith den HTML agad aig a bheil luach sònraichte clas "rabhadh" a-nis a 'faighinn an stoidhle seo. Anns an HTML gu h-ìosal, tha an dà chuid paragraf agus ceann-ìre 2 a bhios a 'cleachdadh an clas "rabhaidh". Bhiodh dathan-cùil de dhearg stèidhichte air an dà chuid stèidhichte air an CSS a sheall sinn dìreach.


Bhiodh am paragraf seo sgrìobhte ann an dearg.

Agus bhiodh an h2 seo dearg cuideachd

Air làraich-lìn an-diugh, bidh feartan clasa air an cleachdadh gu tric air a 'mhòr-chuid de na h-eileamaidean oir tha iad nas fhasa obrachadh le sealladh sònraichte gu bheil ID. Gheibh thu a 'chuid as motha de dhuilleagan HTML làithreach ri lìonadh le feartan clas, cuid dhiubh a' nochdadh iomadh uair ann an sgrìobhainn agus feadhainn eile nach fhaod ach aon turas a-mhàin.

Taghaidhean ID

Leigidh an neach-roghnaiche ID dhut ainm a thoirt gu stoidhle sònraichte gun a bhith ga cheangal le tag no eileamaid HTML eile . Innis gu robh roinn agad anns a 'chomharra HTML agad anns a bheil fiosrachadh mu thachartas.

Dh'fhaodadh tu feart ID de "tachartas" a thoirt don roinn seo, agus an uairsin ma bha thu airson an roinn sin a mhìneachadh le crìochan dubh 1-pictear-leathann leathann tha thu a 'sgrìobhadh còd ID mar seo:


#event {border: 1px solid # 000; }

Is e an dùbhlan le luchd-taghaidh ID nach urrainn iad a bhith air an ath-aithris ann an sgrìobhainn HTML. Feumaidh iad a bhith sònraichte (faodaidh tu an aon ID a chleachdadh air iomadh duilleag air an làrach agad, ach dìreach aon uair anns gach sgrìobhainn HTML fa leth). Mar sin, nam biodh 3 tachartasan agad a dh 'fheumadh a h-uile duine a' chrìoch seo, dh'fheumadh tu dhaibh feartan ID de "event1", "event2" agus "event3" a thoirt dhaibh agus stoidhle gach fear dhiubh. Mar sin, bhiodh e na b 'fhasa a bhith a' cleachdadh a 'ghnè clas mu dheireadh de "tachartas" agus an stoidhle iad uile aig an aon àm.

Is e dùbhlan eile le feartan ID gu bheil barrachd sònraichte aca na feartan clas. Tha seo a 'ciallachadh ma dh'fheumas tu CSS a bhith os cionn stoidhle a chaidh a stèidheachadh roimhe, faodaidh e a bhith duilich sin a dhèanamh ma tha thu air brath gu mòr air ID. Is ann air an adhbhar seo a tha mòran de luchd-leasachaidh lìn air gluasad air falbh bho bhith a 'cleachdadh IDan anns a' chomharra aca, eadhon ged nach eil dùil aca ach an luach sin a chleachdadh aon uair, agus an àite sin a thionndadh gu na feartan clas nach eil cho sònraichte airson cha mhòr a h-uile stoidhle.

Is e an aon raon far a bheil na comharran ID a 'tighinn a-steach a chluich nuair a tha thu airson duilleag a chruthachadh aig a bheil ceanglaichean air-duilleig. Mar eisimpleir, ma tha làrach-lìn parallax agad anns a bheil a h-uile susbaint air aon duilleag le ceanglaichean a tha "a 'leum" gu diofar phàirtean den duilleig sin. Tha seo air a dhèanamh le bhith a 'cleachdadh ghoireasan ID agus ceanglaichean teacsa a chleachdas na ceanglaichean taic sin.

Dhèanadh tu dìreach luach a 'ghnè sin, a chaidh a thoirt seachad le # symbol, gu gnè href a' cheangal, mar seo:

Seo an ceangal

Nuair a thèid briogadh no toucheadh, leumaidh an ceangal seo ris a 'phàirt den duilleig aig a bheil an t-adhbhar ID seo. Mura h-eil dad sam bith air an duilleag a 'cleachdadh an luach ID seo, cha dèanadh an ceangal rud sam bith.

Cuimhnich, ma tha thu airson cruthachadh air-loidhne a 'ceangal air làrach, feumar feum de chomharran ID, ach faodaidh tu fhathast clasaichean a dhèanamh airson adhbharan coitcheann CSS. Seo mar a chomharraicheas mi duilleagan an-diugh - chleachd mi roghainn clasaichean cho mòr 's as urrainn dhomh agus chan eil mi a' tionndadh gu IDs nuair a bhios feum agam air a 'ghnè airson a bhith ag obair chan ann a-mhàin mar dubhan airson CSS ach cuideachd mar cheangal air-loidhne.

Artaigil tùsail le Jennifer Krynin. Air a dheasachadh le Jeremy Girard air 8/9/17