So verwenden Sie CSS in HTML

HTML und CSS sind die beiden Kerntechnologien des modernen Webdesigns. HTML wird zum Erstellen des Inhalts von Webseiten verwendet, während CSS für Stil und Layout verwendet wird. In diesem Artikel erfahren Sie, wie Sie CSS auf HTML-Seiten anwenden, damit Sie Ihrer Website eine schöne und personalisierte Note verleihen können.

1. Einführung von CSS-Dateien

Der erste Schritt bei der Verwendung von CSS in HTML-Seiten besteht darin, CSS-Dateien in Ihre HTML-Dateien einzuführen. Dies kann durch Hinzufügen eines Link-Elements zum HTML-Header erreicht werden. Dieses Element muss auf den Speicherort Ihrer CSS-Datei verweisen, etwa so:

<link rel="stylesheet" type="text/css" href="style.css">

2. CSS auf HTML-Elemente anwenden

Sobald Ihre CSS-Datei ordnungsgemäß in Ihre HTML-Seite eingeführt wurde, können Sie mit der Anwendung der CSS-Stile beginnen, auf die sie angewendet werden Ihre HTML-Elemente. Sie können verschiedene Selektoren verwenden, um Elemente auszuwählen und dann Stilattribute auf sie anzuwenden, wie zum Beispiel:

h1 {
  color: red;
  text-align: center;
  font-size: 36px;
}

Dieser CSS-Stilselektor gilt für alle h1-Elemente auf der Seite. Es ändert die Textfarbe des Elements in Rot, zentriert den Text und ändert die Schriftgröße des Elements.

3. Verschachtelte Stile

Sie können jedem Element Stile hinzufügen, indem Sie die Stildeklaration eines Elements in der Stildeklaration eines anderen Elements verschachteln. Sie können beispielsweise den gesamten hervorgehobenen Text in einem Absatz kursiv schreiben und seine Farbe in Blau ändern:

p em {
  font-style: italic;
  color: blue;
}

Jetzt wird der gesamte Text innerhalb eines e388a4556c0f65e1904146cc1a846bee标签中的907fae80ddef53131f3292ee4f81644b-Tags kursiv und blau angezeigt.

4. Kategorieselektor

Ein Kategorieselektor ist ein Selektor, mit dem mehrere Elemente desselben Typs gestaltet werden können. Mit einem CSS-Stilselektor mit Klassennamen können Sie denselben Stil auf alle Elemente in einer Kategorie anwenden. Hier ist ein Beispiel für einen Kategorieselektor:

.blue-text {
  color: blue;
}

Dieser Stilselektor definiert eine Klasse namens „blue-text“. Um diese Art von Stil anzuwenden, müssen Sie diese Klasse nur dem erforderlichen Element zuweisen:

<p class="blue-text">这段文字会变成蓝色的。</p>

Hinweis: Mithilfe des Klassenattributs können Sie auf derselben Seite mehrere verschiedene Klassen festlegen und diese bei Bedarf hinzufügen. Sie werden unterschiedlichem HTML zugewiesen Elemente. Sie können sogar mehrere Klassen miteinander kombinieren, um komplexere Stile festzulegen. Stellen Sie daher sicher, dass Sie sie gut verwenden.

5. Andere Selektoren

CSS verfügt über viele andere Selektoren, einschließlich ID-Selektoren, Nachkommenselektoren, untergeordnete Selektoren, Pseudoklassenselektoren usw. Diese Selektoren sind nützlich, wenn Sie ein bestimmtes Element formatieren müssen. Im Folgenden finden Sie eine Einführung in andere Selektoren:

• ID-Selektor: Durch die Definition einer ID können Sie ein bestimmtes Element auf der Seite formatieren.
• Nachkommenselektor: Wird zum Auswählen von Nachkommenelementen des angegebenen Elements verwendet.
• Untergeordneter Selektor: Ähnlich dem Nachkommenselektor, wählt jedoch nur direkte untergeordnete Elemente aus.
• Pseudoklassenselektor: Wird zum Auswählen von Elementen in einem bestimmten Zustand verwendet, z. B. Schweben, Zugriff oder ausgewählte Zustände.

6. CSS-Box-Modell

Das CSS-Box-Modell ist ein Grundkonzept für die Gestaltung und Positionierung von Webseitenelementen. Dieses Modell beschreibt den Rahmen um ein HTML-Element, der verschiedene Teile wie Inhaltsbereich, Innenabstand, Rahmen und Ränder umfasst.

Sie können das Layout Ihrer HTML-Elemente präzise steuern, indem Sie die Größe und Position jedes Felds festlegen. Im Folgenden sind einige häufig verwendete Eigenschaften im CSS-Boxmodell aufgeführt:

• box-sizing: Legen Sie das Boxmodell des Elements fest.
• width: Legt die Breite des Elements fest.
• height: Legen Sie die Höhe des Elements fest.
• margin: Legen Sie den Rand des Elements fest.
• padding: Legen Sie die Polsterung des Elements fest.
• Rand: Legen Sie den Rand des Elements fest.

Mit diesen Eigenschaften können Sie verschiedene Elemente auf Ihrer Webseite positionieren und anpassen, um den gewünschten Stil und das gewünschte Layout zu erreichen.

Zusammenfassung

In diesem Artikel haben wir behandelt, wie man HTML-Elemente mit CSS formatiert. Sie können CSS verwenden, indem Sie eine CSS-Datei erstellen und diese mit einer HTML-Seite verknüpfen. Anschließend können Sie mithilfe von Selektoren unterschiedliche Stile auf jedes Element anwenden. Sie können das CSS-Box-Modell auch verwenden, um Elemente auf der Seite anzuordnen und zu steuern. Wenn Sie diese Fähigkeiten beherrschen, können Sie Webseiten erstellen, auf die Sie mit einem schönen und personalisierten Website-Design stolz sein können.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!