Bruke Span og Div HTML-elementer med CSS i nettdesign

Divs og spenner kan ikke byttes ut i websidebygging. Hver tjener forskjellige formål, og å vite når du skal bruke hver vil hjelpe deg med å utvikle rene nettsteder som er enkle å administrere.

Bruke Div Element

Divs definere logiske inndelinger på websiden din. EN div—Kort for deling — er i utgangspunktet en boks der du kan plassere andre HTML-elementer som hører sammen. En inndeling kan ha flere andre elementer i seg, som avsnitt, overskrifter, lister, lenker, bilder osv. Det kan til og med ha andre divisjoner inne i det for å gi ytterligere struktur og organisering.

For å bruke div element, plasser et åpent merk før området du ønsker, som en egen divisjon, og en avslutning 

 tag etter det:

innhold i div

Hvis du styler dette området med CSS, kan du legge til et ID velger til åpningsdiv-taggen:


Eller du kan legge til en klassevelger:


Du kan deretter jobbe med disse elementene i CSS eller JavaScript.

Nåværende beste praksis lener seg mot å bruke klassevalgere i stedet for ID-er, delvis på grunn av hvor spesifikke ID-velgere er. Enten er imidlertid akseptabel, og du kan til og med gi en

instagram viewer
div både ID og klassevalg.

Divs eller seksjoner?

De div element er forskjellig fra HTML5seksjon element fordi det ikke gir det vedlagte innholdet noen semantisk betydning. Hvis du ikke er sikker på om innholdsblokken skal være en div eller a seksjon, tenk på formålet med elementet og innholdet.

  • Hvis du trenger elementet bare for å legge til stiler i det området på siden, bør du bruke div element.
  • Hvis innholdet har et tydelig fokus og kan stå alene, bør du vurdere å bruke seksjon element i stedet.

Til syvende og sist begge deler divs og seksjoner oppføre seg på samme måte, og du kan gi en av dem attributter og style dem med CSS. Begge er elementer på blokknivå.

Bruke spenn

Span er et innebygd element som standard, i motsetning til div og seksjon elementer. De span elementet brukes vanligvis til å pakke inn et bestemt stykke innhold, for eksempel tekst, for å gi det en ekstra krok du kan bruke til å legge til stiler. Uten noen stilattributter, derimot, span har ingen innvirkning på tekst i det hele tatt.

En annen forskjell mellom span og div elementene er at div element inkluderer et avsnittskifte, mens span element ber bare nettleseren om å bruke tilknyttede CSS-stilregler på det som er vedlagt tagger:


Fremhevet tekst  og ikke-uthevet tekst.



Du kan legge til.

class = "highlight"

eller lignende til span element for å style teksten med CSS.

Span-elementet har ingen nødvendige attributter, men de tre som er mest nyttige er de samme som for div element:

  • stil
  • klasse
  • ID

Bruk span når du vil endre innholdsstilen uten å definere innholdet som et nytt element på blokknivå i dokumentet.

For eksempel hvis du vil ha det andre ordet i en h3 på vei til å være rød, kan du omgi ordet med en span element som stiler ordet som rød tekst. Ordet er fortsatt en del av h3 element, men vises i rødt.

instagram story viewer