Lag fancy overskrifter med CSS

Bruk fonter, rammer og bilder til å dekorere overskrifter

InnholdsfortegnelseUtvide

• Hvorfor bruke overskriftskoder i stedet for inndelinger
• Du trenger ikke å huske hvilke klasser du brukte
• Gi en sterk sidekontur
• Siden din vil gi mening selv med stilene slått av
• Det er nyttig for skjermlesere og nettstedtilgjengelighet
• Stil teksten og skriften til overskriftene dine
• Grenser kan kle opp overskrifter
• Legg til bakgrunnsbilder i overskriftene dine
• Bildeerstatning i overskrifter

Overskrifter er vanlige på de fleste nettsider. Faktisk har stort sett alle tekstdokumenter en tendens til å ha minst én overskrift slik at du vet tittelen på det du leser. Disse overskriftene er kodet ved hjelp av HTML overskriftselementer — h1, h2, h3, h4, h5 og h6.

På noen nettsteder kan du finne at overskrifter er kodet uten å bruke disse elementene. I stedet kan overskrifter bruke avsnitt med spesifikke klasseattributter lagt til dem, eller inndelinger med klasseelementer. Grunnen til at vi ofte hører om denne feilaktige praksisen er at designeren 'ikke liker hvordan overskrifter ser ut'. Som standard vises overskrifter med fet skrift og de er større i størrelse, spesielt h1- og h2-elementene som vises i mye større skriftstørrelse enn resten av teksten på en side. Husk at dette bare er standardutseendet til disse elementene! Med CSS , du kan få overskriften til å se ut som du vil! Du kan endre skriftstørrelsen, fjerne fet skrift og mye mer. Overskrifter er den riktige måten å kode en sides overskrifter på. Her er noen grunner til hvorfor.

Hvorfor bruke overskriftskoder i stedet for inndelinger

Dette er den beste grunnen til å bruke overskrifter, og bruke dem i riktig rekkefølge (dvs. h1, deretter h2, deretter h3, osv.). Søkemotorer gi den høyeste vektingen til tekst som er inkludert i overskriftstagger fordi det er en semantisk verdi til den teksten. Med andre ord, ved å merke sidetittelen din H1, forteller du søkemotoredderkoppen at det er fokus nummer 1 på siden. H2-overskrifter har #2 vekt, og så videre.

Du trenger ikke å huske hvilke klasser du brukte for å definere overskriftene dine

Når du vet at alle websidene dine kommer til å ha en H1 som er fet, 2em og gul, så kan du definere det en gang i stilarket og være ferdig. 6 måneder senere, når du legger til en annen side, legger du bare til en H1-tag øverst på siden din, du trenger ikke gå tilbake til andre sider for å finne ut hvilken stil-ID eller klasse du brukte til å definere hovedsiden overskrift og underoverskrifter.

Gi en sterk sidekontur

Kontur gjør teksten lettere å lese. Det er derfor de fleste amerikanske skoler lærte elevene å skrive en disposisjon før de skriver oppgaven. Når du bruker overskriftskoder i et disposisjonsformat, har teksten en tydelig struktur som blir tydelig veldig raskt. I tillegg finnes det verktøy som kan gjennomgå sidekonturen for å gi en synopsis, og disse er avhengige av overskriftskoder for disposisjonsstrukturen.

Siden din vil gi mening selv med stilene slått av

Ikke alle kan se eller bruke stilark (og dette kommer tilbake til #1 - søkemotorer ser innholdet (teksten) på siden din, ikke stilarkene). Hvis du bruker overskriftskoder, gjør du sidene dine mer tilgjengelige fordi overskriftene gir informasjon som en DIV-tag vil ikke.

Det er nyttig for skjermlesere og nettstedtilgjengelighet

Riktig bruk av overskrifter skaper en logisk struktur for et dokument. Dette er hva skjermlesere vil bruke til å 'lese' et nettsted for en bruker med nedsatt syn, noe som gjør nettstedet ditt tilgjengelig for funksjonshemmede.

Stil teksten og skriften til overskriftene dine

Den enkleste måten å komme bort fra det 'store, dristige og stygge'-problemet med overskriftskoder er å style teksten slik du vil at den skal se ut. Faktisk, når du jobber med et nytt nettsted, er det best å vanligvis skrive avsnittet, h1, h2 og h3-stilene først. Hold deg til bare skrifttype og størrelse/vekt. Dette kan for eksempel være et foreløpig stilark for et nytt nettsted (dette er bare noen eksempler på stiler som kan brukes):

Du kan endre fonter av overskriften eller endre tekststilen eller til og med tekstfargen. Alle disse vil gjøre din 'stygge' overskrift til noe mer levende og i tråd med designet ditt.

Grenser kan kle opp overskrifter

Kanter er en fin måte å forbedre overskriftene dine på og er enkle å legge til. Men ikke glem å eksperimentere med kantene - du trenger ikke en kant på hver side av overskriften. Og du kan bruke mer enn bare kjedelige kanter.

Vi la til en topp- og bunnramme til eksempeloverskriften vår for å introdusere noen interessante visuelle stiler. Du kan legge til kantlinjer på hvilken som helst måte du ønsker for å oppnå den designstilen du ønsker.

Legg til bakgrunnsbilder i overskriftene dine for enda mer pizza

Mange nettsteder har en overskriftsdel øverst på siden som inneholder en overskrift - vanligvis nettstedtittelen og en grafikk. De fleste designere tenker på dette som to separate elementer, men du trenger ikke. Hvis grafikken bare er der for å dekorere overskriften, hvorfor ikke legge den til i overskriftsstilene?

Trikset med denne overskriften er at vi vet at bildet vårt er 90 piksler høyt. Så vi la til utfylling nederst i overskriften på 90px (utfylling: 0,5 0 90 piksler 0p ;). Du kan leke med marginene, linjehøyden og utfyllingen for å få teksten til overskriften til å vises akkurat der du vil ha den.

En ting å huske når du bruker bilder er at hvis du har en responsiv nettside (som du bør) med en layout som endres basert på skjermstørrelser og enheter, vil ikke overskriften din alltid ha samme størrelse. Hvis du trenger at overskriften skal ha en nøyaktig størrelse, kan dette skape problemer. Det er en av grunnene til at vi generelt unngår bakgrunnsbilder i en overskrift, så kule som de noen ganger kan se ut.

Bildeerstatning i overskrifter

Dette er en annen populær teknikk for webdesignere fordi den lar deg lage en grafisk overskrift og erstatte teksten i overskriftskoden med det bildet. Dette er sannferdig en antikk praksis fra webdesignere, som hadde tilgang til svært få fonter og ønsket å bruke mer eksotiske fonter i arbeidet sitt. Fremveksten av nettfonter har virkelig endret hvordan designere nærmer seg nettsteder. Overskrifter kan nå settes i en lang rekke fonter, og bilder med de innebygde skriftene er ikke lenger nødvendig. Som sådan vil du bare finne CSS-bilder som erstatning for overskrifter på eldre nettsteder som ennå ikke er oppdatert til mer moderne praksis.

Redigert av Jeremy Girard