U is nie beperk tot 'n enkele CSS klas per element nie.
Cascading Style Sheets (CSS) laat jou toe om die voorkoms van 'n element te definieer deur die eienskappe wat jy op daardie element toepas, aan te haal. Hierdie eienskappe kan óf en ID of 'n klas wees en, soos alle eienskappe, voeg hulle nuttige inligting by die elemente waaraan hulle geheg is. Afhangende van watter kenmerk jy by 'n element voeg, kan jy 'n CSS selector skryf om die nodige visuele style toe te pas wat nodig is om die voorkoms en gevoel vir daardie element en die webwerf as geheel te bereik.
Terwyl óf ID's of klasse werk vir die doel om hulle met CSS-reëls te koppel, is moderne webontwerpmetodes gunstig vir klasse oor ID's, omdat dit minder spesifiek en makliker is om met algehele werk te werk. Ja, jy sal steeds baie webwerwe vind wat ID's gebruik, maar daardie eienskappe word minder spaarsaam toegepas as in die verlede terwyl klasse oor moderne webbladsye oorgeneem het.
Enkele of Meervoudige klasse in CSS?
In die meeste gevalle sal jy 'n enkele klas eienskap toeken aan 'n element, maar jy is eintlik nie beperk tot net een klas wat jy ookal met ID's het nie. Terwyl 'n element slegs 'n ID-kenmerk het, kan jy absoluut 'n element van verskeie klasse gee, en in sommige gevalle sal dit jou styl makliker maak en veel meer soepel!
As jy verskeie klasse aan 'n element moet toewys, kan jy die bykomende klasse byvoeg en eenvoudig skei met 'n spasie in jou kenmerk.
Byvoorbeeld, hierdie paragraaf het drie klasse:
pullquote featured left "> Dit is die teks van die paragraaf
Hierdeur word die volgende drie klasse op die paragraafkode aangebring:
- Pullquote
- Gewilde
- links
Let op die spasies tussen elkeen van hierdie klaswaardes. Daardie spasies is wat hulle opstel as verskillende, individuele klasse. Dit is ook waarom klasname nie spasies in hulle kan hê nie, want dit sal hulle as afsonderlike klasse stel.
As u byvoorbeeld 'n trekwaarde-featured-linker 'gebruik het sonder 'n spasie, sou dit een klaswaarde wees, maar die voorbeeld hierbo, waar hierdie drie woorde met 'n spasie geskei word, stel dit as individuele waardes. Dit is belangrik om hierdie konsep te verstaan as jy besluit watter klaswaardes jy op jou webblaaie gebruik.
Sodra jy jou klaswaardes in HTML het, kan jy dit dan as klasse in jou CSS toeken en die style toepas wat jy wil byvoeg. Byvoorbeeld.
. Pollquote {...}
.Featured {...}
p.left {...}
In hierdie voorbeelde sal die CSS-verklarings en waardes pare binne-in die krullerige hakies wees, en dit is hoe die style op die toepaslike keurder toegepas sal word.
Nota - as jy 'n klas op 'n spesifieke element stel (byvoorbeeld p.left), kan jy dit nog steeds as deel van 'n klaslys gebruik. Wees egter bewus daarvan dat dit slegs die elemente wat in die CSS gespesifiseer word, sal beïnvloed. Met ander woorde, die p.left-styl sal slegs van toepassing wees op paragrawe met hierdie klas, aangesien u keurder eintlik sê om dit toe te pas op "paragrawe met 'n klaswaarde van 'links'. Daarenteen gee die ander twee keurders in die voorbeeld nie 'n sekere element op nie, dus sal hulle van toepassing wees op enige element wat daardie klaswaardes gebruik.
Voordele van verskeie klasse
Meervoudige klasse kan dit makliker maak om spesiale effekte by elemente by te voeg sonder om 'n hele nuwe styl vir daardie element te skep.
Byvoorbeeld, jy sal dalk die vermoë hê om vinnig en vinnig elemente na links of regs te dryf . Jy kan twee klasse links en regs skryf met net dryf: links; en dryf: regs; in hulle. Dan, wanneer jy 'n element het wat jy nodig het om te laat vlot, sal jy bloot die klas "links" by sy klaslys voeg.
Daar is egter 'n fyn lyn om hier te stap. Onthou dat webstandaarde die skeiding van styl en struktuur bepaal. Struktuur word hanteer via HTML terwyl styl in CSS is.
As jou HTML-dokument gevul is met elemente wat almal klas name soos "rooi" of "links" bevat, wat name is wat dikteer hoe elemente eerder moet lyk as wat hulle is, kruis jy daardie lyn tussen struktuur en styl. Ek probeer om my nie-semantiese klasname soveel as moontlik te beperk.
Veelvuldige klasse, semantiek en JavaScript
Nog 'n voordeel om verskeie klasse te gebruik, is dat dit jou baie meer interaksiwiteitsmoontlikhede bied.
Jy kan nuwe klasse aan bestaande elemente gebruik deur JavaScript te gebruik sonder om enige van die aanvanklike klasse te verwyder. U kan ook klasse gebruik om die semantiek van 'n element te definieer. Dit beteken dat jy bykomende klasse kan byvoeg om te definieer wat daardie element semanties beteken. Dit is hoe Microformats werk.
Nadele van verskeie klasse
Die grootste nadeel om verskeie klasse op jou elemente te gebruik, is dat dit hulle 'n bietjie onbeholpe kan maak om na verloop van tyd te kyk en te bestuur. Dit kan moeilik wees om te bepaal watter style 'n element affekteer en indien enige skrifte dit beïnvloed. Baie van die raamwerke wat vandag beskikbaar is, soos Bootstrap, maak swaar gebruik van elemente met verskeie klasse. Die kode kan uit die hand kom en moeilik om vinnig te werk as jy nie versigtig is nie.
As jy verskeie klasse gebruik, loop jy ook die risiko dat die styl vir een klas die styl van 'n ander sal ignoreer, selfs as jy nie van plan was nie. Dit kan dan moeilik wees om uit te vind waarom jou style nie toegepas word nie, selfs wanneer dit blyk dat hulle moet.
Jy moet bewus wees van spesifisiteit, selfs met die eienskappe wat op daardie een element toegepas word!
Deur 'n instrument soos die webmeestergereedskap in Chrome te gebruik, kan jy makliker sien hoe jou klasse jou style beïnvloed en vermy hierdie probleem van teenstrydige style en eienskappe.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 8/7/17