Heim > Artikel > Web-Frontend > Wie schreibe ich CSS in eine HTML-Seite?

Wie schreibe ich CSS in eine HTML-Seite?

王林Original: 2023-05-09 10:59:372507Durchsuche

CSS (Cascading Style Sheets) ist eine Technologie zum Entwerfen und Verschönern von HTML-Seiten. CSS-Stile können über das c9ccee2e6ea535a969eb3f532ad9fe89-Tag in einem HTML-Dokument oder aus einer externen CSS-Datei erstellt und referenziert werden.

Im Folgenden finden Sie eine detaillierte Einführung zum Schreiben von CSS-Stilen in HTML-Seiten:

Inline
Inline bezieht sich auf das direkte Einbetten von CSS-Stilen in HTML-Seiten, wobei das c9ccee2e6ea535a969eb3f532ad9fe89-Tag verwendet wird, um den CSS-Code zu umschließen. Zum Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内嵌式CSS样式表</title>
        <style>
            body {
                background-color: #f0f0f0;
                font-family: Arial, sans-serif;
            }
            h1 {
                color: #333;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一段普通的文字</p>
    </body>
</html>

Im obigen Beispiel verwenden wir zuerst das e8e496c15ba93d81f6ea4fe5f55a2244-Tag, um den Zeichensatz des Dokuments festzulegen, und verwenden dann das c9ccee2e6ea535a969eb3f532ad9fe89-Tag, um das CSS zu schreiben Stil. Innerhalb des c9ccee2e6ea535a969eb3f532ad9fe89-Tags legen wir die Hintergrundfarbe, den Schriftstil und die Titeltextfarbe des Dokuments fest.

Beachten Sie, dass das c9ccee2e6ea535a969eb3f532ad9fe89-Tag und alle CSS-Stile innerhalb des c9ccee2e6ea535a969eb3f532ad9fe89-Tags platziert werden müssen. Die Verwendung von CSS-Stilen direkt im 6c04bd5ca3fcae76e30b72ad730ca86d-Tag ist ungültig.

Externer Stil
Externes Stylesheet bedeutet, dass wir den CSS-Stil in einer separaten Datei ablegen und ihn dann über das 2cdf5bf648cf2f33323966d7f58a7f3f in der HTML-Seite referenzieren. Externe Stylesheets bieten den Vorteil einer vielfältigen Verwendung und einfachen Wartung.

In diesem Fall müssen wir eine Datei mit der Erweiterung .css verwenden, um CSS-Stile zu speichern. Die Datei kann auf dem Server oder auf dem lokalen Computer abgelegt werden. Zum Beispiel:

/* css/style.css */

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

Auf der HTML-Seite müssen wir das Tag 2cdf5bf648cf2f33323966d7f58a7f3f verwenden, um die externe CSS-Datei mit dem HTML-Dokument zu verknüpfen. Zum Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部式CSS样式表</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一段普通的文字</p>
    </body>
</html>

Im obigen Code verwenden wir das Tag 2cdf5bf648cf2f33323966d7f58a7f3f, um die Datei style.css mit dem HTML-Dokument zu verknüpfen. Beachten Sie, dass das href-Attribut auf die URL oder den relativen Pfad der CSS-Datei verweisen muss. Befindet sich die CSS-Datei im selben Verzeichnis wie das HTML-Dokument, kann das href-Attribut direkt auf den CSS-Dateinamen verweisen.

Inline-Stil
Inline-Stil bezieht sich auf die direkte Anwendung von CSS-Stilen auf HTML-Elemente. anstatt sie im Stylesheet zu definieren. Zum Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行内式CSS样式表</title>
    </head>
    <body>
        <h1 style="color: #333; text-align: center;">欢迎来到我的网站</h1>
        <p style="font-family: Arial, sans-serif;">这是一段普通的文字</p>
    </body>
</html>

Inline definieren wir CSS-Stile im style-Attribut des HTML-Elements. Jedes Attribut muss durch ein Semikolon getrennt werden und der Attributwert muss in Anführungszeichen gesetzt werden. Bitte beachten Sie, dass die Verwendung von Inline Ihren HTML-Code unübersichtlich machen und die Wartung erschweren kann. Daher wird die Inline-Nutzung in realen Projekten grundsätzlich nicht empfohlen.

Zusammenfassung
Wenn Sie CSS-Stile in HTML-Seiten schreiben, können Sie dazu Inline-, externe und Inline-Methoden verwenden. Unter diesen ist der externe Stil die am häufigsten verwendete Methode, mit der Stile zur einfachen Wartung und Mehrfachverwendung in einer Datei konzentriert werden können. Bei Inline- und Inline-Formaten wird empfohlen, diese nur bei Bedarf zu verwenden, da es sonst zu unübersichtlichem und schwer zu pflegendem HTML-Code kommen kann.

Das obige ist der detaillierte Inhalt vonWie schreibe ich CSS in eine HTML-Seite?. 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：dh CSS kann nicht geladen werdenNächster Artikel：dh CSS kann nicht geladen werden

In Verbindung stehende Artikel

Mehr sehen