Anleitung zum Formatieren von Text in CSS

Beim Entwerfen einer Website ist die Textformatierung ein wichtiger Aspekt für die Erstellung einer ansprechenden und lesbaren Benutzeroberfläche.

CSS bietet mehrere Eigenschaften, mit denen Sie verschiedene Textelemente anpassen können, darunter Schriftfarbe, -größe, -familie, -ausrichtung, -abstand und mehr.

Nachfolgend finden Sie eine detaillierte Anleitung zu jeder Textformatierungseigenschaft sowie Beispiele für jede Eigenschaft.

 

Schriftfarbe

Parameter: Ein Farbwert, der ein Farbname(z. B. red), ein Hexadezimalcode(z. B. „#FF0000“), ein RGB-Wert(z. B. „rgb(255, 0, 0)“) oder ein RGBA-Wert(z. B. „rgb(255, 0, 0)“) sein kann, „rgba(255, 0, 0, 0.5)“).

p {  
  color: blue;  
}  

 

Schriftgröße

Parameter: Ein Größenwert, der in Pixeln(z. B. „16px“), em-Einheiten(z. B. „1em“), rem-Einheiten(z. B. „1.2rem“) und Einheiten der Ansichtsfensterbreite(z. B. „10vw“) angegeben werden kann., Ansichtsfenster-Höheneinheiten(z. B. „5vh“) oder andere Einheiten.

h1 {  
  font-size: 24px;  
}  

 

Schriftfamilie

Parameter: Eine Liste der Schriftfamilien, angegeben in der bevorzugten Reihenfolge. Sie können den Schriftartnamen angeben(z. B. Arial) oder Schriftartnamen, die Sonderzeichen enthalten, in doppelte Anführungszeichen setzen(z. B. „ Times New Roman).

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

 

Schriftstärke und -stil

Parameter font-weight: normal(default), bold, bolder, lighter oder numerische Werte von 100 bis 900.

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

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

 

Textdekoration

Parameter: "none"(default), "underline", "overline", "line-through"  oder eine Kombination von durch Leerzeichen getrennten Werten.

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

 

Textausrichtung

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

p {  
  text-align: center;  
}  

 

Zeilenhöhe und Ränder

Parameter Zeilenhöhe: Ein numerischer Wert oder ein Prozentsatz der aktuellen Schriftgröße.

Parameterspanne: Ein Messwert, z. B. Pixel(px), em-Einheiten(em), rem-Einheiten(rem) usw.

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

 

Mehrspaltiges Textlayout

Parameter: Eine positive Ganzzahl oder "auto"(default).

.container {  
  column-count: 2;  
}  

 

Änderung der Textfarbe beim Hover

Kein spezifischer Parameter, nur Pseudoklasse verwenden :hover.

a:hover {  
  color: red;  
}  

 

Änderung der Textfarbe bei Status(aktiv, besucht)

Kein spezifischer Parameter, nur die Pseudoklassen :active  und verwenden :visited.

a:visited {  
  color: purple;  
}  

 

Wir hoffen, dass Ihnen die obigen Erklärungen und Beispiele dabei geholfen haben, zu verstehen, wie Sie Textformatierungseigenschaften in CSS verwenden und anpassen, um eine optisch ansprechende und ansprechende Textoberfläche auf Ihrer Website zu erstellen.