Þú ert ekki takmörkuð við eina CSS flokka á frumefni.
Cascading Style Sheets (CSS) gerir þér kleift að skilgreina útliti frumefnisins með því að krækja í eiginleika sem þú sækir um þann þátt. Þessir eiginleikar geta verið annaðhvort og auðkenni eða flokkur og, eins og allir eiginleikar, bætast þeir við gagnlegar upplýsingar um þau atriði sem þau eru tengd við. Það fer eftir því hvaða eiginleiki þú bætir við þáttur, þú getur skrifað CSS val til að beita nauðsynlegum sjónrænum stílum sem þarf til að ná til útlits og tilfinningar fyrir þann þátt og vefsíðuna í heild.
Þó að annaðhvort auðkenni eða flokkar vinna í þeim tilgangi að krækja í þau með CSS reglum, þá eru nútímaviðmiðunaraðferðir fyrir hendi flokkar yfir auðkenni, að hluta til vegna þess að þær eru minna sértækar og auðveldara að vinna með heildina. Já, þú finnur enn margar síður sem nota auðkenni, en þessi eiginleiki er beitt meira sparlega en áður en tímar hafa tekið yfir nútíma vefsíður.
Einstaklingar eða margar flokkar í CSS?
Í flestum tilfellum myndi þú úthluta einum flokki eiginleiki að frumefni, en þú ert í raun ekki takmörkuð við einum flokki sem þú ert með auðkenni. Þó að þáttur geti aðeins haft eitt auðkenni, þá getur þú algjörlega gefið þátt í mörgum flokkum og í sumum tilfellum gerir það auðveldara að stilla síðuna þína og miklu sveigjanlegri!
Ef þú þarft að úthluta mörgum flokkum til þáttar, getur þú bætt við viðbótarflokka og einfaldlega aðgreina þau með plássi í eiginleikum þínum.
Til dæmis hefur þessi málsgrein þrjá flokka:
pullquote lögun left "> Þetta væri texti málsins
Þetta setur eftirfarandi þrjá flokka á málsgreininni:
- Pullquote
- Valin
- Vinstri
Takið eftir rýmum milli hverrar þessara flokka. Þessi rými er það sem setur þau upp sem mismunandi, einstaka flokka. Þetta er líka ástæða þess að kennaranöfn geta ekki haft rými í þeim, því að það gerði það sem aðskildar flokkar.
Til dæmis, ef þú notar "pullquote-featured-left" án pláss, þá myndi það vera ein tegund af flokki, en dæmið hér að ofan, þar sem þessi þrjú orð eru aðskilin með plássi, setur þau sem einstök gildi. Það er mikilvægt að skilja þetta hugtak þegar þú ákveður hvaða bekkjarviðmið eru notuð á vefsíðum þínum.
Þegar þú hefur bekknum þínum í HTML, þá getur þú þá úthlutað þeim sem flokka í CSS þínum og beitt þeim stíll sem þú vilt bæta við. Til dæmis.
.pullquote {...}
.
p.left {...}
Í þessum dæmum, CSS yfirlýsingar og gildi pör væri inni í hrokkið armbönd, sem er hvernig þessar stíll væri beitt á viðeigandi val.
Athugaðu - ef þú setur bekk í tiltekinn þátt (td p.left) getur þú samt notað það sem hluti af lista yfir flokka; þó vera meðvitaður um að það muni aðeins hafa áhrif á þá þætti sem eru tilgreindar í CSS. Með öðrum orðum mun p.left-stíl aðeins gilda um málsgreinar með þessum flokki þar sem seljandinn þinn segir í raun að nota hana við "málsgreinar með kennitölu" vinstri ". Hinsvegar tilgreinir hinir tveir valsmenn í dæminu ekki ákveðna þætti, svo að þeir myndu eiga við hvaða þætti sem nota þessi bekkjar gildi.
Kostir margra bekkja
Margfeldi flokkar geta auðveldað þér að bæta við tæknibrellum við þætti án þess að þurfa að búa til nýjan stíl fyrir þann þátt.
Til dæmis gætirðu viljað geta flotið þætti til vinstri eða hægri fljótt. Þú gætir skrifað tvo flokka til vinstri og hægri með bara floti: vinstri; og fljóta: hægri; í þeim. Þá, þegar þú átt frumefni sem þú þarft að fljóta til vinstri, þá ættir þú einfaldlega að bæta við bekknum "vinstri" í listann yfir listann.
Það er hins vegar fín lína að ganga hér. Mundu að vefur staðlar ræður aðskilnað stíl og uppbyggingu. Uppbygging er meðhöndluð með HTML meðan stíll er í CSS.
Ef HTML skjalið þitt er fyllt með þætti sem allir hafa kennitölur eins og "rauður" eða "vinstri", sem eru nöfn sem ræða hvernig þættir ættu að líta frekar en það sem þeir eru, ferðu yfir þessi línu milli uppbyggingar og stíl. Ég reyni að takmarka nafnlausa nöfnin mín eins mikið og mögulegt er af þessum sökum.
Margfeldi flokkar, merkingartækni og JavaScript
Annar kostur við að nota marga flokka er að það gefur þér margt fleira gagnvirkni.
Þú getur sótt nýjar flokka á núverandi þætti með því að nota JavaScript án þess að fjarlægja einhverja upphaflegu flokka. Þú getur líka notað námskeið til að skilgreina merkingarfræði frumefni . Þetta þýðir að þú getur bætt við viðbótarflokka til að skilgreina hvað þessi þáttur þýðir semantically. Þetta er hvernig Microformats virkar.
Gallar margra bekkja
Stærsti ókosturinn við að nota marga flokka á þætti er að það getur gert þau svolítið ómeðvitað að líta á og stjórna með tímanum. Það getur orðið erfitt að ákveða hvaða stíll hefur áhrif á frumefni og ef einhverjar forskriftir hafa áhrif á það. Margir af þeim rammaum sem eru í boði í dag, eins og Bootstrap, nota mikið af þætti með mörgum flokkum. Þessi kóða getur farið úr hendi og erfitt að vinna með mjög fljótt ef þú ert ekki varkár.
Þegar þú notar marga flokka hættir þú einnig að hætta að stíll í einum flokki taki eftir öðrum en jafnvel ef þú ætlar ekki að gera þetta. Þetta getur þá gert það erfitt að reikna út af hverju stíll þín er ekki beitt, jafnvel þegar það virðist sem þau ættu að gera.
Þú þarft að vera meðvitaður um sérstöðu, jafnvel með eiginleikum sem beitt er að því eini þáttur!
Með því að nota tól eins og verkfæri vefstjóra í Chrome geturðu auðveldlega séð hvernig flokka þín hafa áhrif á stíl þína og forðast þetta vandamál af andstæðum stílum og eiginleikum.
Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 8/7/17