Et ole rajoitettu yksittäiseen CSS-luokkaan elementtiä kohden.
Cascading Style Sheets (CSS) avulla voit määrittää elementin ulkonäköä liittämällä niihin attribuutteihin, joita sovelletaan kyseiseen elementtiin. Nämä attribuutit voivat olla sekä ID- tai luokkakoodeja, ja kuten kaikki attribuutit, ne lisäävät hyödyllisiä tietoja elementteihin, joihin ne liitetään. Riippuen siitä, minkä attribuutin haluat lisätä elementtiin, voit kirjoittaa CSS-valitsimen sovellettaviin tarvittaviin visuaalisiin tyyleihin, jotka tarvitaan tämän elementin ja koko sivuston ulkoasun saavuttamiseksi.
Vaikka henkilötodistukset tai -luokat toimivat CSS-sääntöjen yhdistämisessä, nykyaikaiset web-suunnittelumenetelmät edistävät luokkia tunnusten yli, osittain, koska ne ovat vähemmän täsmällisiä ja helpompi työskennellä kokonaisuutena. Kyllä, löydät edelleen monia sivustoja, jotka käyttävät tunnuksia, mutta näitä ominaisuuksia käytetään aiempaa paremmin kuin aikaisemmin, kun taas luokat ovat siirtyneet nykyaikaisille verkkosivuille.
Yksi tai useampia luokkia CSS: ssä?
Useimmissa tapauksissa voit määrittää elementille yhden luokan attribuutin, mutta et todellakaan ole rajoitettu vain yhteen luokkaan, jolla tavalla olet ID: n kanssa. Vaikka elementissä voi olla vain yksi tunnusominaisuus, voit antaa elementille useita luokkia ja joissakin tapauksissa tehdä niin, että sivuasi helpottaisi tyyliä ja paljon joustavampaa!
Jos haluat lisätä elementteihin useita luokkia, voit lisätä ylimääräisiä luokkia ja erottaa ne vain attribuutin välisellä tilalla.
Esimerkiksi tässä kappaleessa on kolme luokkaa:
pullquote featured left "> Tämä olisi kappaleen teksti
Tämä asettaa seuraavan kolmen luokan kappalekoodiin:
- Pullquote
- Kiinnostavat
- vasen
Huomaa välimatkat kunkin luokan arvojen välillä. Nämä tilat asettavat ne erilaisiksi, yksilöllisiksi luokiksi. Tästä syystä luokkien nimet eivät voi olla välilyöntejä, koska niiden tekeminen asettaa ne erillisinä luokkiin.
Esimerkiksi jos käytät "pullquote-varustellun-vasen" ilman tilaa, se olisi yksi luokkaarvo, mutta yllä oleva esimerkki, jossa nämä kolme sanaa on erotettu toisistaan, asettaa ne yksittäisiksi arvoiksi. On tärkeää ymmärtää tämä käsite, kun päätät, mitkä arvot haluat käyttää verkkosivuillesi.
Kun olet luonut luokan arvot HTML: ssä, voit määrittää ne luokkiin CSS: ssä ja soveltaa tyylit, jotka haluat lisätä. Esimerkiksi.
.pullquote {...}
.vastaanotettu {...}
p.left {...}
Näissä esimerkeissä CSS: n ilmoitukset ja arvoparit olisivat kiharaisten telineiden sisällä, joten näitä tyylejä sovellettaisiin sopivaan valitsimeen.
Huomaa - jos asetat luokan tiettyyn elementtiin (esim. P.left), voit silti käyttää sitä osana luetteloa luokista; Huomaa kuitenkin, että se vaikuttaa vain CSS: ssä määriteltyihin elementteihin. Toisin sanoen p.left-tyyli koskee vain tämän luokan luokkia, koska valitsijasi todella sanoo soveltavan sitä "kohtia, joiden luokkaväli on" left "". Sitä vastoin esimerkin muut kaksi valitsinta eivät määrittele tietyn elementin, joten ne olisivat sovellettavissa mihinkään elementtiin, joka käyttää näitä luokkaresursseja.
Useiden luokkien edut
Useita luokkia voi helpottaa elementtien erikoistehosteiden lisäämistä ilman, että tarvitsee luoda täysin uutta tyyliä kyseiselle elementille.
Voit esimerkiksi halutessasi kyetä kellumaan elementtejä vasemmalle tai oikealle nopeasti. Voit kirjoittaa kaksi luokkaa vasemmalle ja oikealle vain floatilla: vasemmalla; ja kellua: oikea; heissä. Silloin, kun sinulla olisi elementti, joka tarvitsee kellua vasemmalle, lisää yksinkertaisesti luokka "vasemmalle" luokaluetteloon.
Siellä on kuitenkin hieno viiva. Muista, että web-standardit sanovat tyylin ja rakenteen erottamisen. Rakenne hoidetaan HTML: n avulla, kun taas tyyli on CSS: ssä.
Jos HTML-dokumentti on täynnä elementtejä, joilla kaikilla on "punaiset" tai "vasen" nimiset nimitykset, jotka sanovat elementtien näyttävän sen sijaan, että ne ovat, siirrät kyseisen rivin rakenteen ja tyylin välillä. Yritän rajoittaa ei-semanttisten luokkien nimet niin paljon kuin mahdollista tästä syystä.
Useita luokkia, semantiikkaa ja JavaScriptia
Toinen etu useiden luokkien käyttämiseen on se, että se tarjoaa paljon enemmän vuorovaikutteisuutta.
Voit hakea uusia luokkia olemassa oleviin elementteihin käyttämällä JavaScriptia poistamatta mitään aloitusluokista. Voit myös käyttää luokat elementin semantiikan määrittämiseen. Tämä tarkoittaa, että voit lisätä ylimääräisiin luokkiin määritellä, mikä elementti tarkoittaa semanttisesti. Näin Microformats toimii.
Useiden luokkien haitat
Suurin haitta useille luokille elementeillesi on se, että se voi tehdä niistä hieman hankalia tarkastella ja hallita ajan mittaan. Saattaa olla vaikeaa määrittää, mitkä tyylit vaikuttavat elementtiin ja mikä tahansa komentosarja vaikuttaa siihen. Monet nykyään käytettävissä olevista kehyksistä, kuten Bootstrap, käyttävät runsaasti useita luokkia sisältäviä elementtejä. Tämä koodi voi olla käsistä ja vaikea työskennellä hyvin nopeasti, jos et ole varovainen.
Kun käytät useita luokkia, myös riski siitä, että yhden luokan tyylit ohittavat toisen tyylin, vaikka et olisi aiottanut tätä. Tällöin voi vaikeuttaa selvittää, miksi tyylisi eivät sovellu, vaikka niiden pitäisi näyttää siltä.
Sinun on oltava tietoinen spesifisyydestä, vaikka niillä attribuuteilla, joita käytetään kyseiseen elementtiin!
Käyttämällä työkalua, kuten Chrome-verkkovastaavan työkaluja, voit helpommin nähdä, miten luokkiasi vaikuttavat tyyleihisi ja välttää tämän ristiriitaisten tyylien ja ominaisuuksien ongelmat.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 8/7/17