Kaskados stiliaus lapai apibrėžkite tinklalapio elemento išvaizdą, prisitraukdami prie atributų, kuriuos taikote tam elementui. Šie atributai gali būti ID arba klasės, ir, kaip ir visi atributai, jie prideda naudingos informacijos prie elementų, prie kurių jie yra pridėti.
Priklausomai nuo to, kurį atributą pridedate prie elemento, galite parašyti CSS parinkiklį, kad pritaikytumėte būtini vizualiniai stiliai, reikalingi norint pasiekti šio elemento ir svetainės išvaizdą kaip visas.
ID arba klasės dirba tam, kad būtų galima juos sujungti su CSS taisyklėmis, tačiau šiuolaikinis interneto dizainas metodai iš dalies teikia pirmenybę klasėms, o ne ID, nes jie yra mažiau konkretūs ir juos lengviau dirbti.
Viena ar daugiau klasių CSS?
Daugeliu atvejų elementui priskiriate vieną klasės atributą, tačiau iš tikrųjų neapsiribojate tik viena klase, kokia esate su ID. Nors elementas gali turėti tik vieną ID atributą, elementui galite suteikti kelias klases, o kai kuriais atvejais tai padarys jūsų puslapį lengviau stiliaus ir daug daugiau lankstus.
Jei elementui reikia priskirti kelias klases, pridėkite papildomas klases ir paprasčiausiai atskirkite jas tarpais savo atribute.
Pavyzdžiui, šioje pastraipoje yra trys klasės:
Tai būtų pastraipos tekstas
Tai nustato šias tris klases pastraipos žymoje:
- Patraukli citata
- Panašūs
- Kairėje
Atkreipkite dėmesį į tarpus tarp šių klasių verčių. Tos erdvės juos ir nustato kaip skirtingas, individualias klases. Štai kodėl klasių pavadinimuose negali būti tarpų, nes tai padarius juos būtų galima nustatyti kaip atskiras klases.
Kai turėsite savo klasės vertes HTML, tada galite priskirti juos kaip klases savo CSS ir pritaikyti stilius, kuriuos norite pridėti. Pavyzdžiui.
.klausa {... }
.featured {... }
p.kairė {... }
Šiuose pavyzdžiuose CSS deklaracijos ir reikšmių poros pasirodo garbanotų petnešėlių viduje, tai kaip šie stiliai būtų pritaikyti atitinkamam parinkikliui.
Jei tu nustatykite klasę konkrečiam elementui (pavyzdžiui, p.kairė), vis tiek galite jį naudoti kaip klasių sąrašo dalį; tačiau atminkite, kad tai paveiks tik tuos elementus, kurie nurodyti CSS. Kitaip tariant, p.kairė stilius bus taikomas tik šios klasės pastraipoms, nes jūsų pasirinkėjas iš tikrųjų sako, kad reikia ją taikyti „pastraipoms, kurių klasės vertė yra paliko"Priešingai, kiti du pavyzdžio selektoriai nenurodo tam tikro elemento, todėl jie bus taikomi bet kuriam elementui, kuris naudoja tas klasės reikšmes.
Kelios klasės, semantika ir „JavaScript“
Kitas kelių klasių naudojimo pranašumas yra tas, kad tai padidina interaktyvumo galimybes.
Taikykite naujas klases esamiems elementams naudodami „JavaScript“, nepašalindami nė vienos pradinės klasės. Taip pat galite naudoti klases apibrėždami elemento semantika - pridėkite papildomų klasių, kad apibrėžtumėte, ką tas elementas reiškia semantiškai. Šis požiūris yra kaip Mikroformatai veikia.
Kelių klasių pranašumai
Sluoksniuojant kelias klases, elementus bus lengviau pridėti specialiųjų efektų, nesukuriant visiškai naujo to elemento stiliaus.
Pvz., Norėdami plukdyti elementus kairėn arba dešinėn, galite parašyti dvi klases:
paliko.
ir.
teisingai.
su tiesiog.
plūdė: kairė;
ir.
plūdė: dešinė;
juose. Tada, kai tik turite elementą, kurį reikia plaukti į kairę, paprasčiausiai įtraukite klasę „kairė“ į savo klasių sąrašą.
Vis dėlto čia yra gera linija pėsčiomis. Atminkite, kad interneto standartai lemia stiliaus ir struktūros atskyrimą. Struktūra tvarkoma naudojant HTML, o stilius yra CSS. Jei jūsų HTML dokumentas užpildytas elementais, kurių visi turi klasių pavadinimus, pvz., „Raudona“ arba „kairė“, tai yra pavadinimai diktuokite, kaip turėtų atrodyti elementai, o ne kokie jie yra, jūs kertate tą ribą tarp struktūros ir stiliaus.
Kelių klasių trūkumai
Didžiausias trūkumas naudojant keletą vienu metu naudojamų klasių jūsų elementuose yra tas, kad tai gali padaryti juos šiek tiek nepatogius žiūrint ir valdant laikui bėgant. Gali būti sunku nustatyti, kokie stiliai veikia elementą ir ar jį veikia scenarijai. Daugelyje šiandien prieinamų sistemų, pvz., „Bootstrap“, labai naudojami elementai, turintys kelias klases. Jei nesate atsargus, tas kodas gali greitai išsisukti ir su juo dirbti labai sunku.
Kai naudojate kelias klases, taip pat rizikuojate, kad vienos klasės stilius nepaisys kitos stiliaus. Dėl šio susidūrimo gali būti sunku suprasti, kodėl jūsų stiliai netaikomi, net jei atrodo, kad jie turėtų. Nepamirškite specifikos, net turėdami tam vienam elementui taikomus atributus.
Naudodami tokį įrankį kaip „Google Chrome“ žiniatinklio valdytojo įrankiai, galite lengviau pamatyti, kaip jūsų klasės veikia jūsų stilius, ir išvengti šios prieštaringos stilių ir atributų problemos.