Cascading Style Sheets definirajte videz elementa spletne strani tako, da se vključite v atribute, ki jih uporabite za ta element. Ti atributi so lahko ID ali razred in kot vsi atributi elementom, na katere so pritrjeni, dodajo koristne informacije.
Glede na to, kateri atribut dodate elementu, lahko za izbiro CSS napišete izbirnik CSS potrebne vizualne sloge, potrebne za doseganje videza in občutja tega elementa in spletnega mesta kot celota.
Medtem ko bodisi ID ali razredi delujejo z namenom, da se z njimi povežejo s pravili CSS, moderno spletno oblikovanje metode dajejo prednost razredom kot ID-jem, delno zato, ker so manj specifični in je na splošno lažje delati z njimi.
Eden ali več razredov v CSS?
V večini primerov elementu dodelite atribut enega razreda, vendar dejansko niste omejeni na samo en razred, kakršen ste z ID-ji. Medtem ko je element lahko ima samo en atribut ID, lahko elementu dodelite več razredov in v nekaterih primerih bo to olajšalo oblikovanje vaše strani in še veliko več prilagodljiv.
Če morate elementu dodeliti več razredov, dodajte dodatne razrede in jih preprosto ločite s presledkom v svojem atributu.
Ta odstavek ima na primer tri razrede:
To bi bilo besedilo odstavka
To nastavi naslednje tri razrede oznake odstavka:
- Pullquote
- Predstavljeno
- Levo
Upoštevajte presledke med vsako od teh vrednosti razreda. Ti prostori so tisto, kar jih postavlja kot različne, posamezne razrede. Tudi zato imena razredov ne morejo imeti presledkov, ker bi jih s tem nastavila kot ločene razrede.
Ko enkrat vnesete svoje vrednosti razreda HTML, jih lahko nato dodelite kot razrede v CSS-ju in uporabite sloge, ki jih želite dodati. Na primer.
.pullquote {... }
.značilno {... }
p.left {... }
V teh primerih se deklaracije CSS in pari vrednosti pojavijo znotraj zavitih oklepajev, tako da bi bili ti slogi uporabljeni za ustrezen izbirnik.
Če ti nastavite razred na določen element (na primer p.levo), lahko ga še vedno uporabljate kot del seznama razredov; vendar se zavedajte, da bo vplival samo na tiste elemente, ki so navedeni v CSS. Z drugimi besedami, p.levo slog bo veljal samo za odstavke s tem razredom, saj izbirnik dejansko pravi, da ga uporabite za "odstavke z vrednostjo razreda levo, "Nasprotno pa druga dva izbirnika v primeru ne določita določenega elementa, zato bi veljala za kateri koli element, ki uporablja te vrednosti razreda.
Več razredov, semantika in JavaScript
Druga prednost uporabe več razredov je, da povečuje možnosti interaktivnosti.
Uporabite nove razrede za obstoječe elemente z uporabo JavaScript, ne da bi odstranili katerega od začetnih razredov. Za definiranje datoteke lahko uporabite tudi razrede semantika elementa - dodajte dodatne razrede, da določite, kaj ta element pomensko pomeni. Ta pristop je, kako Mikroformati deluje.
Prednosti več razredov
Če razporedite več razredov, lahko elementom olajšate dodajanje posebnih učinkov, ne da bi morali za ta element ustvariti povsem nov slog.
Če želite na primer plavati elemente levo ali desno, lahko napišete dva razreda:
levo.
in.
prav.
s samo.
plovec: levo;
in.
plovec: desno;
v njih. Potem, kadar koli imate element, ki ga morate plavati levo, preprosto dodate razred "levo" na njegov seznam razredov.
Vendar se tu lahko sprehodimo po tanki črti. Ne pozabite, da spletni standardi narekujejo ločevanje sloga in strukture. Struktura se obravnava z uporabo HTML, medtem ko je slog v CSS. Če je vaš dokument HTML napolnjen z elementi, ki imajo vsa imena razredov, na primer "rdeča" ali "leva", to so imena narekujte, kako naj elementi izgledajo, ne pa kakšni so, prečkate to mejo med strukturo in slogom.
Slabosti več razredov
Največja pomanjkljivost uporabe več hkratnih razredov na vaših elementih je ta, da jih lahko sčasoma postanejo nekoliko okorni za ogled in upravljanje. Morda bo težko ugotoviti, kateri slogi vplivajo na element in ali kateri skripti vplivajo nanj. Številni okviri, ki so danes na voljo, na primer Bootstrap, pogosto uporabljajo elemente z več razredi. Ta koda vam lahko zelo hitro uide iz rok in jo je težko delati, če niste previdni.
Ko uporabljate več razredov, tvegate tudi, da slog enega razreda preglasi slog drugega. Zaradi tega trka je težko ugotoviti, zakaj se vaši slogi ne uporabljajo, tudi če se zdi, da bi morali. Zavedajte se specifičnosti, tudi z atributi, uporabljenimi za ta element.
Z uporabo orodja, kot so orodja za spletne skrbnike v Google Chromu, lahko lažje vidite, kako vaši razredi vplivajo na vaše sloge, in se izognete tej težavi zaradi nasprotujočih si slogov in atributov.