Hvordan du definerer klasser for HTML5 og CSS3 programmering - dummies

Du kan enkelt bruke en stil på alle elementene av en bestemt type på en HTML5-side, men noen ganger vil du kanskje ha strengere kontroll over stilene dine. For eksempel vil du kanskje ha mer enn en avsnittstil. Se for eksempel på klassene. html side.

Nok en gang finnes flere formater på denne siden:

• Spørsmål har en stor kursiv kursiv skrift. Det er mer enn ett spørsmål.

• Svarene er mindre, blå og i en kursiv skrift. Det er også mer enn ett svar.

  

Spørsmål og svar er alle avsnitt, så du kan ikke bare utforme avsnittet fordi du trenger to forskjellige stilarter. Det er mer enn ett spørsmål og mer enn ett svar, så ID-trikset ville være problematisk. To forskjellige elementer kan ikke ha samme ID. Det er her begrepet klasser kommer inn i spill. Hver ID tilhører et enkelt element, men mange elementer kan dele samme klasse.

Slik legger du til klasser på siden

Med CSS kan du definere klasser i HTML og lage stildefinisjoner som brukes over en klasse. Det virker slik:

1. Legg klassen attributt til HTML-spørsmålene dine.

   I motsetning til ID kan flere elementer dele samme klasse. Når du stiller klassen til spørsmålet, indikerer disse avsnittene å bli stilet som spørsmål:

   Hva slags ku bor i Arktis?
   
   
   
   
   
   
   

2. Legg lignende klassenattributter til svarene ved å sette klassen av svarene til svar:

   En Eskimoo!
   

   Nå har du to forskjellige underklasser i avsnittet: spørsmål og svar.

3. Lag en klassestil for spørsmålene.

   Klassestilen er definert i CSS. Oppgi en klasse med perioden (.) Før klassenavnet. Klasser er definert i CSS slik:

   . spørsmålet {font: italic 150% arial, sans-serif; Text-align: left;}
   

   I denne situasjonen er spørreklassen definert som en stor sans serif font justert til venstre.

4. Definer utseendet på svarene.

   Klassen bruker en rettjustert kursiv skrift.

. svar på {font: 120% "Comic Sans MS", kursiv; tekstjustering: høyre; farge: # 00F;}

Bruke klasser

Her er koden for siden, som viser hvordan du bruker CSS-klasser:

klasser. html. spørsmålet {font: italic 150% arial, sans-serif; tekstjustering: venstre;}. svar på {font: 120% "Comic Sans MS", kursiv; tekstjustering: høyre; farge: # 00F;}

Favoritt vitser
Hvilken slags ku bor i Arktis?
En Eskimoo!
Hva går på toppen av et hundhus?
Woof!

Noen ganger ser du selektorer, som

s. fancy

som inkluderer både et element og et klassenavn.Denne stilen gjelder kun for avsnitt med vedlagt klasse. Generelt er klasser gode fordi de kan brukes på alle slags ting, så du kan legge ut elementnavnet for å gjøre stilen så gjenbrukbar som mulig.

Kombinere klasser

Ett element kan bruke mer enn én klasse.

Avsnittene ser ut til å være i tre forskjellige stiler, men bare rød og skript er definert. Tredje avsnittet bruker begge klassene. Her er koden:

redScript. html. rød {farge: hvit; bakgrunnsfarge: rød;}. Skript {font-family: cursive;}

Flere klasser
Dette avsnittet bruker den røde klassen
Dette avsnittet bruker skriptet klassen
Dette avsnittet bruker begge klassene

Stilarkivet introduserer to klasser. Den røde klassen gjør avsnittet rødt (vel, hvit tekst med rød bakgrunn), og manuskriptet bruker en kursiv skrift til elementet.

De to første avsnittene har hver en klasse, og klassene fungerer som du forventer. Den interessante delen er tredje avsnitt fordi den har to klasser.

Begge stiler vil bli brukt på elementet i den rekkefølge de er skrevet. Merk at begge klassenavnene forekommer inne i sitater, og det er ikke behov for kommaer (eller tillatt). Du kan søke mer enn to klasser på et element hvis du ønsker det. Hvis klassene har motstridende regler (si en gjør elementet grønt og det neste gjør det blått), vil den siste klassen i listen overskrive tidligere verdier.

Et element kan også ha en ID. ID-stilen, elementstilen og alle klassestiler tas i betraktning når nettleseren prøver å vise objektet.

Vanligvis er det best å nevne klasser basert på deres betydning (som mainBackgroundColor). Du kan bestemme at grønn er bedre enn rød, så du må enten endre klassenavnet eller du må ha en rød klasse som farget ting grønt. Det ville være rart.