Kaskādes stila lapas definējiet tīmekļa lapas elementa izskatu, piesaistot atribūtus, kurus lietojat šim elementam. Šie atribūti var būt vai nu ID, vai klase, un, tāpat kā visi atribūti, tie pievieno noderīgu informāciju elementiem, kuriem tie ir pievienoti.
Atkarībā no tā, kuru atribūtu pievienojat elementam, varat uzrakstīt CSS atlasītāju, lai to lietotu nepieciešamie vizuālie stili, kas nepieciešami, lai panāktu šī elementa un vietnes izskatu kopumā.
Kaut arī ID vai klases darbojas, lai tos piesaistītu CSS noteikumiem, mūsdienīgs tīmekļa dizains metodes daļēji dod priekšroku klasēm, nevis ID, jo tās ir mazāk specifiskas un kopumā ar tām ir vieglāk strādāt.
Viena vai vairākas klases CSS?
Vairumā gadījumu jūs piešķirat elementam vienu klases atribūtu, taču patiesībā jūs neaprobežojaties tikai ar vienu klasi, kāda jums ir ar ID. Kaut arī elements var būt tikai viens ID atribūts, jūs varat piešķirt elementam vairākas klases, un dažos gadījumos tas padarīs jūsu lapu vieglāk veidojamu un daudz ko citu elastīgs.
Ja elementam jāpiešķir vairākas klases, pievienojiet papildu klases un vienkārši atdaliet tās ar atstarpi savā atribūtā.
Piemēram, šajā rindkopā ir trīs klases:
Tas būtu rindkopas teksts
Rindkopas tagā tiek iestatītas šādas trīs klases:
- Pullquote
- Piedāvātie
- Pa kreisi
Ievērojiet atstarpes starp katru no šīm klases vērtībām. Šīs telpas ir tas, kas viņus nosaka kā atšķirīgas, individuālas klases. Tāpēc arī klašu nosaukumos nedrīkst būt atstarpes, jo, to darot, tie tiktu iestatīti kā atsevišķas klases.
Kad jūsu klases vērtības būs HTML, pēc tam jūs varat piešķirt šīs kā klases savā CSS un lietot stilus, kurus vēlaties pievienot. Piemēram.
.pullquote {... }
.featured {... }
p.left {... }
Šajos piemēros CSS deklarācijas un vērtību pāri parādās cirtaino bikšturu iekšpusē, tādējādi šie stili tiktu piemēroti attiecīgajam atlasītājam.
Ja jūs iestatiet klasi uz noteiktu elementu (piemēram, p. kreisais), jūs joprojām varat to izmantot kā daļu no klašu saraksta; tomēr ņemiet vērā, ka tas ietekmēs tikai tos elementus, kas ir norādīti CSS. Citiem vārdiem sakot, p. kreisais stils attieksies tikai uz rindkopām ar šo klasi, jo atlasītājs patiesībā saka to piemērot "rindkopām ar klases vērtību pa kreisi"Turpretī pārējie divi atlasītāji atlasē nenorāda noteiktu elementu, tāpēc tie tiktu piemēroti jebkuram elementam, kas izmanto šīs klases vērtības.
Vairākas klases, semantika un JavaScript
Vēl viena vairāku klašu izmantošanas priekšrocība ir tā, ka tas palielina interaktivitātes iespējas.
Lietojiet jaunas klases esošajiem elementiem, izmantojot JavaScript, nenoņemot nevienu no sākotnējām klasēm. Varat arī izmantot klases, lai definētu elementa semantika - pievienojiet papildu klases, lai definētu, ko šis elements nozīmē semantiski. Šī pieeja ir kā Mikroformāti darbojas.
Vairāku klašu priekšrocības
Vairāku klašu slāņošana var atvieglot elementiem īpašu efektu pievienošanu, neradot šim elementam pilnīgi jaunu stilu.
Piemēram, lai peldētu elementus pa kreisi vai pa labi, varat uzrakstīt divas klases:
pa kreisi.
un.
pa labi.
ar tikai.
pludiņš: pa kreisi;
un.
pludiņš: pa labi;
viņos. Tad, kad vien jums ir kāds elements, kas jums nepieciešams peldēt pa kreisi, jūs vienkārši pievienojat klasi "pa kreisi" tās klases sarakstam.
Šeit staigāt tomēr ir smalka līnija. Atcerieties, ka tīmekļa standarti nosaka stila un struktūras nošķiršanu. Struktūra tiek apstrādāta, izmantojot HTML, kamēr stils ir CSS. Ja jūsu HTML dokuments ir piepildīts ar elementiem, kuriem visiem ir klases nosaukumi, piemēram, "sarkans" vai "pa kreisi", kas ir nosaukumi diktē, kā elementiem vajadzētu izskatīties, nevis to, kādi tie ir, jūs šķērsojat šo robežu starp struktūru un stilu.
Vairāku klašu trūkumi
Lielākais trūkums, lietojot vairāku vienlaicīgu nodarbību elementus, ir tas, ka tas var padarīt viņus mazliet apgrūtinošus, lai skatītos un pārvaldītu laika gaitā. Var būt grūti noteikt, kādi stili ietekmē elementu un vai kādi skripti to ietekmē. Daudzos mūsdienās pieejamajos ietvaros, piemēram, Bootstrap, tiek intensīvi izmantoti elementi ar vairākām klasēm. Šis kods var izkļūt no rokas un ar to strādāt ļoti ātri, ja neesat piesardzīgs.
Izmantojot vairākas klases, jūs riskējat arī ar to, ka viena klase pārspēj citas stilu. Pēc tam šī sadursme var apgrūtināt izpratni, kāpēc jūsu stili netiek lietoti, pat ja šķiet, ka tas ir jādara. Esiet informēts par specifiku, pat izmantojot atribūtus, kas piemēroti šim vienam elementam.
Izmantojot pārlūkā Google Chrome tādu rīku kā tīmekļa pārziņa rīki, jūs varat vieglāk uzzināt, kā jūsu klases ietekmē jūsu stilus, un izvairīties no šīs konfliktējošo stilu un atribūtu problēmas.