Wie schreibe ich CSS in eine HTML-Seite?-Front-End-Fragen und Antworten-php.cn

CSS (Cascading Style Sheets) ist eine Technologie zum Entwerfen und Verschönern von HTML-Seiten. CSS-Stile können über das -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 -Tag verwendet wird, um den CSS-Code zu umschließen. Zum Beispiel: 内嵌式CSS样式表 body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; text-align: center; } 欢迎来到我的网站 这是一段普通的文字

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

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

Externer Stil Externes Stylesheet bedeutet, dass wir den CSS-Stil in einer separaten Datei ablegen und ihn dann über das 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; } Nach dem Login kopieren Auf der HTML-Seite müssen wir das Tag verwenden, um die externe CSS-Datei mit dem HTML-Dokument zu verknüpfen. Zum Beispiel:

外部式CSS样式表 欢迎来到我的网站 这是一段普通的文字

Nach dem Login kopieren Im obigen Code verwenden wir das Tag , 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: 行内式CSS样式表 欢迎来到我的网站 这是一段普通的文字

Nach dem Login kopieren 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.