IT-Kurs CSS-Grundlagen 022_Text, Schriftart, Links

Text

Die CSS-Textsteuerung hilft uns, Textinformationen auf Webseiten besser darzustellen und die visuelle Wirkung zu verbessern.

Einrückung

Wird verwendet, um die Einrückung der ersten Zeile eines Textes festzulegen, geeignet für Absatzeinrückungen. Vermeiden Sie die Verwendung bei Inline-Elementen. Die Eigenschaft akzeptiert absolute oder relative Werte. Absolute Einheiten umfassen Pixel (px), Zoll (in), Zentimeter (cm), Millimeter (mm) usw. Relative Einheiten umfassen em, rem, vw, vh usw.

Beispiel:

1
p {
2
  text-indent: 2em;
3
}

Effekt:

Schreibmodus

Der Schreibmodus in CSS bezieht sich auf die Textanordnungsrichtung, einschließlich horizontaler, vertikaler und gemischter Modi. Tatsächlich wird die Anzeigerichtung von Blockelementen auf der Seite festgelegt – entweder von oben nach unten, von rechts nach links oder von links nach rechts. Dies bestimmt die Textrichtung.

• horizontal-tb: Blockfluss von oben nach unten. Die entsprechende Textrichtung ist horizontal.
• vertical-rl: Blockfluss von rechts nach links. Die entsprechende Textrichtung ist vertikal.
• vertical-lr: Blockfluss von links nach rechts. Die entsprechende Textrichtung ist vertikal.

Beispiel:

1
body {
2
  writing-mode: vertical-rl;
3
}

Effekt: Wenn wir den Schreibmodus umschalten, ändern wir auch die Block- und Inline-Textrichtung. Im horizontal-tb-Schreibmodus verläuft die Blockrichtung horizontal von oben nach unten, während im vertical-rl-Schreibmodus die Blockrichtung vertikal von rechts nach links verläuft. Die Blockdimension bezieht sich immer auf die Anzeigerichtung des Blocks im Seitenschreibmodus. Die Inline-Dimension bezieht sich immer auf die Textrichtung.

Dieses Bild zeigt die beiden Dimensionen im horizontalen Schreibmodus.

Dieses Bild zeigt die beiden Dimensionen im vertikalen Schreibmodus.

Textrichtung

Verwenden Sie die Eigenschaft direction, um die Leserichtung des Textes festzulegen: von links nach rechts (ltr) oder von rechts nach links (rtl). Geeignet für mehrsprachige Websites, um die Leserichtung je nach Textsprache festzulegen. Einige Sprachen (wie Arabisch) werden horizontal geschrieben, aber von rechts nach links.

Beispiel:

1
html {
2
  direction: rtl;
3
}

Effekt:

Textdekoration

Verwenden Sie die Eigenschaft text-decoration, um Liniendekorationseffekte für Text festzulegen.

• none: Keine Linie
• overline: Überstreichung
• underline: Unterstreichung
• line-through: Durchstreichung

Beispiel:

1
<p style="text-decoration: none;">Kein Textstrich</p>
2
<p style="text-decoration: overline;">Ich habe eine Überstreichung</p>
3
<p style="text-decoration: underline;">Ich habe eine Unterstreichung</p>
4
<p style="text-decoration: line-through;">Ich habe eine Durchstreichung</p>

Effekt:

Textausrichtung

Legt die horizontale Ausrichtung des Textes fest.

• left: Text linksbündig, Standardwert in den meisten Sprachen.
• center: Text horizontal zentriert.
• right: Text rechtsbündig.
• justify: Blocksatz, füllt jede Zeile durch zusätzliche Leerzeichen auf. Aufgrund von Textanordnung und Containerbreite (kurzer Text, fehlende Leerzeichen, zu wenige Zeilen, einsprachig) ist der Blocksatzeffekt in manchen Fällen möglicherweise nicht leicht erkennbar.
• justify-all (weniger gebräuchlich): Ähnlich wie justify, aber verteilt zusätzlichen Leerraum gleichmäßig am Anfang und Ende der Zeile.
• start: Je nach Textrichtung des Browsers, Text am Anfang (normalerweise links) ausgerichtet.
• end: Je nach Textrichtung des Browsers, Text am Ende (normalerweise rechts) ausgerichtet.

Beispiel:

1
<p style="text-align: left;">Dieser Text ist linksbündig</p>
2
<p style="text-align: right;">Dieser Text ist rechtsbündig</p>
3
<p style="text-align: center;">Dieser Text ist zentriert</p>

Effekt:

Zeilenhöhe

Mit der Eigenschaft line-height kann die Höhe zwischen Textzeilen festgelegt werden. Durch Anpassung der Zeilenhöhe an Schriftgröße und Designanforderungen kann die Lesbarkeit verbessert werden.

Beispiel:

1
<p>Dies ist normale Zeilenhöhe <br>Dies ist normale Zeilenhöhe</p>
2
<p style="line-height: 3;">Schau dir die Zeilenhöhe dieses Textes an <br>Schau dir die Zeilenhöhe dieses Textes an</p>

Effekt:

Abstände

Legt die Abstände zwischen Textinhalten fest.

• letter-spacing legt den Abstand zwischen Buchstaben, chinesischen Zeichen und Zahlen fest.
• word-spacing legt den Abstand zwischen Wörtern fest (Zeichen auf beiden Seiten von Leerzeichen).

Beispiel:

1
<p style="letter-spacing: 10px;">Schau dir meinen Textabstand CSS an</p>
2
<p style="word-spacing: 10px;">Schau dir meinen Textabstand CSS 123 an</p>

Effekt:

Zeilenumbruch

Steuert die Art und Weise, wie Text umbrochen wird.

word-wrap: Steuert hauptsächlich den Zeilenumbruch langer Wörter oder URLs, besser geeignet für englische Szenarien.

• normal (Standardwert): Folgt normalen Umbruchregeln, kein Umbruch innerhalb von Wörtern erlaubt.
• break-word: Erlaubt Umbruch innerhalb von Wörtern, kann lange Wörter oder URLs erzwungen umbrechen.

Beispiel:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    word-wrap: normal;
7
}
8
.example2{
9
    word-wrap: break-word;
10
}

1
    <p class="base example1">Schau wie ich umbreche HelloCSS Hello-CSS</p>
2
    <p class="base example2">Schau wie ich umbreche HelloCSS Hello-CSS</p>

Effekt:

white-space: Steuert die Behandlung von Leerzeichen innerhalb eines Elements, einschließlich Leerzeichen, Zeilenumbrüche usw.

• normal (Standardwert): Normale Behandlung von Leerzeichen, aufeinanderfolgende Leerzeichen zusammenführen und nach Zeilenumbruchzeichen umbrechen.
• nowrap: Kein Textumbruch erlaubt, Zeilenumbruchzeichen ignorieren.
• pre: Leerzeichen beibehalten, aufeinanderfolgende Leerzeichen nicht zusammenführen, Text wie im Quellcode anzeigen.
• pre-line: Zeilenumbruchzeichen beibehalten, aufeinanderfolgende Leerzeichen zusammenführen, andere Leerzeichen normal behandeln.
• pre-wrap: Leerzeichen beibehalten, aufeinanderfolgende Leerzeichen zusammenführen, Zeilenumbruchzeichen beibehalten.

Beispiel:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    white-space: normal;
7
}
8
.example2{
9
    white-space: nowrap;
10
}
11
.example3{
12
    white-space: pre;
13
}

1
    <p class="base example1">Schau wie ich umbreche HelloCSS Hello-CSS</p>
2
    <p class="base example2">Schau wie ich umbreche HelloCSS Hello-CSS</p>
3
    <p class="base example3">Schau wie ich umbreche HelloCSS Hello-CSS</p>

Effekt:

Schatten

Ermöglicht das Hinzufügen eines oder mehrerer (kommagetrennt) Schatteneffekte zum Text, um die Lesbarkeit zu verbessern oder einzigartige Designeffekte zu erzielen.

• h-shadow: Position des horizontalen Schattens. Kann ein positiver Wert (nach rechts versetzt) oder negativer Wert (nach links versetzt) sein.
• v-shadow: Position des vertikalen Schattens. Kann ein positiver Wert (nach unten versetzt) oder negativer Wert (nach oben versetzt) sein.
• blur: Optional. Gibt den Unschärfegrad des Schattens an, je größer der Wert, desto unschärfer. Kann weggelassen werden.
• color: Farbe des Schattens. Kann ein konkreter Farbwert, ein Schlüsselwort oder ein RGBA-Wert sein.

Beispiel:

1
<p style="text-shadow: 2px 2px black;">Schau dir meinen Schatten an</p>
2
<p style="text-shadow: 1px 1px 1px red;">Schau dir meinen Schatten an</p>
3
<p style="text-shadow: 3px 3px 5px darkgrey;">Schau dir meinen Schatten an</p>
4
<p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">Schau dir meinen Schatten an</p>

Effekt:

Textumwandlung

Steuert die Groß-/Kleinschreibungsumwandlung von Text.

• none: Standardwert, behält die ursprüngliche Groß-/Kleinschreibung bei.
• capitalize: Wandelt den ersten Buchstaben jedes Wortes in einen Großbuchstaben um.
• uppercase: Wandelt den gesamten Text in Großbuchstaben um.
• lowercase: Wandelt den gesamten Text in Kleinbuchstaben um.

Beispiel:

1
<p style="text-transform: none;">Schau wie ich umgewandelt werde hello CSS</p>
2
<p style="text-transform: capitalize;">Schau wie ich umgewandelt werde hello CSS</p>
3
<p style="text-transform: uppercase;">Schau wie ich umgewandelt werde hello CSS</p>
4
<p style="text-transform: lowercase;">Schau wie ich umgewandelt werde hello CSS</p>

Effekt:

Textüberlauf

In CSS kann die Eigenschaft overflow verwendet werden, um Textüberlauf zu behandeln.

• visible: Text läuft nicht über, wird vollständig angezeigt.
• hidden: Bei Textüberlauf wird der Text ausgeblendet.
• scroll: Bei Textüberlauf werden Scrollleisten angezeigt, der Benutzer kann scrollen, um den gesamten Inhalt zu sehen.
• auto: Bei Textüberlauf wird je nach Breite und Höhe des Elements entschieden, ob Scrollleisten angezeigt werden.

Beispiel:

1
.base{
2
    white-space: nowrap;
3
    background: #d7d8d9;
4
    width: 120px;
5
}
6
.example1{
7
    overflow: visible;
8
}
9
.example2{
10
    overflow: hidden;
11
}
12
.example3{
13
    overflow: scroll;
14
}
15
.example4{
16
    overflow: auto;
17
}

1
    <p class="base example1">Schau ob mein Textinhalt überläuft</p>
2
    <p class="base example2">Schau ob mein Textinhalt überläuft</p>
3
    <p class="base example3">Schau ob mein Textinhalt überläuft</p>
4
    <p class="base example4">Schau ob mein Textinhalt überläuft</p>

Effekt:

Schriftart

Die Steuerung und Definition von Schriftarten ist ein wichtiger Teil des Webdesigns.

Schriftfamilie

Definieren Sie die Schriftart über die Eigenschaft font-family. font-family kann eine Schriftart angeben, es wird empfohlen, mehrere Ersatzschriftarten bereitzustellen. Der Browser versucht diese Schriftarten nacheinander nach Priorität, bis eine geeignete verfügbare Schriftart gefunden wird. Wenn der Schriftname Leerzeichen, Sonderzeichen oder chinesische Zeichen enthält, wird empfohlen, ihn in Anführungszeichen zu setzen. Web-Schriftdienste können verwendet werden, beachten Sie das Schrift-Urheberrecht.

Beispiel:

1
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p>
2
<p style="font-family: Gabriola; ">hello CSS hello CSS</p>

Effekt:

Größe

Die Schriftgröße in CSS kann mit der Eigenschaft font-size festgelegt werden. Wird verwendet, um die Textschriftgröße festzulegen. Die Schriftgröße kann mit absoluten oder relativen Werten angegeben werden. Bei absoluten Werten ist die Schriftgröße fest und ändert sich nicht mit der Bildschirmauflösung. Absolute Einheiten umfassen: Pixel (px), Zoll (in), Zentimeter (cm), Millimeter (mm) usw. Bei relativen Werten ist die Schriftgröße relativ zur Schriftgröße des Elternelements. Relative Einheiten umfassen: em, rem, vw, vh usw. Durch Schlüsselwörter kann die Schriftgröße angegeben werden, was die Lesbarkeit und Konsistenz verbessert. Schlüsselwörter umfassen: xx-small, x-small, small, medium, large, x-large, xx-large.

Beispiel:

1
body {
2
  font-size: 16px;
3
}

Responsives Design:

• Die Schriftgröße sollte im responsiven Design relativ sein, um ein gutes Leseerlebnis auf verschiedenen Bildschirmgrößen und Geräten zu gewährleisten.

Barrierefreiheit:

• Stellen Sie sicher, dass die Schriftgröße groß genug ist, um Barrierefreiheitsstandards zu erfüllen. Es wird empfohlen, mindestens 16px für den Fließtext zu verwenden.

Schrifteinheitenwahl:

• Die Verwendung relativer Einheiten (em, rem, %) passt sich besser an die Schriftgrößeneinstellungen des Benutzers im Browser an und erhöht die Zugänglichkeit der Website.

Zeilenhöheneinstellung:

• Stellen Sie die Zeilenhöhe entsprechend der Schriftgröße ein, um die Lesbarkeit zu verbessern. Normalerweise kann die Zeilenhöhe auf das 1,4- bis 1,6-fache der Schriftgröße eingestellt werden.

Schriftstärke

Die Schriftstärke in CSS kann mit der Eigenschaft font-weight festgelegt werden.

• normal: Standard-Schriftstärke.
• bold: Fettdruck.
• bolder: Fetter als das Elternelement.
• lighter: Dünner als das Elternelement.
• Zahlenwerte: Schriftstärke als Zahlenwert, normalerweise von 100 bis 900.

Beispiel:

1
<div style="font-weight: normal;">Standard-Schriftstärke</div>
2

3
<div style="font-weight: bold;">
4
    Fettschrift
5
    <div style="font-weight: bolder;">Fetter als das Elternelement</div>
6
</div>
7

8
<div style="font-weight: 700;">
9
    Mit Zahlenwert fett
10
    <div style="font-weight: lighter;">Dünner als das Elternelement</div>
11
</div>

Effekt:

Stil

Der Schriftstil in CSS kann mit der Eigenschaft font-style festgelegt werden.

• normal: Standard-Schriftstil.
• italic: Kursiver Schriftstil, verwendet den speziell gestalteten Kursivschnitt der Schriftdatei.
• oblique: Schräger Schriftstil, ähnlich kursiv. Wenn die Schriftdatei keinen speziell gestalteten Kursivschnitt hat, erzwingt es eine Schrägstellung der normalen Schrift.

Beispiel:

1
<div style="font-style: normal;">Standard-Schriftstil 123 ABC</div>
2
<div style="font-style: italic;">Kursiver Stil 123 ABC</div>
3
<div style="font-style: oblique;">Schräger Stil 123 ABC</div>

Effekt:

Farbe

Die Schriftfarbe in CSS kann mit der Eigenschaft color festgelegt werden.

• Vordefinierte Farbnamen: z.B. red, green, blue usw.
• Hexadezimale Farbwerte: z.B. #FF0000, #00FF00, #0000FF usw.
• RGB-, RGBA-Farbwerte: z.B. rgb(255, 0, 0), rgba(0, 255, 0, 0.5) usw.
• HSL-, HSLA-Farbwerte: z.B. hsl(0, 100%, 50%), hsla(120, 100%, 50%, 0.7) usw.

Beispiel:

1
<div style="color: blue;">Schriftfarbe</div>
2
<div style="color: #ff6a00;">Schriftfarbe</div>
3
<div style="color: rgba(0, 128, 0);">Schriftfarbe</div>
4
<div style="color: rgba(0, 128, 0, 0.5);">Schriftfarbe</div>
5
<div style="color: hsla(0, 100%, 50%);">Schriftfarbe</div>
6
<div style="color: hsla(0, 100%, 50%, 0.7);">Schriftfarbe</div>
7
<div style="color: transparent;">Schriftfarbe</div>

Effekt:

Links

In CSS kann die Eigenschaft color verwendet werden, um die Schriftfarbe von Links (Hyperlinks) festzulegen.

Linkfarbe festlegen

• a - Globale Linkfarbe festlegen
• a:link - Normal, nicht besuchter Link
• a:visited - Vom Benutzer besuchter Link
• a:hover - Wenn der Benutzer die Maus über den Link bewegt
• a:active - Der Moment, in dem der Link geklickt wird

Beispiel:

1
/* Globaler Link */
2
a {
3
  color: #3498db; /* Blau */
4
}
5

6
/* Nicht besuchter Link */
7
a:link {
8
    color: #3498db; /* Blau */
9
}
10

11
/* Besuchter Link */
12
a:visited {
13
    color: #884dff; /* Lila */
14
}
15

16
/* Link bei Maus-Hover */
17
a:hover {
18
    color: #ff6600; /* Orange */
19
}
20

21
/* Link beim Klicken */
22
a:active {
23
    color: #ff0000; /* Rot */
24
}

Link-Unterstreichung festlegen

Beispiel:

1
a {
2
    text-decoration: none; /* Unterstreichung entfernen */
3
}
4

5
a:hover {
6
    text-decoration: underline; /* Unterstreichung bei Maus-Hover anzeigen */
7
}