Die color-Eigenschaft wird verwendet um Text mit einer Farbe zu versehen. Die Farbe wird bestimmt mit:
einem Farbenamen"red"
einem HEX Wert"#ff0000"
einem RGB Wert"rgb(255,0,0)"
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
background-color: black;
color: orange;
}
</style>
</head>
<body>
<h3>Diese Überschrift hat eine orange Textfarbe und einen schwarzen Hintergrund</h3>
</body>
</html>
Text ausrichten(alignment)
Die text-align Eigenschaft wird verwendet um den Text horizontal auszurichten.
Ein Text kann links, rechts oder zentriert ausgerichtet sein.
Das folgende Beispiel zeigt links , rechts und zentrierte Ausrichtung eines Text:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
h3 {
text-align: left;
}
h4 {
text-align: right;
}
</style>
</head>
<body>
<h2>Überschrift 1 (zentriert)</h2>
<h3>Überschrift 2 (links)</h3>
<h4>Überschrift 3 (rechts)</h4>
<p>Die drei Überschriften oben sind ausgerichtet zentriert , links und rechts.</p>
</body>
</html>
Der text-align: justify;-Wert wird jede Linie gestreckt und gleich Breit. Der Abstand rechts und links sind gleich (Wie in einer Zeitung oder einem Magazin).
<!DOCTYPE html>
<html>
<head>
<style>
main {
border: 1px solid black;
padding: 10px;
width: 300px;
height: 300px;
text-align: justify;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
</style>
</head>
<body>
<h1>Beispiel Text-Ausrichtung: justify;</h1>
<p>Der text-align: justify; Wert wird jede Linie gestreckt und gleich Breit. Der Abstand rechts und links sind gleich (Wie in einer Zeitung oder einem Magazin).</p>
<main>
Was ist HTML? HTML ist eine Abkürzung für Hypertext Markup Language.
Auf Deutsch bedeutet dies so viel wie „Auszeichnungssprache für verknüpften Text“.
HTML ist heute der wichtigste Auszeichnungsstandard im Internet.
</main>
</body>
</html>
Vertikal-Ausrichtung(alignment)
Die vertical-align Eigenschaft lässt sich ein Element vertikal ausrichten.
Dieses Beispiel demonstriert die vertikale Ausrichtung eines Bildes in einem Text:
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: inline;
}
img.top {
vertical-align: text-top;
}
img.middle {
vertical-align: baseline;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>Ein <img src="Bilder/Logo12.png" alt="LogoStrassencoder.ch" width="15" height="15"> Bild mit einer Vorlage(default)-Ausrichtung.</p>
<p>Ein <img class="top" src="Bilder/Logo12.png" alt="LogoStrassencoder.ch" width="15" height="15"> Bild mit einer vertikalen Ausrichtung oben(top alignment).</p>
<p>Ein <img class="middle" src="Bilder/Logo12.png" alt="LogoStrassencoder.ch" width="15" height="15"> Bild mit einer vertikalen Ausrichtung mitte(middle alignment).</p>
<p>Ein <img class="bottom" src="Bilder/Logo12.png" alt="LogoStrassencoder.ch" width="15" height="15"> Bild mit einer vertikalen Ausrichtung unten(bottom alignment).</p>
</body>
</html>
Sie text-decoration Eigenschaft wird verwendet um Dekorationen zu entfernen.
Der Wert text-decoration: none; wird oft benutzt um Unterstreichungen von Links zu entfernen:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>Ein Link ohne Unterstreichung: <a href="https://www.strassencoder.ch">strassencoder.ch</a></p>
</body>
</html>
Die anderen text-decoration Werte werden verwendet um den Text zu dekorieren:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Dies ist eine Überschrift 1</h1>
<h2>Dies ist eine Überschrift 2</h2>
<h3>Dies ist eine Überschrift 3</h3>
</body>
</html>
Die text-transform Eigenschaft wird verwendet um einen Text in Gross- oder Kleinbuchstaben erscheinen zu lassen.
Es kann verwendet werden um alles in Gross- oder Kleinbuchstaben darzustellen oder jedes Wort mit einem Grossbuchstaben zu beginnen:
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">Dies ist einiger Text.</p>
<p class="lowercase">Dies ist einiger Text.</p>
<p class="capitalize">Dies ist einiger Text.</p>
</body>
</html>
Die letter-spacing Eigenschaft wird verwendet um den Leerraum zu bestimmen zwischen den Zeichen in einem Text.
Das folgende Beispiel demonstriert wie man den Abstand vergrössert oder verkleinert zwischen den Zeichen:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>Das ist Überschrift 1</h1>
<h2>Das ist Überschrift 2</h2>
</body>
</html>
Die line-height Eigenschaft wird verwendet um Leerraum zwischen den Zeilen zu vergössern oder verkleinern:
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<hr>
<p>
Dies ist ein Absatz mit Standard Liniehöhe-Abstand.
Dies ist ein Absatz mit Standard Liniehöhe-Abstand.
</p>
<hr>
<p class="small">
Dies ist ein Absatz mit einem kleineren Liniehöhe-Abstand.
Dies ist ein Absatz mit einem kleineren Liniehöhe-Abstand.
</p>
<hr>
<p class="big">
Dies ist ein Absatz mit einem grösseren Liniehöhe-Abstand.
Dies ist ein Absatz mit einem grösseren Liniehöhe-Abstand.
</p>
<hr>
</body>
</html>
Die word-spacing Eigenschaft wird verwendet um den Leerraum zu bestimmen zwischen den Worten in einem Text.
Das folgende Beispiel demonstriert wie man den Abstand vergrössert oder verkleinert zwischen den Worten:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
</style>
</head>
<body>
<h1>Das ist Überschrift 1</h1>
<h2>Das ist Überschrift 2</h2>
</body>
</html>
Die white-space Eigenschaft deaktiviert einen Zeilenumbruch:
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>White Space</h2>
<p>Dies ist einiger Text.Dies ist einiger Text.Dies ist einiger Text.
Dies ist einiger Text.Dies ist einiger Text.Dies ist einiger Text.
Dies ist einiger Text.Dies ist einiger Text.Dies ist einiger Text.
Dies ist einiger Text.Dies ist einiger Text.Dies ist einiger Text.
Dies ist einiger Text.Dies ist einiger Text.Dies ist einiger Text.</p>
</body>
</html>
Die text-shadow Eigenschaft fügt einen Text-Schatten hinzu.
Es ist einfach zu benutzen, definiere nur den horizontalen Schatten (2px), den vertikalen Schatten (2px) und die Unschärfe des Schattens (5px red):
