HTML-Stileinstellungen

HTML-Styling ist ein wichtiger Bestandteil bei der Erstellung eines Webdesigns. Mit HTML-Stilen können verschiedene Aspekte wie Layout, Farbe, Schriftgröße und -stil angepasst sowie interaktive Spezialeffekte erzielt werden. In diesem Artikel werden die Grundkenntnisse des HTML-Stils vorgestellt, vom Schreiben von CSS-Stylesheets bis zum Anwenden von CSS-Stilen in HTML-Elementen, um den Lesern dabei zu helfen, ihre Webdesign-Ziele zu erreichen.

1. CSS-Stylesheet

CSS bezieht sich auf Cascading Style Sheets (Cascading Style Sheets), das die Verwirrung beseitigen soll, die durch die mangelnde Trennung von Präsentation und Inhalt entsteht in HTML-Dokumenten wurde eine Frage gestellt. CSS-Stylesheets können verwendet werden, um das Erscheinungsbild von HTML-Elementen zu steuern, indem Klassen-, ID- und Tag-Selektoren sowie andere Selektoren definiert werden, um Farbe, Hintergrund, Schriftgröße, Zeilenhöhe, Breite, Höhe und Ränder von HTML-Elementen zu ändern. Im Folgenden werden einige gängige CSS-Stylesheet-Operationen vorgestellt.

1. So erstellen Sie CSS-Dateien

Wir speichern die Stylesheet-Datei normalerweise als CSS-Datei und das Suffix der Datei ist .css . Hier sind die Schritte zum Erstellen einer Stylesheet-Datei:

• Erstellen Sie eine Textdatei, indem Sie Notepad oder eine andere Software öffnen, die die Textbearbeitung unterstützt.
• Fügen Sie den Code des Stylesheets in der ersten Zeile der Datei hinzu, d. h. das Tag „c9ccee2e6ea535a969eb3f532ad9fe89“ und das Tag „/style>“.
• Fügen Sie CSS-Stylesheet-Code zwischen Tags hinzu, bei denen es sich um Selektoren wie Klassen, IDs und Tags sowie andere CSS-Stilattribute handeln kann.
• In der CSS-Datei sollte zwischen jedem Selektor und seinem entsprechenden Stilattribut eine geschweifte Klammer stehen, um die Beziehung anzuzeigen.
• Nach Abschluss der Definition der CSS-Stile sollten wir die CSS-Datei als .css-Datei speichern und mit dem HTML-Dokument verknüpfen.

2. CSS-Stylesheet-Kommentare

Die Rolle von CSS-Stylesheet-Kommentaren besteht darin, Entwicklern das Erklären und Beschreiben bei der Codepflege zu erleichtern . CSS-Stylesheet-Kommentare beginnen mit / und enden mit /. Das folgende Beispiel:

/*Dies ist eine Kommentarzeile.
Dies ist die zweite Kommentarzeile.*/

3. Grundlegende CSS-Stylesheet-Operationen

CSS-Stylesheets werden basierend auf den Grundoperationen von Selektoren und Eigenschaften geschrieben, wie zum Beispiel:

• Selektoren: CSS-Stylesheets verwenden bestimmte Symbole um die zu ändernden Elemente auszuwählen, z. B. Klassenselektor („“.“) und ID-Selektor („#“) usw.
• Attribute: CSS-Stylesheets verwenden Attribute, um den Stil von HTML-Elementen zu definieren, wie z. B. die Attribute „Schriftgröße“, „Farbe“ und „Hintergrund“.

Der folgende Code demonstriert eine grundlegende Stilanpassung eines HTML-Elements, bei dem es sich um einen Titel handelt:

8b05045a5be5764f313ed5b9168a17e6
07e6e06e0dc95dc83bb70d14dca11cbe
93f0f5c25f18dab9d176bd4f6de5d30e

<title>CSS样式表调整标题样式的例子</title>
<style>
    h1 {
        color: red;
        font-size: 36px;
        background: yellow;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一级标题</h1>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Der obige Code ändert die Titeltextgröße auf 36 Pixel (Schriftgröße: 36px;), setzt die Hintergrundfarbe auf Gelb (Hintergrund: gelb;) und ändert den Text Farbe Auf Rot setzen (Farbe: rot;). Diese Eigenschaften können je nach Stil, Farbe, Schriftart usw. geändert oder entfernt werden.

2. Auf HTML-Elemente angewendetes CSS-Stylesheet

Jetzt haben wir eine einfache CSS-Stylesheet-Datei erstellt und Werte für CSS-Stileigenschaften definiert. Als nächstes müssen wir diese Stilattribute mit HTML-Elementen verknüpfen, um eine Stilkontrolle für HTML-Elemente zu erreichen.

1. Inline-Styling

Inline-Styling bezieht sich auf die Anwendung von Stilattributen auf das „style“-Attribut innerhalb des HTML-Elements. Diese Methode schreibt hauptsächlich CSS-Stile Code direkt im HTML-Dokument. Diese Methode ist nützlich, um den Stil von HTML-Elementen schnell anzupassen. Der folgende Code ist ein Beispiel für einen Inline-Stil:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内嵌样式CSS设置</title>

9c3bca370b5104690d9ef395f2c5f8d1
75b561857b53372bf8fa3e38343e4252

<h1 style="color: MediumBlue; font-size: 50px;">大标题</h1>
<p style="color: Black; font-size: 30px;">小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e#🎜🎜 #

Im obigen Code setzen wir die Hintergrundfarbe auf Hellgrau (Hintergrundfarbe: LightGray;), die große Titelfarbe auf Dunkelblau (Farbe: MediumBlue;) und die Titelschriftgröße auf 50 Pixel ( Schriftgröße: 50px;) und stellen Sie die Untertitelfarbe auf Schwarz (Farbe: Schwarz;) und die Titelschriftgröße auf 30 Pixel ein (Schriftgröße: 30px;).

Internes Styling

Die interne Stylesheet-Methode besteht darin, den Stylesheet-Code im „head“-Tag des HTML-Dokuments „style“ zu platzieren "-Tag, um den von allen HTML-Dokumenten verwendeten Stil zu ändern. Diese Methode ist flexibler als Inline-Stile und behält die Trennung von HTML-Dateien und Stylesheets bei. Der folgende Code ist ein Beispiel für ein internes Stylesheet: 9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<title>内部样式表CSS设置</title>
<style>
    body {
        background-color: LightGray;
    }
    h1 {
        color: MediumBlue;
        font-size: 50px;
    }
    p {
        color: black;
        font-size: 30px;
    }
</style>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e#🎜 🎜#

在上述代码中，我们将背景颜色设置为浅灰（body {background-color: LightGray;}），将大标题颜色设置为深蓝（h1 {color: MediumBlue;font-size: 50px;}），将标题字体大小设置为50像素（h1 {color: MediumBlue;font-size: 50px;}），并将小标题颜色设置为黑色（p {color: black;font-size: 30px;}），将标题字体大小设置为30像素（p {color: black;font-size: 30px;}）。

3. 外部样式表（external styling）

外部样式表是指在HTML文件中以CSS文件的形式链接到HTML文档的样式表，这种方式最好适用于大型网站或多个页面，对于一些共享设计风格的网站更为便捷。下面是示例代码：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表CSS设置</title>
<link rel="stylesheet" type="text/css" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们通过c29ea0143d4a2d5dc6725f7851494a02属性将外部样式表链接到HTML文档，这包含了全部HTML文档所用到的样式定义。样式表文件的代码如下：

body {

background-color: LightGray;

}
h1 {

color: MediumBlue;
font-size: 50px;

}
p {

color: black;
font-size: 30px;

}

以上就是HTML样式设置的基础知识，包括创建和使用CSS样式表的不同方法。通过这些基本操作，我们可以对网页的排版、字体、颜色和特效等方面进行控制，创造出各种个性化的网页设计。

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