Der CSS-Stil (Cascading Style Sheets) ist eine wesentliche Technologie für die Front-End-Entwicklung. Es kann das Layout, die Schriftarten, die Farben und andere Stile von Webseiten steuern, um eine Vereinheitlichung der Webseitenstile zu erreichen. Dieser Artikel konzentriert sich auf das Schreiben von CSS-Stilen, um den Lesern zu helfen, CSS besser zu verstehen und anzuwenden.

1. Eingebettetes Stylesheet
Eingebettetes Stylesheet ist eine Möglichkeit, CSS-Stile direkt in HTML-Code zu schreiben. Verwenden Sie das

Nach dem Login kopieren

Im obigen Beispiel ist die Hintergrundfarbe des Body-Elements #f2f2f2, die Textfarbe ist #262626 und die Schriftgröße des h1-Elements beträgt 36 Pixel, was in Fettschrift angezeigt wird.

2. Externes Stylesheet
Externes Stylesheet ist eine Möglichkeit, CSS-Stile separat in eine externe CSS-Datei zu schreiben. Verwenden Sie das -Tag im , um ein externes Stylesheet einzuführen. Zum Beispiel:

Der Inhalt der Datei style.css lautet:

body {
    background-color: #f2f2f2;
    color: #262626;
}
h1 {
    font-size: 36px;
    font-weight: bold;
}

Auf diese Weise können alle Elemente in HTML Stilinformationen von externen Stylesheets erhalten, wodurch ein klarerer und prägnanterer HTML-Code erzielt wird.

3. Inline-Stil
Inline-Stil ist eine Möglichkeit, CSS-Stile direkt in das Stilattribut des HTML-Tags zu schreiben. Zum Beispiel:

Hello, world!

Im obigen Beispiel ist die Schriftfarbe des h1-Elements rot und die Schriftgröße beträgt 36 Pixel.

4. CSS-Selektor
CSS-Selektor ist ein Mechanismus zum Auswählen von HTML-Elementen und zum Anwenden von Stilen. Es kann Elemente anhand ihres Namens, Klassennamens, ihrer ID und anderer Attribute finden und ihre entsprechenden CSS-Stile erben oder überschreiben. Im Folgenden werden häufig CSS-Selektoren verwendet:

1. Tag-Selektor: Suchen Sie ein Element anhand seines Tag-Namens und wenden Sie Stile an. Zum Beispiel:

h1 {
    color: red;
}

2. Klassenselektor: Suchen Sie Elemente und wenden Sie Stile über ihre Klassenattribute an. Beispiel:

.red {
    color: red;
}

Setzen Sie im HTML-Code das Klassenattribut des Elements, das gestaltet werden muss, auf „rot“, um eine rote Schriftfarbe zu erhalten.

3. ID-Selektor: Suchen Sie Elemente und wenden Sie Stile anhand ihrer ID-Attribute an. Setzen Sie im HTML-Code das ID-Attribut des Elements, auf das der Stil angewendet werden soll, auf „id“, um den Stileffekt zu erzielen. Zum Beispiel:

#header {
    background-color: #f2f2f2;
}

Im obigen Beispiel lautet die ID des Elements „header“ und die Hintergrundfarbe ist #f2f2f2.

4. Attributauswahl: Elemente positionieren und Stile basierend auf ihren Attributwerten anwenden. Zum Beispiel:

input[type="text"] {
    border: 1px solid #ccc;
}

Im obigen Beispiel sind die Ränder aller Eingabeelemente mit dem Typattributwert „Text“ eine 1 Pixel dicke durchgezogene graue Linie.

5. Nachkommen-Selektor: Suchen Sie Elemente und wenden Sie Stile über ihre Eltern-Kind-Beziehung an. Zum Beispiel:

div p {
    color: #262626;
}

Im obigen Beispiel ist die Schriftfarbe aller p-Elemente innerhalb des div-Elements #262626.

Die oben genannten sind gängige Methoden zum Schreiben von CSS-Selektoren. Ihre flexible Anwendung kann mühsame Stilanpassungen realisieren und das Layout, die Schriftarten, die Farben usw. der Webseite schöner machen.

5. Zusammenfassung
In diesem Artikel werden gängige Methoden zum Schreiben von CSS-Stilen vorgestellt, z. B. eingebettete Stylesheets, externe Stylesheets, Inline-Stile, CSS-Selektoren usw. Sie können Entwicklern dabei helfen, Webseitenstile zu vereinheitlichen und schönere und komfortablere zu erstellen Webseiten. Benutzererfahrung. In der tatsächlichen Entwicklung ist es notwendig, eine geeignete Schreibmethode im CSS-Stil entsprechend den spezifischen Anforderungen auszuwählen, um die Lesbarkeit und Wartbarkeit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt vonSchreibmethode im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!