CSS-Text

Inhaltsverzeichnis

CSS verfügt über viele Eigenschaften zum Formatieren von Text.

text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid gray;
  padding: 8px;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}

p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 3px;
}

a {
  text-decoration: none;
  color: #008CBA;
}
</style>
</head>
<body>

<div>
  <h1>text formatting</h1>
  <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
  The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
  <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>

</body>
</html>

Textfarbe

Die Eigenschaft color wird verwendet, um die Farbe des Texts festzulegen. Die Farbe wird angegeben durch:

ein Farbname - wie „rot“
ein HEX-Wert - wie „#ff0000“
ein RGB-Wert - wie „rgb(255,0,0)“

Eine vollständige Liste möglicher Farbwerte finden Sie unter CSS-Farbwerte.

Die Standardtextfarbe für eine Seite wird in der Textauswahl definiert.

Beispiel

body {
  color: blue;
}

h1 {
  color: green;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>
<p>Another paragraph.</p>

</body>
</html>

Textfarbe und Hintergrundfarbe

In diesem Beispiel definieren wir sowohl die Eigenschaft background-color als auch die Eigenschaft color:

Beispiel

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

  div {
  background-color: blue;
  color: white;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>

</body>
</html>

Wichtig: Ein hoher Kontrast ist für Menschen mit sehr wichtig Sichtprobleme. Achten Sie also immer auf den Kontrast Der Unterschied zwischen der Textfarbe und der Hintergrundfarbe (oder dem Hintergrundbild) ist gut!

Die CSS-Textfarbeneigenschaft

color: Gibt die Farbe des Texts an