CSS-Text ändern

CSS (Cascading Style Sheet) ist eine Sprache, die für das Webdesign verwendet wird. Sie umfasst viele Funktionen, einschließlich der Verschönerung der Seite durch Ändern der Textattribute. In diesem Artikel werden einige gängige CSS-Texteigenschaften und deren Implementierung in Webseiten vorgestellt.

1. Schriftattribute

Schriftattribute können verwendet werden, um Schriftart, Größe, Farbe, Stil und Abstand von Text zu steuern. Zu den spezifischen Attributen gehören:

1. font-family: Wird zum Festlegen des Namens der Schriftart oder einer Liste von Schriftartfamiliennamen verwendet, die durch Kommas getrennt werden. Der Browser sucht in der Reihenfolge der Liste nach der Schriftart.
2. Schriftgröße: Wird zum Festlegen der Schriftgröße verwendet, die in Pixel (px), Prozentsatz (%), EM, rem und anderen Einheiten angegeben werden kann.
3. Schriftstärke: Wird zum Festlegen der Schriftstärke verwendet, die mithilfe von Zahlen, Schlüsselwörtern „Fett“ und „Fett“ usw. angegeben werden kann.
4. font-style: Wird verwendet, um festzulegen, ob die Schriftart fett oder kursiv ist. Zur Angabe können Sie die Schlüsselwörter italic und oblique verwenden.
5. Zeilenhöhe: Wird zum Festlegen des Zeilenabstands verwendet. Sie können Einheiten wie Pixel oder Prozentsätze verwenden.
6. text-align: wird verwendet, um die horizontale Ausrichtung von Text festzulegen, einschließlich links, zentriert, rechts, Blocksatz usw.

2. Textattribute

Textattribute können zur Steuerung von Textdekoration, Einrückung, Zeilenumbruch usw. verwendet werden. Zu den spezifischen Attributen gehören:

1. Textdekoration: Wird zum Festlegen der Unterstreichungs-, Durchstreichungs- und Textdekorationszeilen des Textes verwendet. Kann mit den Schlüsselwörtern underline, overline, line-through und none angegeben werden.
2. Texteinzug: Wird zum Festlegen des Texteinzugs verwendet. Sie können Einheiten wie Pixel oder Prozentsätze verwenden.
3. Texttransformation: Wird verwendet, um die Methode zur Groß-/Kleinschreibung von Text festzulegen, einschließlich Groß- und Kleinschreibung, Großschreibung usw.
4. Leerraum: Wird zum Festlegen der Textverarbeitungsmethode verwendet, einschließlich Normal, Nowrap, Pre-Wrap usw.

3. Farbattribut

Das Farbattribut wird verwendet, um die Farbe von Text und Hintergrund zu steuern. Farben können mithilfe von CSS-Farbnamen oder Hexadezimalwerten angegeben werden. Darunter: Das Attribut

1. color wird zum Festlegen der Textfarbe verwendet.
2. Mit der Eigenschaft „Hintergrundfarbe“ wird die Farbe des Hintergrunds festgelegt.

4. Selektor

Neben Schriftart-, Text- und Farbattributen sind Selektoren auch ein wichtiger Inhalt in CSS. Mit Selektoren werden die HTML-Elemente angegeben, die geändert werden müssen. Zum Beispiel:

1. Tag-Selektor: Wird zum Auswählen bestimmter Arten von HTML-Elementen verwendet. Beispielsweise ändert p alle Absatzelemente.
2. Klassenselektor: Wird zum Auswählen von HTML-Elementen mit demselben Klassennamen verwendet. Beispielsweise ändert .h1 alle Elemente, die die Klasse h1 verwenden.
3. ID-Selektor: Wird zum Auswählen von HTML-Elementen mit derselben Kennung verwendet. Beispielsweise wählt #header das Element auf der Seite mit der ID „header“ aus.
4. Wildcard-Selektor: Wird zum Auswählen aller HTML-Elemente verwendet. Mit * werden beispielsweise alle Elemente auf der Webseite ausgewählt.

5. Beispielhafte Vorgehensweise

Hier zeigen wir, wie man CSS zum Ändern von Textattributen und Farbattributen verwendet. Wir erstellen eine einfache Webseite und ändern die Text- und Farbeigenschaften einiger ihrer Elemente.

1. Fügen Sie zunächst den folgenden Code in das HTML-Dokument ein:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>CSS改变文字</title>
<link rel="stylesheet" type="text/css" href="styles.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1 class="title">这是标题</h1>
<p class="text">这是一段正文，包含有一些链接：<a href="#">链接1</a>和<a href="#">链接2</a></p>
<ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

< ; /body>
73a6ac4ed44ffec12cee46588e518a5e

2. Erstellen Sie eine Stylesheet-Datei „styles.css“ im selben Ordner und fügen Sie die folgenden Stile hinzu:

.title {

font-family: Arial, sans-serif;
font-size: 36px;
font-weight: bold;
text-align: center;
color: navy;

}

.text {

font-family: "Times New Roman", Times, serif;
font-size: 18px;
line-height: 1.5em;
text-indent: 25px;
color: #333;

}

.list {

font-family: Verdana, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: maroon;

}

3. Öffnen Sie den Browser und zeigen Sie eine Vorschau der HTML-Datei an. Sie können sehen, dass die Text- und Farbattribute geändert wurden.

Ändern Sie Text- und Farbattribute über CSS, damit die Seite schöner und persönlicher aussieht. Ob es um Schriftarten, Textformatierungen oder Farbeigenschaften geht, CSS bietet eine Vielzahl von Auswahlmöglichkeiten und Flexibilität. Wenn Sie mit dem Schreiben Ihrer Webseiten beginnen, versuchen Sie, verschiedene Selektoren und Attribute zu verwenden, um Ihre Website hervorzuheben.

Das obige ist der detaillierte Inhalt vonCSS-Text ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!