So rufen Sie CSS auf-Front-End-Fragen und Antworten-php.cn

So rufen Sie CSS auf

WBOY

Freigeben： 2023-05-27 11:39:07

Original

856 Leute haben es durchsucht

CSS (Cascading Style Sheets) ist eine Sprache zum Definieren von Webseitenstilen. Sie kann das Layout, die Farben, Schriftarten usw. von Webseiten steuern. Bei der Webseitenproduktion müssen wir normalerweise CSS-Dateien mit HTML-Dateien kombinieren, um den Stileffekt der Webseite zu erzielen. Lassen Sie uns als Nächstes darüber sprechen, wie man CSS aufruft.

Internes Stylesheet

Internes Stylesheet ist eine Möglichkeit, CSS-Stile im Kopf der HTML-Datei zu definieren, um einen einfachen Wechsel zu ermöglichen und den Code in die HTML-Datei einzubetten. Diese Methode eignet sich für bestimmte Stile, die nur von der aktuellen Seite benötigt werden. Sie heißt wie folgt:

<head>
    <title>我的页面</title>
    <style>
        /* CSS样式代码 */
    </style>
</head>

Nach dem Login kopieren

Externes Stylesheet

Ein externes Stylesheet ist ein CSS-Stil, der in einer anderen Datei definiert und dann weitergeleitet wird die HTML-Datei. Der Link verweist auf die Methode der Datei. Diese Methode eignet sich für Situationen, in denen mehrere Seiten denselben Stil erfordern, und wird wie folgt aufgerufen:

(1) Definieren Sie den Stilcode in der CSS-Datei

/* style.css */
body {
    background: #f6f6f6;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

Nach dem Login kopieren

(2) Verknüpfen Sie die CSS-Datei in der HTML-Datei

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="style.css">
</head>

Nach dem Login kopieren

Inline-Stylesheets

Inline-Stylesheets sind eine Methode, CSS-Stile direkt in HTML-Tags zu schreiben. Diese Methode eignet sich für Situationen, in denen Sie nur den Stil für ein Tag definieren müssen. Die Aufrufmethode lautet wie folgt:

<h1 style="color:red;">这是一个标题</h1>

Nach dem Login kopieren

Stylesheet importieren

Das Importieren eines Stylesheets ist eine Möglichkeit, den CSS-Stil in einer anderen Datei zu definieren Übergeben Sie es dann in So importieren Sie diese Datei in eine andere CSS-Datei. Diese Methode ähnelt der externen Stylesheet-Struktur, die aufrufende Methode unterscheidet sich jedoch geringfügig:

(1) Fügen Sie die Datei style.css in die Datei main.css ein.

/* main.css */
@import url('style.css');

/* 下面是对样式的调用 */
body {
    margin: 0;
}

.container {
    width: 960px;
    margin: 0 auto;
}

Nach dem Login kopieren

(2) Verknüpfen Sie die Datei main.css in der HTML-Datei

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="main.css">
</head>

Nach dem Login kopieren

Inherited Styles

Inherited Styles ist eine Methode zum Anwenden der Stile von übergeordneten Tags auf untergeordnete Tags. Diese Methode eignet sich für Situationen, in denen die Elemente denselben Stil haben und der Code durch den Stil des übergeordneten Tags vereinfacht werden kann. Zum Beispiel:

div {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #333;
}

h1 {
    font-size: 24px;
    font-weight: bold;
}

/* 这里的h1将继承div中的color和font-family */

Nach dem Login kopieren

Zusammenfassend gibt es viele Möglichkeiten, CSS aufzurufen, und Sie können je nach tatsächlichem Bedarf unterschiedliche Aufrufmethoden auswählen. Bei der Webseitenproduktion kann die Verwendung geeigneter CSS-Aufrufmethoden den Effekt des Webseitenstils besser erzielen und die Benutzererfahrung verbessern.

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