Wie schreibe ich externes CSS?

Mit der kontinuierlichen Weiterentwicklung der Webdesign- und Entwicklungstechnologie ist CSS (Cascading Style Sheets) zu einer wichtigen Webdesign-Sprache geworden. Durch CSS können wir den Stil von Webseiten leicht steuern, um ein besseres Webdesign zu erzielen. In der tatsächlichen Entwicklung legen wir CSS-Dateien normalerweise extern ab. Lassen Sie uns also besprechen, wie man externes CSS schreibt.

1. Erstellen Sie eine CSS-Datei

Zuerst müssen wir einen CSS-Ordner im Stammverzeichnis der Website erstellen und darin eine CSS-Datei erstellen. Es wird empfohlen, für Dateinamen aussagekräftige Namen zu verwenden, um die Verwaltung durch Sie selbst und andere zu erleichtern.

2. CSS-Dateien verbinden

In HTML-Dateien müssen wir CSS-Stile referenzieren, indem wir CSS-Dateien verbinden. Wir können eine externe Verlinkung (Link) oder einen Inline-Stil (Style) verwenden.

1. Externe Verknüpfungsmethode

<link rel="stylesheet" href="样式文件路径">

Unter diesen bezieht sich das rel-Attribut auf die Beziehung zwischen dem Stylesheet und dem Dokument. Normalerweise wird „Stylesheet“ verwendet, um das Stylesheet darzustellen Blatt. Der Stildateipfad ist relativ zur HTML-Datei und kann ein absoluter oder ein relativer Pfad sein.

Zum Beispiel:

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

2. Inline-Stilmethode

<style type="text/css">
    样式内容
</style>

Unter diesen bezieht sich das Typattribut auf den Typ der Stildatei, normalerweise „Text/CSS“. Der Stilinhalt ist ein Teil des CSS-Codes.

Zum Beispiel:

<style type="text/css">
    body {
        background-color: gray;
    }
</style>

3. CSS-Stile schreiben

Die Art und Weise, CSS-Stile in CSS-Dateien zu schreiben, ähnelt der Art und Weise, wie man Style-Tags verwendet, um CSS-Stile in HTML-Dateien zu schreiben. Wir können den CSS-Selektor verwenden, um den Teil auszuwählen, der geändert werden muss, und dann CSS-Eigenschaften und Attributwerte verwenden, um den Stil festzulegen.

Zum Beispiel:

body {
    background-color: gray;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

Im obigen Code wählen wir das Hauptelement der gesamten Seite aus und legen dessen Hintergrundfarbe, Schriftgröße und Schriftstil fest.

4. Vorteile

Die Verwendung externer CSS-Dateien kann folgende Vorteile bringen:

1. Getrennte Struktur und Stil. Durch das Einfügen von Stilregeln in eine separate Datei können sich Programmierer auf die Strukturierung des Codes und Formatierungsstile konzentrieren.
2. Differenzierte Darstellung. Verschiedene Websites/Seiten können eine Art Stildatei gemeinsam nutzen, sodass die Website ein einheitliches Erscheinungsbild behält.
3. Reduzieren Sie Doppelarbeit. Wenn mehrere Seiten denselben Stil haben, müssen wir ihn nur einmal in einer CSS-Datei definieren.
4. Verbessern Sie die Wiederverwendbarkeit von Dateien. CSS-Dateien können von mehreren Webseiten gemeinsam genutzt werden, wodurch die Wiederverwendbarkeit von CSS-Dateien verbessert wird.

5. Zusammenfassung

Das Obige ist die Schreibmethode und die Vorteile von externem CSS. Natürlich müssen wir bei der tatsächlichen Entwicklung auf die Schreibweise des Dateipfads und des Dateinamens achten, um Fehler wie 404 zu vermeiden. Darüber hinaus müssen wir uns auch an die Eigenschaften des adaptiven Layouts anpassen, um CSS-Stile zu schreiben. Durch kontinuierliches Üben und Lernen können wir die Codequalität kontinuierlich verbessern, die Benutzererfahrung optimieren und ein besseres Webdesign erzielen.

Das obige ist der detaillierte Inhalt vonWie schreibe ich externes CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!