At være i stand til at style forskellige aspekter af din HTML-side er en vigtig færdighed for webdesignere og udviklere. For at style dine HTML-websider med skrifttypefarver og -størrelser skal du være fortrolig med CSS. For at målrette skriftstørrelse specifikt kan du bruge CSS skriftstørrelse ejendom.

Hvis du leder efter en måde at ændre HTML-skriftstørrelse ved hjælp af CSS, har vi dig dækket. Lad os dykke ind ved at starte med en introduktion til CSS skriftstørrelse ejendom.

Forstå egenskaben for CSS-skriftstørrelse

Det skriftstørrelse egenskab i CSS er praktisk, når du skal ændre størrelsen på HTML-tekst. Du kan bruge denne egenskab til at ændre størrelsen på hvert stykke tekst på en HTML-side eller målrette mod specifikke elementer for at ændre.

Målretning af specifikke elementer anbefales normalt, da du typisk ikke ønsker, at alt skal have samme størrelse. Tekst, der ikke følger et visuelt hierarki, er svær at scanne igennem og adskille overskrifter på højere niveau fra overskrifter på lavt niveau.

I enklere vendinger, misbrug ikke skriftstørrelse ejendom. Hvis du vil have en overskrift til at skille sig ud, er der forskellige HTML-overskriftstags til det. Tjek vores HTML essentials snydeark for forskellige tags, attributter og mere sammen med forklaringer.

CSS skriftstørrelse egenskab indtager to typer værdier: absolut og relativ.

Absolutte længdeværdier (dvs. px) er faste, mens relative (f.eks. em og eks) er fleksible. For eksempel for en skrifttype-relativ enhed som em, er størrelsen normalt bestemt af det overordnede elements skriftstørrelse. Dog root-baserede skrifttype-relative enheder som rem påvirkes af rodelementets skriftstørrelse ().

Hver har sine fordele og ulemper, men i essensen af ​​at holde tingene fokuseret, vil vi ikke diskutere dem i denne artikel.

Sådan ændres skriftstørrelsen på et HTML-element i CSS

Du kan ændre skriftstørrelsen på HTML-tekst ved at bruge en standard CSS-syntaks.

Angiv først vælgeren (den tekst, du ønsker at ændre) og åbn nogle krøllede klammeparenteser. Indtast derefter skriftstørrelse egenskab efterfulgt af et kolon, angiv den specifikke størrelse, du vil have din HTML-tekst præsenteret i, og luk den af ​​med et semikolon.

Her er syntaksen:

CSS-vælger {
 font-size: værdi;
}

For at få en bedre forståelse af konceptet, gennemgå følgende HTML-kedelplade, der har et par ekstra linjer kode (en overskrift og et afsnit):

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. Ud enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Hvis du vil ændre skriftstørrelsen på afsnitselementet, skal du vælge det (via en klasse, tag eller id) og ved hjælp af CSS skriftstørrelse egenskab, skal du indstille en tilpasset værdi med dine foretrukne enheder. I vores eksempel bruger vi pixels (px).

p {
 skriftstørrelse: 18px;
}

Selvom inline CSS generelt ikke anbefales i store projekter, kan du også bruge det til at ændre størrelsen på HTML-tekst. Ved at tage noter fra den eksterne CSS-kode ovenfor, kan vi implementere det samme inline som sådan:

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. Ud enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tekst i s HTML-tag vil nu have en ny brugerdefineret størrelse.

Relaterede: Væsentlige CSS-tip og tricks, som enhver udvikler bør kende

Fejlfinding af fejl ved ændring af HTML-skriftstørrelse i CSS

Selvom hele processen med at ændre tekststørrelsen i CSS kan virke let, kan den ikke altid vende ud nøjagtigt, som du forventer. Hvis du oplever problemer, skal du starte med at tjekke, om du har gemt ændringerne i din fil (sørg også for, at du linker dit CSS-ark til din HTML-fil). Hvis du gjorde det, så prøv at bruge inline-metoden, og opdater derefter siden.

Hvis det virker, kan der være et problem med din CSS-kode. Prøv at bruge !vigtig tag, og hvis det virker, skal der være en eller anden modstridende kode. Parse din CSS-kode linje for linje for at prøve at fange den fejl.

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

Brug for hjælp til CSS? Prøv disse grundlæggende CSS-kodeeksempler til at starte med, og anvend dem derefter på dine egne websider.

Læs Næste

Om forfatteren