Veiledning for formatering av tekst i CSS

Når du designer et nettsted, er formatering av tekst et viktig aspekt for å skape et tiltalende og lesbart grensesnitt.

CSS gir flere egenskaper som lar deg tilpasse ulike elementer av tekst, inkludert skriftfarge, størrelse, familie, justering, avstand og mer.

Nedenfor er en detaljert veiledning for hver tekstformateringsegenskap, sammen med eksempler for hver egenskap.

 

Skriftfarge

Parameter: En fargeverdi, som kan være et fargenavn(f.eks. red), hex-kode(f.eks. "#FF0000"), RGB-verdi(f.eks. "rgb(255, 0, 0)") eller RGBA-verdi(f.eks., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Skriftstørrelse

Parameter: En størrelsesverdi som kan være i piksler(f.eks. "16px"), em-enheter(f.eks. "1em"), rem-enheter(f.eks. "1.2rem"), visningsportbreddeenheter(f.eks. "10vw"), visningsporthøydeenheter(f.eks. "5vh") eller andre enheter.

h1 {  
  font-size: 24px;  
}  

 

Fontfamilie

Parameter: En skriftfamilieliste, spesifisert i foretrukket rekkefølge. Du kan spesifisere skriftnavnet(f.eks. Arial) eller omslutte skriftnavn som inneholder spesialtegn i doble anførselstegn(f.eks. " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Skriftvekt og stil

Parameter font-weight: normal(default), bold, bolder, lighter, eller numeriske verdier fra 100 til 900.

Parameter font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Tekst dekorasjon

Parameter: "none"(default), "underline", "overline", "line-through"  eller en kombinasjon av verdier atskilt med mellomrom.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Tekstjustering

Parameter: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Linjehøyde og marger

Parameter linjehøyde: En numerisk verdi eller en prosentandel av gjeldende skriftstørrelse.

Parametermargin: En måleverdi, for eksempel piksler(px), em-enheter(em), rem-enheter(rem), etc.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Flerkolonne tekstoppsett

Parameter: Et positivt heltall eller "auto"(default).

.container {  
  column-count: 2;  
}  

 

Tekstfargeendring ved peker

Ingen spesifikk parameter, bruk bare pseudoklassen :hover.

a:hover {  
  color: red;  
}  

 

Tekstfargeendring på tilstand(aktiv, besøkt)

Ingen spesifikk parameter, bruk bare pseudoklassene :active  og :visited.

a:visited {  
  color: purple;  
}  

 

Vi håper at forklaringene og eksemplene ovenfor har hjulpet deg med å forstå hvordan du bruker og tilpasser tekstformateringsegenskaper i CSS for å lage et visuelt tiltalende og engasjerende tekstgrensesnitt på nettstedet ditt.