CSS-tyylilehdet määritä verkkosivuelementin ulkonäkö kytkemällä attribuutteihin, joita käytät kyseiseen elementtiin. Nämä määritteet voivat olla joko tunnus tai luokka, ja kuten kaikki määritteet, ne lisäävät hyödyllistä tietoa elementteihin, joihin ne on liitetty.
Elementtiin lisättävän attribuutin mukaan voit kirjoittaa CSS-valitsimen soveltamaan sitä tarvittavat visuaaliset tyylit, joita tarvitaan kyseisen elementin ja verkkosivuston ulkoasun saavuttamiseksi kokonaisena.
Vaikka joko henkilöllisyystodistukset tai luokat työskentelevät kiinnittääkseen ne CSS-sääntöihin, moderni web-suunnittelu menetelmät suosivat luokkia osittain, koska ne eivät ole yhtä spesifisiä ja niiden kanssa on helpompi työskennellä.
Yksi tai useampi luokka CSS: ssä?
Useimmissa tapauksissa määrität elementille yhden luokan attribuutin, mutta et todellakaan ole rajoitettu vain yhteen luokkaan samalla tavalla kuin sinä olet tunnuksilla. Vaikka elementti voi olla vain yksi tunnusattribuutti, voit antaa elementille useita luokkia, ja joissakin tapauksissa se tekee sivustasi helpompaa muotoilla ja paljon muuta joustava.
Jos joudut määrittämään elementille useita luokkia, lisää ylimääräiset luokat ja erota ne yksinkertaisesti välilyönnillä määritteessäsi.
Esimerkiksi tässä kappaleessa on kolme luokkaa:
Tämä olisi kappaleen teksti
Tämä asettaa seuraavat kolme luokkaa kappaletagille:
- Vedä tarjous
- Esittelyssä
- Vasen
Huomaa näiden luokkien arvojen välit. Nämä tilat asettavat ne erilaisiksi, yksilöllisiksi luokiksi. Siksi luokkien nimissä ei voi olla välilyöntejä, koska se asettaisi ne erillisiksi luokiksi.
Kun luokka-arvosi ovat HTML, voit sitten määrittää nämä luokkiin CSS: ssäsi ja käyttää lisättäviä tyylejä. Esimerkiksi.
.haku {... }
.ominaisuudet {... }
s. vasen {... }
Näissä esimerkeissä CSS-ilmoitukset ja arvoparit näkyvät kiharoiden aaltosulkeiden sisällä, jolloin näitä tyylejä sovellettaisiin sopivaan valitsimeen.
Jos sinä aseta luokka tiettyyn elementtiin (esimerkiksi, s. vasen), voit silti käyttää sitä osana luokaluetteloa; Huomaa kuitenkin, että se vaikuttaa vain CSS: ssä määriteltyihin elementteihin. Toisin sanoen s. vasen tyyli koskee vain tämän luokan kappaleita, koska valitsimesi sanoo soveltavansa sitä "kappaleisiin, joiden luokan arvo on vasemmalle"Sitä vastoin esimerkin kaksi muuta valitsinta eivät määritä tiettyä elementtiä, joten niitä sovellettaisiin kaikkiin elementteihin, jotka käyttävät näitä luokan arvoja.
Useita luokkia, semantiikkaa ja JavaScriptiä
Usean luokan käytön etuna on myös se, että se lisää vuorovaikutteisuutta.
Lisää uusia luokkia olemassa oleviin elementteihin JavaScriptiä käyttämällä poistamatta mitään alkuluokkia. Voit myös käyttää luokkia määrittelemään elementin semantiikka - lisää yläluokkia määritelläksesi, mitä kyseinen elementti tarkoittaa semanttisesti. Tämä lähestymistapa on miten Mikroformit toimii.
Useiden luokkien edut
Usean luokan kerrostaminen voi helpottaa erikoistehosteiden lisäämistä elementteihin tarvitsematta luoda kokonaan uutta tyyliä tälle elementille.
Voit esimerkiksi leikata elementtejä vasemmalle tai oikealle kirjoittamalla kaksi luokkaa:
vasemmalle.
ja.
oikein.
vain.
kellua: vasen;
ja.
kellua: oikea;
heissä. Sitten, kun sinulla on elementti, jonka täytyy kellua vasemmalle, lisäät luokan "vasemmalle" sen luokaluetteloon.
Täällä on kuitenkin hieno viiva kävellä. Muista, että verkkostandardit sanelevat tyylin ja rakenteen erottamisen. Rakenne hoidetaan HTML-koodilla, kun tyyli on CSS: ssä. Jos HTML-dokumenttisi on täynnä elementtejä, joilla kaikilla on luokan nimet, kuten "punainen" tai "vasen", jotka ovat nimiä sanele kuinka elementtien tulisi näyttää pikemminkin kuin mitä ne ovat, ylität sen rakenteen ja tyylin välisen rajan.
Useiden luokkien haitat
Suurin haitta useiden samanaikaisten luokkien käyttämisessä elementeissäsi on, että se voi tehdä niistä hieman hankalia tarkastella ja hallita ajan myötä. Voi olla vaikeaa määrittää, mitkä tyylit vaikuttavat elementtiin ja vaikuttavatko jotkut skriptit siihen. Monet nykyisin käytettävissä olevista kehyksistä, kuten Bootstrap, käyttävät voimakkaasti useiden luokkien elementtejä. Koodi voi päästä käsistä ja sen kanssa on vaikea työskennellä nopeasti, jos et ole varovainen.
Kun käytät useita luokkia, sinulla on myös riski, että yksi luokka tyyli ohittaa toisen tyylin. Tämä törmäys voi sitten vaikeuttaa sen selvittämistä, miksi tyylejäsi ei sovelleta, vaikka näyttää siltä, että niiden pitäisi. Pysy tietoisena spesifisyydestä, vaikka kyseiseen elementtiin sovellettaisiin määritteitä.
Google Chromen Webmaster -työkalujen kaltaisten työkalujen avulla näet helpommin, miten luokkasi vaikuttavat tyyliisi, ja välttää ristiriitaisia tyylejä ja määritteitä.