Heim > Artikel > Web-Frontend > So verwenden Sie CSS zum Festlegen von HTML

So verwenden Sie CSS zum Festlegen von HTML

PHPzOriginal: 2023-04-26 16:00:531087Durchsuche

HTML ist die Grundstruktur von Webseiten, während CSS Unterstützung für den Stil von Webseiten bietet. Durch CSS-Einstellungen können wir Webseiten verschönern und anpassen. Daher ist es für Webentwickler ein sehr wichtiger Schritt, sich mit der Einstellungsmethode von CSS vertraut zu machen. In diesem Artikel erfahren Sie, wie Sie CSS zum Festlegen von HTML verwenden.

1. Grundlagen des CSS-Stils

Bevor Sie CSS zum Festlegen von HTML-Stilen verwenden, müssen Sie einige grundlegende Konzepte verstehen:

CSS-Stilauswahl

CSS-Stilauswahl bezieht sich auf das CSS, das zur Auswahl bestimmter HTML-Tags verwendet wird Code. Zu den gängigen CSS-Stilselektoren gehören Tag-Selektoren, Klassen-Selektoren, ID-Selektoren, Attribut-Selektoren usw.

CSS-Eigenschaften und Eigenschaftswerte

CSS-Eigenschaften beziehen sich auf die festzulegenden Stileigenschaften. Der CSS-Attributwert ist der spezifische Wert des Attributs.

Um beispielsweise die Farbe von HTML-Text festzulegen, können wir das Attribut „Farbe“ verwenden, um ihn festzulegen. Der Attributwert ist der spezifische Farbcode, z. B.: „Farbe: #ff0000;“ bedeutet das Festlegen der Textfarbe zu rot.

CSS-Stilpriorität

Wenn dasselbe HTML-Tag über mehrere CSS-Stilcodes verfügt, die es festlegen, entsteht ein Problem mit der CSS-Stilpriorität.

In CSS kann die Priorität in vier Ebenen unterteilt werden. Die Priorität von hoch nach niedrig ist: ID-Selektor, Klassenselektor, Label-Selektor und Universal-Selektor. Das heißt, der vom ID-Selektor festgelegte Stil hat die höchste Priorität und der vom universellen Selektor festgelegte Stil hat die niedrigste Priorität.

Wenn mehrere Beschriftungsstile derselben Ebene vorhanden sind, wird die Priorität anhand der Position des CSS-Stilcodes bestimmt.

2. So legen Sie HTML mit dem CSS-Stil fest

HTML-Tag-Stil festlegen

Eine der einfachsten Möglichkeiten, den HTML-Stil festzulegen, besteht darin, CSS-Stilattribute direkt zu HTML-Tags hinzuzufügen. Fügen Sie beispielsweise dem h1-Tag einen Stil hinzu:

<h1 style="color: #ff0000; font-size:28px;">Hello World!</h1>

Diese Methode ist einfach, aber nicht flexibel genug. Der Code kann auch zu ausführlich werden, wenn mehrere Tags gestaltet werden müssen.

Interne Stylesheets verwenden

Interne Stylesheets beziehen sich auf das Schreiben von CSS-Stilcode in das Tag <style> am Kopf der HTML-Datei und das Festlegen des Stils des HTML-Tags durch der Tag-Selektor. Zum Beispiel: <style>标签中，通过标签选择器设置HTML标签的样式。例如：

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS Example</title>
        <style>
            h1{
                color: #ff0000;
                font-size: 28px;
            }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

使用外部样式表

外部样式表是指将CSS样式代码写在一个独立的CSS文件中，再通过HTML标签的<link>标签引用它。这种方法能够使网页代码更为清晰简洁，且不易重复。例如：

在index.html文件中引用style.css样式文件：

<!DOCTYPE html>
<html>
    <head>
        <title>External CSS Example</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

在style.css文件中设置样式：

h1{
    color: #ff0000;
    font-size: 28px;
}

使用类选择器

类选择器是指通过在HTML标签中添加class属性来给指定的HTML标签设置CSS样式。例如：

<!DOCTYPE html>
<html>
    <head>
        <title>Class Selector Example</title>
        <style>
            .red-text{
                color: #ff0000;
            }
        </style>
    </head>
    <body>
        <h1 class="red-text">Hello World!</h1>
        <p class="red-text">This is a test paragraph.</p>
    </body>
</html>

使用ID选择器

ID选择器是指通过在HTML标签中添加id属性来给指定的HTML标签设置CSS样式。

<!DOCTYPE html>
<html>
    <head>
        <title>ID Selector Example</title>
        <style>
            #my-heading{
                color: #ff0000;
            }
        </style>
    </head>
    <body>
        <h1 id="my-heading">Hello World!</h1>
    </body>
</html>

使用属性选择器

属性选择器是指通过指定HTML标签中具有的属性来选择并设置CSS样式。例如：

<!DOCTYPE html>
<html>
    <head>
        <title>Attribute Selector Example</title>
        <style>
            a[href^="https"]{
                color: blue;
            }
        </style>
    </head>
    <body>
        <p>Visit my website at <a href="https://example.com">example.com</a>.</p>
        <p>Visit my blog at <a href="http://blog.example.com">blog.example.com</a>.</p>
    </body>
</html>

上述代码中，a[href^="https"]选择所有href属性值以"https"开始的<a>标签，将它们的字体颜色设置为蓝色。

伪类和伪元素选择器

伪类选择器是指在指定的HTML标签状态下，为其设置CSS样式。例如，:hover可为鼠标悬停在指定的标签上时增加样式设置。

伪元素选择器是指为HTML标签中的一部分内容（如段落的第一行）设置CSS样式。

<!DOCTYPE html>
<html>
    <head>
        <title>Pseudo-class and Pseudo-element Selector Example</title>
        <style>
            a:hover{
                color: blue;
            }
            p::first-line{
                font-size: 24px;
            }
        </style>
    </head>
    <body>
        <p>This is the first line.
        This is the second line.
        This is the third line.</p>
        <a href="#">This is a link.</a>
    </body>
</html>

上述代码中，:hover选择当鼠标悬停在<a>标签上时，为其设置蓝色字体。::first-linerrreee

Verwendung eines externen Stylesheets

Ein externes Stylesheet bedeutet, den CSS-Stylecode in eine separate CSS-Datei zu schreiben und dann über das Tag <link> darauf zu verweisen HTML-Tag. Diese Methode kann den Webseitencode klarer und prägnanter machen und die Wahrscheinlichkeit verringern, dass er wiederholt wird. Zum Beispiel: 🎜🎜Verweisen Sie auf die Stildatei style.css in der Datei index.html: 🎜rrreee🎜Legen Sie den Stil im style.cssfest > Datei: 🎜rrreee

a[href^="https"]

<a>

:hover

<a>

::first-line

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Lassen Sie uns untersuchen, warum der Vue-Eingang main.js istNächster Artikel：Lassen Sie uns untersuchen, warum der Vue-Eingang main.js ist

In Verbindung stehende Artikel

Mehr sehen