Gids voor het opmaken van tekst in CSS

Bij het ontwerpen van een website is het opmaken van tekst een belangrijk aspect van het creëren van een aantrekkelijke en leesbare interface.

CSS biedt verschillende eigenschappen waarmee u verschillende tekstelementen kunt aanpassen, waaronder letterkleur, lettergrootte, familie, uitlijning, spatiëring en meer.

Hieronder vindt u een gedetailleerde gids over elke eigenschap voor tekstopmaak, samen met voorbeelden voor elke eigenschap.

 

Letterkleur

Parameter: een kleurwaarde, die een kleurnaam kan zijn(bijv. red), hexadecimale code(bijv. "#FF0000"), RGB-waarde(bijv. "rgb(255, 0, 0)") of RGBA-waarde(bijv., "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

Lettertypegrootte

Parameter: een groottewaarde, die in pixels kan zijn(bijv. "16px"), em-eenheden(bijv. "1em"), rem-eenheden(bijv. "1.2rem"), viewport-breedte-eenheden(bijv. "10vw"), viewport-hoogte-eenheden(bijv. "5vh") of andere eenheden.

h1 {  
  font-size: 24px;  
}  

 

Lettertype familie

Parameter: een lijst met lettertypefamilies, opgegeven in de gewenste volgorde. U kunt de naam van het lettertype specificeren(bijv. Arial) of namen van lettertypen die speciale tekens bevatten tussen dubbele aanhalingstekens plaatsen(bijv. " Times New Roman).

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

 

Lettergewicht en -stijl

Parameter font-weight: normal(default), bold, , of numerieke waarden van 100 tot 900 bolder. lighter

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

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

 

Tekst decoratie

Parameter: "none"(default), "underline", "overline", "line-through"  of een combinatie van waarden gescheiden door spaties.

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

 

Tekstuitlijning

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

p {  
  text-align: center;  
}  

 

Lijnhoogte en marges

Parameter regelhoogte: Een numerieke waarde of een percentage van de huidige lettergrootte.

Parametermarge: een meetwaarde, zoals pixels(px), em-eenheden(em), rem-eenheden(rem), enz.

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

 

Tekstlay-out met meerdere kolommen

Parameter: een positief geheel getal of "auto"(default).

.container {  
  column-count: 2;  
}  

 

Tekstkleurverandering bij zweven

Geen specifieke parameter, gebruik alleen de pseudo-class :hover.

a:hover {  
  color: red;  
}  

 

Tekstkleurverandering op status(actief, bezocht)

Geen specifieke parameter, gebruik alleen de pseudo-klassen :active  en :visited.

a:visited {  
  color: purple;  
}  

 

We hopen dat de bovenstaande uitleg en voorbeelden u hebben geholpen te begrijpen hoe u tekstopmaakeigenschappen in CSS kunt gebruiken en aanpassen om een ​​visueel aantrekkelijke en boeiende tekstinterface op uw website te creëren.