Kaskaadiga stiililehed määratlege veebilehe elemendi välimus, haakides selle elemendi suhtes rakendatavad atribuudid. Need atribuudid võivad olla kas ID või klass ja nagu kõik atribuudid, lisavad need ka elementidele, millele need on lisatud, kasulikku teavet.
Sõltuvalt elemendile lisatavast atribuudist saate selle rakendamiseks kirjutada CSS-valija vajalikud visuaalsed stiilid, mida on vaja selle elemendi ja veebisaidi ilme saavutamiseks tervikuna.
Ehkki kas ID-d või klassid töötavad CSS-i reeglitega nendesse ühendamise eesmärgil, on moodne veebidisain meetodid eelistavad klasse osaliselt ID-de asemel, kuna need on vähem spetsiifilised ja nendega on lihtsam töötada.
Üks või mitu klassi CSS-is?
Enamikul juhtudel määrate elemendile ühe klassi atribuudi, kuid tegelikult ei piirdu te ainult ühe klassiga, nagu te ID-dega olete. Kuigi element saab omada ainult ühte ID-atribuuti, saate anda elemendile mitu klassi ja mõnel juhul muudab see teie lehte lihtsamaks stiilimiseks ja palju muud paindlik.
Kui peate elemendile määrama mitu klassi, lisage täiendavad klassid ja eraldage need lihtsalt atribuudis tühikuga.
Näiteks sellel lõigul on kolm klassi:
See oleks lõike tekst
See määrab lõigusildile järgmised kolm klassi:
- Tõmbenumber
- Esiletõstetud
- Vasakule
Pange tähele nende klassiväärtuste vahelisi tühikuid. Need ruumid on see, mis seab nad erinevateks individuaalseteks klassideks. Seetõttu ei saa klassinimedes olla tühikuid, sest see määraks need eraldi klassideks.
Kui olete oma klassi väärtused sisse saanud HTML, saate need seejärel oma CSS-is klassideks määrata ja rakendada lisatavad stiilid. Näiteks.
.pakkumine {... }
.omadustega {... }
p.left {... }
Nendes näidetes ilmuvad lokkisulgudes CSS-i deklaratsioonid ja väärtuste paarid, mismoodi neid stiile sobivale valijale rakendatakse.
Kui sa määrake klass konkreetsele elemendile (näiteks, p.vasakule), saate seda siiski kasutada klasside loendi osana; pidage siiski meeles, et see mõjutab ainult CSS-is määratletud elemente. Teisisõnu, p.vasakule stiil rakendub ainult selle klassiga lõikudele, kuna teie valija ütleb selle rakendamise tegelikult lõikudele, mille klassi väärtus on vasakule"Seevastu näites ülejäänud kaks valijat ei määra kindlat elementi, nii et need kehtiksid kõigi elementide jaoks, mis neid klassi väärtusi kasutavad.
Mitu klassi, semantikat ja JavaScripti
Mitme klassi kasutamise eeliseks on ka see, et see suurendab interaktiivsuse võimalusi.
Rakendage JavaScripti abil olemasolevatele elementidele uued klassid, eemaldamata ühtegi algklassist. Klasside määramiseks võite kasutada ka klasse elemendi semantika - lisage täiendavaid klasse, et määratleda, mida see element semantiliselt tähendab. See lähenemine on kuidas Mikrovormid töötab.
Mitme klassi eelised
Mitme klassi kihistamine võib hõlbustada elementide eriefektide lisamist, ilma et peaksite selle elemendi jaoks täiesti uut stiili looma.
Näiteks elementide vasakule või paremale hõljumiseks võite kirjutada kaks klassi:
vasakule.
ja.
eks.
lihtsalt.
ujuk: vasak;
ja.
ujuk: paremal;
neis. Siis, kui teil on vasakule hõljumiseks vajalik element, lisate lihtsalt klassi "vasakule" oma klasside nimekirja.
Siin kõndimiseks on aga peen joon. Pidage meeles, et veebistandardid dikteerivad stiili ja struktuuri eraldamise. Struktuuri käsitletakse HTML-i abil, samas kui stiil on CSS-is. Kui teie HTML-dokument on täidetud elementidega, millel kõigil on klassi nimed nagu "punane" või "vasak", siis need nimed on dikteerida, kuidas elemendid peaksid välja nägema, mitte need, mis need on, ületate selle piiri struktuuri ja stiili vahel.
Mitu klassi puudused
Elementidel mitme samaaegse klassi kasutamise suurim puudus on see, et see võib neid aja jooksul natuke kohmakaks vaadata ja hallata. Võib osutuda keeruliseks kindlaks teha, millised stiilid elementi mõjutavad ja kas mõni skript seda mõjutab. Paljud tänapäeval saadaval olevad raamistikud, näiteks Bootstrap, kasutavad palju mitme klassiga elemente. Kui te pole ettevaatlik, võib see kood käest minna ja sellega on väga kiire töötada.
Mitme klassi kasutamisel riskite ka sellega, et stiil ületab teise klassi stiili. See kokkupõrge võib siis raskendada väljamõtlemist, miks teie stiile ei rakendata, isegi kui näib, et need peaksid seda tegema. Olge teadlik konkreetsusest, isegi kui sellele ühele elemendile rakendatakse atribuute.
Kasutades sellist tööriista nagu Google Chrome'i veebimeistri tööriistad, saate hõlpsamalt näha, kuidas klassid teie stiile mõjutavad, ja vältida vastuoluliste stiilide ja atribuutide probleemi.