Heim > Artikel > Web-Frontend > So legen Sie CSS-Stile in HTML-Dateien fest

So legen Sie CSS-Stile in HTML-Dateien fest

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

HTML ist eine Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird, während CSS (Cascading Style Sheets) eine Sprache ist, die zur Beschreibung des Erscheinungsbilds und Stils von Webseiten verwendet wird. Durch die gemeinsame Verwendung von HTML und CSS können wir attraktive und professionell aussehende Websites erstellen. In diesem Artikel erfahren Sie, wie Sie CSS-Stile in HTML-Dateien festlegen.

Eingebettetes Stylesheet

Im Head-Tag eines HTML-Dokuments können wir das Style-Tag verwenden, um CSS-Stile zu definieren. Dies wird als eingebettetes Stylesheet bezeichnet, da CSS-Stile in das HTML-Dokument eingebettet sind. Hier ist ein einfaches Beispiel:

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <style>
        body {
            background-color: #ccc;
            color: #000;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #00f;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一篇博客文章。</p>
</body>
</html>

Im obigen Beispiel haben wir ein eingebettetes Stylesheet verwendet, um die CSS-Stile für die Elemente body und h1 zu definieren. Da wir diese Stile auf das gesamte HTML-Dokument anwenden möchten, platzieren wir sie im Head-Tag. Wie wir sehen, ist die Syntax von CSS-Stilen sehr einfach. Wir geben einfach den Eigenschaftsnamen an, den wir ändern möchten, gefolgt von einem Doppelpunkt und dann dem Eigenschaftswert.

Externe Stylesheets

Eingebettete Stylesheets sind sehr nützlich, funktionieren aber nur für ein einzelnes HTML-Dokument. Wenn wir mehrere HTML-Dokumente haben und CSS-Stile zwischen ihnen teilen möchten, können wir externe Stylesheets verwenden. Ein externes Stylesheet ist eine separate CSS-Datei, die alle CSS-Stildefinitionen enthält. Wir können es in HTML über das Link-Tag verlinken, wie unten gezeigt:

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一篇博客文章。</p>
</body>
</html>

Im obigen Beispiel verwenden wir das Link-Tag, um die Datei style.css mit dem HTML-Dokument zu verknüpfen. Die CSS-Datei sollte denselben CSS-Code enthalten wie die Eigenschaften des eingebetteten Stylesheets.

Klassenselektor und ID-Selektor

CSS kann auch den Stil von HTML-Elementen über den Klassenselektor und den ID-Selektor auswählen und ändern. Klassenselektoren beginnen mit einem Punkt (.) und werden zur Auswahl von Elementen mit bestimmten CSS-Klassen verwendet. Für Elemente können mehrere Klassen definiert werden. Der ID-Selektor beginnt mit einem Nummernzeichen (#) und dient zur Auswahl von Elementen mit einer bestimmten ID. Jedes Element kann nur eine ID haben. Hier ist ein einfaches Beispiel:

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <style>
        .title {
            color: #f00;
            font-size: 32px;
        }
        #intro {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 class="title">欢迎来到我的网站</h1>
    <p id="intro">这是我的第一篇博客文章。</p>
</body>
</html>

Im obigen Beispiel haben wir den Stil des h1-Elements mithilfe des Klassenselektors (.title) und den Stil des p-Elements mithilfe des ID-Selektors (#intro) definiert. Beachten Sie, dass der Name des Selektors mit dem Klassen- oder ID-Attribut im entsprechenden HTML-Element-Tag identisch sein muss.

Andere CSS-Selektoren

CSS verfügt über viele andere Selektoren, die uns helfen können, den Stil von HTML-Elementen genauer auszuwählen und zu ändern. Hier sind einige häufig verwendete Selektoren:

Nachkommenselektor: Wird zum Auswählen von Elementen innerhalb untergeordneter Elemente verwendet. Beispielsweise wählt div p alle p-Elemente aus, die in div-Elementen verschachtelt sind.
Angrenzender Geschwisterselektor: Wird zum Auswählen benachbarter Geschwisterelemente verwendet. Beispielsweise wählt p + span das erste Span-Element nach p aus.
Pseudo-Klassenselektor: Wird verwendet, um Elemente in einem bestimmten Zustand abzugleichen, zum Beispiel: Hover wählt den Zustand aus, wenn die Maus über dem Element schwebt.

In CSS können Selektoren kombiniert werden, um Elemente präziser auszuwählen. Beispielsweise können wir den Klassenselektor und den Nachkommenselektor verwenden, um alle p-Elemente innerhalb eines div-Elements auszuwählen:

div p {
    color: #000;
    font-size: 16px;
}

Im obigen Beispiel haben wir die div- und p-Selektoren verwendet, um alle p-Elemente auszuwählen, die in einem div-Element verschachtelt sind.

Zusammenfassung

Mit grundlegenden CSS-Stileinstellungen können wir das Erscheinungsbild und den Stil der Website in einem HTML-Dokument definieren. Eingebettete und externe Stylesheets, Klassenselektoren und ID-Selektoren sowie andere CSS-Selektoren machen das Seitendesign flexibler und personalisierter. Wir können sie nutzen, um attraktive und professionell aussehende Websites zu erstellen.

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

css html class 选择器样式表伪类

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：Wird CSS nach und nach weggelassen und durch andere Technologien ersetzt?Nächster Artikel：Wird CSS nach und nach weggelassen und durch andere Technologien ersetzt?

In Verbindung stehende Artikel

Mehr sehen