Kiekvienam elementui neapsiribojama vienos CSS klasės.
Kaskadinio stiliaus lakštai (CSS) leidžia apibrėžti elemento išvaizdą, prijungdami prie atributų, kuriuos taikote prie šio elemento. Šie atributai gali būti ir ID, ir klasė, ir, kaip ir visi atributai, jie priduria naudingos informacijos elementus, prie kurių jie yra prisegami. Priklausomai nuo to, kurį elementą pridėjote, galite parašyti CSS parinkiklį, kad galėtumėte taikyti reikiamus vizualinius stilius, kurių reikia norint pasiekti šio elemento ir visos svetainės išvaizdą.
Nors ir ID, arba klasė dirba siekiant sujungti juos su CSS taisyklėmis, šiuolaikiniai interneto dizaino metodai iš dalies naudoja klases per ID, nes jie yra mažiau specifiniai ir paprastai yra lengviau dirbti bendrai. Taip, vis tiek rasite daug svetainių, kuriose naudojami ID, tačiau šie atributai yra taikomi taupiau nei praeityje, kol pamokos perimtos šiuolaikinių tinklalapių.
Vienos ar kelių klasių CSS?
Daugeliu atvejų elementui priskirti vienos klasės atributą, tačiau jūs iš tikrųjų neapsiribojote tik viena klasė, kuria esate su ID. Nors elementui gali būti tik vienas ID atributas, galite visiškai suteikti elementą kelioms klasėms, o kai kuriais atvejais tai padarys, kad jūsų puslapis būtų lengvesnis ir lankstesnis!
Jei elementui reikia priskirti kelias klases, galite pridėti papildomų klasių ir tiesiog atskirti juos su atributo erdve.
Pavyzdžiui, ši dalis turi tris klases:
pulckote featured left "> Tai būtų teksto dalis
Tai nustato šias tris klases žymos:
- Pullquote
- Teminiai
- Kairėje
Atkreipkite dėmesį į tarpus tarp kiekvienos iš šių klasių verčių. Tos erdvės yra tai, kas jas nustato kaip skirtingas, atskiras klases. Taip pat ir dėl to, kad klasių pavadinimai negali turėti tarpų, nes tokiu būdu jie būtų nustatyti kaip atskiros klasės.
Pavyzdžiui, jei naudojate "pullquote-featured-left" be tarpo, tai būtų vienos klasės reikšmė, tačiau aukščiau pateiktas pavyzdys, kuriame šie trys žodžiai yra atskirti tarpu, juos nustato kaip atskiras vertes. Svarbu suprasti šią sąvoką, nes jūs nusprendžiate, kokias klasės vertybes naudoti savo tinklalapiuose.
Kai turėsite savo klasės vertes HTML, tuos galite priskirti jas kaip klases savo CSS ir taikyti stilius, kuriuos norite pridėti. Pavyzdžiui.
.pullquote {...}
.featured {...}
p.left {...}
Šiuose pavyzdžiuose CSS deklaracijos ir verčių poros būtų viduje garbanotose petnešose, tai yra, kaip šie stiliai būtų pritaikyti prie atitinkamo parinkiklio.
Pastaba: jei jūs nustatote klasę tam tikram elementui (pvz., P. Left), vis tiek galite jį naudoti kaip klasių sąrašą; tačiau turėtumėte žinoti, kad tai turės įtakos tik tiems elementams, kurie nurodyti CSS. Kitaip tariant, p. Kairės stilius bus taikomas tik šios klasės fragmentams, nes jūsų parinkėjas iš tiesų sako, kad jis taikomas "dalims, kurių klasės reikšmė yra" kairė ". Priešingai, kiti du pavyzdžio rinkiniai nenurodo tam tikro elemento, todėl jie būtų taikomi bet kuriam elementui, kuris naudoja tas klasių vertes.
Keli klasių privalumai
Keletas klasių gali palengvinti elementų pridėjimą specialiuosius efektus, nesvarbu, kad elementas sukurtų visiškai naują stilių.
Pavyzdžiui, galbūt norėsite greitai išplėsti elementus į kairę arba dešinę . Jūs galite parašyti dvi klases kairėje ir dešinėje tiesiog plūduriuoti: kairėje; ir plūduriuoti: teisė; juose. Tada, kai jūs turėjote elementą, kurį reikia pervesti į kairę, tiesiog pridėti klasę "kairė" į savo klasės sąrašą.
Vis dėlto čia yra puiki linija. Atminkite, kad interneto standartai lemia stiliaus ir struktūros atskyrimą. Struktūra tvarkoma per HTML, o stilius - CSS.
Jei jūsų HTML dokumentas yra užpildytas elementais, kuriuose visi klasių pavadinimai yra "raudoni" arba "kairieji", kurie yra pavadinimai, diktuojantys, kaip turėtų atrodyti elementai, o ne kokie jie yra, jūs kerta šią liniją tarp struktūros ir stiliaus. Dėl šios priežasties stengiuosi kiek įmanoma labiau apriboti ne semantikų klasės pavadinimus.
Kelios klasės, semantika ir JavaScript
Kitas pranašumas naudojant kelias klases yra tas, kad jis suteikia daug daugiau interaktyvumo galimybių.
Galite taikyti naujas klases esamiems elementams naudodami "JavaScript", neišbraukdami jokių pradinių klasių. Taip pat galite naudoti klases, norėdami apibrėžti elemento semantiką . Tai reiškia, kad galite pridėti papildomas klases, kad apibrėžtumėte, ką šis elementas reiškia semantiniu būdu. Tai veikia "Microformats".
Keli klasių trūkumai
Didžiausias trūkumas, kai naudojate kelias klases savo elementams, yra tas, kad jie gali būti šiek tiek nepatogūs, kad būtų galima stebėti ir valdyti laikui bėgant. Gali būti sunku nustatyti, kokie stilius turi įtakos elementui, ir jei kokie nors scenarijai tai daro. Daugelyje šiandien prieinamų sistemų, pvz., "Bootstrap", sunkiai naudojami elementai su keliomis klasėmis. Šis kodas gali ištrūkti iš rankų ir labai sunkiai dirbti, jei nesate atsargūs.
Kai naudojate kelias klases, taip pat kyla pavojus, kad vienos klasės stilius pakeis kitą stilių net tuo atveju, jei nenorėtumėte tai padaryti. Tai gali apsunkinti suprasti, kodėl jūsų stiliai netaikomi net tada, kai atrodo, kad jie turėtų.
Jums reikia žinoti apie specifiškumą, net jei tai yra vieno elemento atributai!
Naudodami įrankį, pvz., "Chrome" žiniatinklio valdytojo įrankius, galite lengviau suprasti, kaip jūsų klasės paveikia jūsų stilių, ir išvengti konfliktinių stilių ir atributų.
Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 7/7/17