Heim > Artikel > Web-Frontend > Schreibmethode im CSS-Stil

Schreibmethode im CSS-Stil

PHPzOriginal: 2023-05-27 10:13:071119Durchsuche

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 c9ccee2e6ea535a969eb3f532ad9fe89-Tag im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag, um Stile zu definieren. Zum Beispiel:

<head>
    <style>
        body {
            background-color: #f2f2f2;
            color: #262626;
        }
        h1 {
            font-size: 36px;
            font-weight: bold;
        }
    </style>
</head>

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 2cdf5bf648cf2f33323966d7f58a7f3f-Tag im 93f0f5c25f18dab9d176bd4f6de5d30e, um ein externes Stylesheet einzuführen. Zum Beispiel:

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

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:

<h1 style="color: red; font-size: 36px;">Hello, world!</h1>

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:

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

h1 {
    color: red;
}

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.

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.

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.

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!

css html 继承 class 选择器样式表 input

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：Schließen-Schaltfläche CSSNächster Artikel：Schließen-Schaltfläche CSS

In Verbindung stehende Artikel

Mehr sehen