Å kunne style forskjellige aspekter av HTML-siden din er en viktig ferdighet for webdesignere og utviklere. For å style HTML-nettsidene dine med skriftfarger og -størrelser, må du være kjent med CSS. For å målrette skriftstørrelse spesifikt, kan du bruke CSS skriftstørrelse eiendom.

Hvis du leter etter en måte å endre HTML-skriftstørrelse ved hjelp av CSS, har vi dekket deg. La oss dykke inn ved å starte med en introduksjon til CSS skriftstørrelse eiendom.

Forstå CSS-font-size-egenskapen

De skriftstørrelse egenskap i CSS er nyttig når du trenger å endre størrelsen på HTML-tekst. Du kan bruke denne egenskapen til å endre størrelsen på hvert stykke tekst på en HTML-side eller målrette spesifikke elementer for å endre.

Målretting mot spesifikke elementer anbefales vanligvis siden du vanligvis ikke vil at alt skal ha samme størrelse. Tekst som ikke følger et visuelt hierarki er vanskelig å skanne gjennom og skille overskrifter på høyere nivå fra overskrifter på lavt nivå.

I enklere termer, ikke misbruk

skriftstørrelse eiendom. Hvis du vil at en overskrift skal skille seg ut, finnes det forskjellige HTML-overskriftskoder for det. Sjekk ut vår Jukseark for grunnleggende HTML for forskjellige tagger, attributter og mer sammen med forklaringer.

CSS skriftstørrelse eiendom tar inn to typer verdier: absolutt og relativ.

Absolutte lengdeverdier (dvs. px) er faste mens relative (f.eks. em og eks) er fleksible. For eksempel for en font-relativ enhet som em, er størrelsen vanligvis bestemt av det overordnede elementets skriftstørrelse. Imidlertid liker rotbaserte font-relative enheter rem påvirkes av rotelementets skriftstørrelse ().

Hver har sine fordeler og ulemper, men i essensen av å holde ting fokusert, vil vi ikke diskutere dem i denne artikkelen.

Hvordan endre skriftstørrelsen til et HTML-element i CSS

Du kan endre skriftstørrelsen på HTML-tekst ved å bruke en standard CSS-syntaks.

Først spesifiser velgeren (teksten du ønsker å endre) og åpne noen krøllete klammeparenteser. Deretter skriver du inn skriftstørrelse egenskap etterfulgt av et kolon, spesifiser den spesifikke størrelsen du vil at HTML-teksten skal presenteres i, og lukk den med semikolon.

Her er syntaksen:

CSS-velger {
 font-size: verdi;
}

For å få et bedre grep om konseptet, se gjennom følgende HTML-overskrift som har noen ekstra linjer med kode (en overskrift og et avsnitt):

Dette er min første overskrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Hvis du vil endre skriftstørrelsen til avsnittselementet, må du velge det (via en klasse, kode eller id) og bruke CSS skriftstørrelse eiendom, angi en egendefinert verdi med dine foretrukne enheter. I vårt eksempel bruker vi piksler (px).

p {
 skriftstørrelse: 18px;
}

Selv om inline CSS generelt ikke anbefales i store prosjekter, kan du også bruke den til å endre størrelsen på HTML-tekst. Ved å ta notater fra den eksterne CSS-koden ovenfor, kan vi implementere det samme inline slik:

Dette er min første overskrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tekst i s HTML-taggen vil nå ha en ny egendefinert størrelse.

I slekt: Viktige CSS-tips og triks alle utviklere bør vite

Feilsøking av feil ved endring av HTML-skriftstørrelse i CSS

Selv om hele prosessen med å endre tekststørrelse i CSS kan virke enkel, kan det hende at det ikke alltid blir akkurat slik du forventer. Hvis du opplever problemer, start med å sjekke om du har lagret endringene i filen din (pass også på at du kobler CSS-arket til HTML-filen). Hvis du gjorde det, prøv å bruke den innebygde metoden, og oppdater deretter siden.

Hvis det fungerer, kan det være et problem med CSS-koden din. Prøv å bruke !viktig tag, og hvis det fungerer, må det være en eller annen motstridende kode. Parse CSS-koden linje for linje for å prøve å fange opp feilen.

10 enkle CSS-kodeeksempler du kan lære på 10 minutter

Trenger du hjelp med CSS? Prøv disse grunnleggende CSS-kodeeksemplene til å begynne med, og bruk dem deretter på dine egne nettsider.

Les Neste

Om forfatteren