Vejledning til formatering af tekst i CSS

Når du designer et websted, er formatering af tekst et vigtigt aspekt af at skabe en tiltalende og læsbar grænseflade.

CSS giver flere egenskaber, der giver dig mulighed for at tilpasse forskellige tekstelementer, herunder skrifttypefarve, størrelse, familie, justering, mellemrum og mere.

Nedenfor er en detaljeret vejledning om hver tekstformateringsegenskab sammen med eksempler for hver egenskab.

 

Skrift farve

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

p {  
  color: blue;  
}  

 

Skriftstørrelse

Parameter: En størrelsesværdi, som kan være i pixels(f.eks. "16px"), em-enheder(f.eks. "1em"), rem-enheder(f.eks. "1.2rem"), viewport-breddeenheder(f.eks. "10vw"), viewport højdeenheder(f.eks. "5vh") eller andre enheder.

h1 {  
  font-size: 24px;  
}  

 

Fontfamilie

Parameter: En skrifttypefamilieliste, specificeret i den foretrukne rækkefølge. Du kan angive skrifttypenavnet(f.eks. Arial) eller omslutte skrifttypenavne, der indeholder specialtegn i dobbelte anførselstegn(f.eks. " Times New Roman).

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

 

Skrifttypevægt og stil

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

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

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

 

Tekst dekoration

Parameter: "none"(default), "underline", "overline", "line-through"  eller en kombination af værdier adskilt af mellemrum.

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

 

Tekstjustering

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

p {  
  text-align: center;  
}  

 

Linjehøjde og marginer

Parameter linjehøjde: En numerisk værdi eller en procentdel af den aktuelle skriftstørrelse.

Parametermargin: En måleværdi, såsom pixels(px), em-enheder(em), rem-enheder(rem) osv.

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

 

Flerspaltet tekstlayout

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

.container {  
  column-count: 2;  
}  

 

Tekstfarveændring ved svæv

Ingen specifik parameter, brug kun pseudo-klassen :hover.

a:hover {  
  color: red;  
}  

 

Tekstfarveændring på tilstand(aktiv, besøgt)

Ingen specifik parameter, brug kun pseudo-klasserne :active  og :visited.

a:visited {  
  color: purple;  
}  

 

Vi håber, at ovenstående forklaringer og eksempler har hjulpet dig med at forstå, hvordan du bruger og tilpasser tekstformateringsegenskaber i CSS for at skabe en visuelt tiltalende og engagerende tekstgrænseflade på dit websted.