Mar a chleachdas tu iomadh clas CSS air Aonad Singilte

Chan eil thu air a chuingealachadh ri aon clas CSS airson gach eileamaid.

Leigidh Cascading Style Sheets (CSS) dhut coltas eilim a mhìneachadh le bhith a 'ceangal ris na feartan a tha thu a' cur a-steach ris an eileamaid sin. Faodaidh na feartan sin a bhith an dàrna cuid agus ID no clas agus, mar a h-uile buadhan, bidh iad a 'cur fiosrachadh feumail ris na h-eileamaidean a tha iad ceangailte. A rèir dè an t-adhbhar a chuireas tu ri eileamaid, faodaidh tu roghnaichear CSS a sgrìobhadh gus na stoidhlichean lèirsinneach riatanach a tha a dhìth a chur a-steach a tha a dhìth gus sealladh agus faireachdainn a choileanadh airson an eileamaid sin agus an làrach-lìn gu h-iomlan.

Ged a tha an dà chuid IDs no clasaichean ag obair airson riaghailtean CSS a cheangal riutha, tha modhan dealbhaidh lìn ùr a 'fàgail chlasaichean thar IDan, gu ìre, seach gu bheil iad cho sònraichte agus nas fhasa a bhith ag obair leis an fharsaingeachd. Tha, gheibh thu fhathast iomadh làrach a bhios a 'cleachdadh IDan, ach tha na feartan sin gan cur an gnìomh nas giorra na san àm a dh'fhalbh agus tha na clasaichean air gabhail thairis air duilleagan lìn ùra.

Clasaichean Aonadan no Iomadan ann an CSS?

Anns a 'chuid as motha de chùisean, bheireadh tu adhbhar clas singilte do eileamaid, ach chan eil thu a' cuingealachadh dìreach ri aon chlas mar a tha thu le ID. Ged nach urrainn ach aon nì ID a bhith aig eileamaid, faodaidh tu iomadh seòrsa clas a thoirt seachad agus, ann an cuid de shuidheachaidhean, nì sin do dhuilleag nas fhasa stoidhle agus tòrr nas sùbailte!

Ma tha feum agad air iomadh clas a shònrachadh gu eileamaid, faodaidh tu na clasaichean a bharrachd a chur ris agus dìreach cuir às dhaibh le àite anns a 'ghnothach agad.

Mar eisimpleir, tha trì clasaichean aig a 'pharagraf seo:

pullquote featured left "> Seo teacsa a 'pharagraf

Tha seo a 'suidheachadh nan trì clasaichean a leanas air a' phàipear paragraf:

  • Pullquote
  • Air a chomharrachadh
  • Clì

Sònraich na raointean eadar gach aon de na luachan clasa sin. Is e na h-àiteachan sin a tha gan cur suas mar chlasaichean eadar-dhealaichte, fa leth. Is e seo cuideachd carson nach fhaod àiteachan a bhith ann an ainmean clasa, oir bhiodh sin gan cur mar chlasaichean fa leth.

Mar eisimpleir, ma chleachdas tu "pullquote-featured-left" gun àite, bhiodh e aon luach air a 'chlas, ach an eisimpleir gu h-àrd, far a bheil na trì faclan sin air an dealachadh le àite, bidh iad gan luachan fa leth. Tha e cudromach tuigsinn a 'bhun-bheachd seo nuair a tha thu a' co-dhùnadh dè na luachan clas a chleachdas tu air na duilleagan-lìn agad.

Aon uair 's gum bi luachan a' chlas agad ann an HTML, faodaidh tu an uair sin iad sin a shònrachadh mar chlasaichean anns an CSS agad agus na stoidhlichean a bhiodh tu airson cur ris a chur an gnìomh. Mar eisimpleir.

.pullquote {...}
a tha neo-mhothachail {...}
p.left {...}

Anns na h-eisimpleirean sin, bhiodh na dearbhaidhean CSS agus luachan paidhrichean taobh a-staigh nan sreathan lùbach, agus mar sin bhiodh na stoidhlichean sin air an cur a-steach don roghnaichear iomchaidh.

Nota - ma shuidhicheas tu clas gu eileamaid shònraichte (mar eisimpleir, p.left), faodaidh tu fhathast a chleachdadh mar phàirt de liosta chlasaichean; ge-tà, bi mothachail nach toir e buaidh ach air na h-eileamaidean sin a tha air an sònrachadh anns an CSS. Ann am faclan eile, cha tèid an stoidhle p.ly a chleachdadh ach a-mhàin ri paragrafan leis a 'chlas seo seach gu bheil an tagraiche agad ag ràdh ga chur gu "paragrafan le luach clas" clì ". An coimeas ri sin, chan eil an dà thaghadh eile san eisimpleir a 'sònrachadh eileamaid àraidh, mar sin bhiodh iad a' cur a-steach gu eileamaid sam bith a chleachdas luachan a 'chlas sin.

Buannachdan Clasaichean Ioma-fhillte

Faodaidh iomadh clas a dhèanamh nas fhasa e bhith a 'cur buaidhean sònraichte ri eileamaidean gun a bhith a' cruthachadh stoidhle ùr gu lèir airson an eileamaid sin.

Mar eisimpleir, is dòcha gum bi thu airson comas a bhith agad nithean a bhogadh air an taobh chlì no deas gu luath. Faodaidh tu dà chlas a sgrìobhadh clì is deas le dìreach air bhog: clì; agus flùraichean: ceart; ann annta. An uairsin, nuair a bhiodh rudeigin agad a dh 'fheumas tu a ghlèidheadh ​​air chlì, cuiridh tu an "clì" gu clas a-steach.

Tha loidhne mhath ann airson coiseachd an seo, ge-tà. Cuimhnich gu bheil ìrean lìn a 'toirt òrdugh air stoidhle agus structar a sgaradh. Bidh an structar air a làimhseachadh tro HTML fhad 'sa tha stoidhle ann an CSS.

Ma tha an sgrìobhainn HTML agad air a lìonadh le eileamaidean anns a bheil ainmean clas mar "dearg" no "clì", tha ainmean a tha ag innse mar a bu chòir na h-eileamaidean a bhith a 'coimhead seach na tha iad, tha thu a' dol thairis air an loidhne sin eadar structar agus stoidhle. Bidh mi a 'feuchainn ri ainmean nan clasaichean neo-sheasmhach a chuingealachadh cho mòr' sa ghabhas airson an adhbhair seo.

Clasaichean Iomadach, Semantics, agus JavaScript

Is e buannachd eile a bhith a 'cleachdadh ioma-chlasaichean gu bheil e a' toirt dhut tòrr chothroman eadar-ghnìomhach dhut.

Faodaidh tu clasaichean ùra a chur a-steach gu eileamaidean a tha ann cheana a 'cleachdadh JavaScript gun a bhith a' toirt air falbh gin de na clasaichean tùsail. Faodaidh tu cuideachd clasaichean a chleachdadh gus mìneachadh a dhèanamh air semantics de eileamaid . Tha seo a 'ciallachadh gu bheil thu comasach air clasaichean a bharrachd a chur ris gus mìneachadh dè tha an eileamaid sin a' ciallachadh gu seòlta. Seo mar a tha Microformats ag obair.

Eas-bhuannachdan ann an iomadh clas

Is e an ana-cothrom as motha a bhith a 'cleachdadh iomadh clas air na h-eileamaidean agad gum faod e iad a dhèanamh beagan mì-fheumail airson coimhead agus riaghladh thairis air ùine. Dh'fhaodadh e bhith doirbh a bhith a 'dearbhadh dè na stoidhlichean a tha a' toirt buaidh air eileamaid agus ma tha sgriobt sam bith a 'toirt buaidh air. Tha mòran de na frèaman a tha rim faighinn an-diugh, mar Bootstrap, a 'dèanamh feum trom de eileamaidean le iomadh clas. Faodaidh an còd sin a bhith a-mach à làimh agus duilich a bhith ag obair le glè luath mura h-eil thu faiceallach.

Nuair a bhios tu a 'cleachdadh iomadh clas, bidh thu cuideachd a' cur an cunnart gum bi stoidhle airson aon chlas a 'dol thairis air stoidhle eile, eadhon ged nach robh dùil agad air seo. Faodaidh seo a dhèanamh duilich e a-mach carson nach eil na stoidhlichean agad gan cur an sàs eadhon nuair a tha e coltach gum bu chòir dhaibh.

Feumaidh tu a bhith mothachail mu cho sònraichte 'sa tha e, eadhon leis na feartan a tha air an cur a-steach don aon eileamaid sin!

Le bhith a 'cleachdadh inneal mar innealan maighstir-lìn ann an Chrome, is urrainn dhut nas fhasa fhaicinn mar a tha do chlasaichean a' toirt buaidh air na stoidhlichean agad agus an duilgheadas seo a sheachnadh bho stoidhlichean is feartan a tha an aghaidh a chèile.

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