Eine Zusammenfassung, wie man CSS-Stile in das Web einführt-CSS-Tutorial-php.cn

Eine Zusammenfassung, wie man CSS-Stile in das Web einführt

伊谢尔伦

Freigeben： 2017-07-21 09:18:20

Original

2411 Leute haben es durchsucht

HTML und CSS sind zwei Sprachen mit unterschiedlichen Funktionen. Sie wirken sich gleichzeitig auf eine Webseite aus, daher müssen CSS und HTML miteinander verknüpft werden.

Die zwei einfachsten Möglichkeiten bestehen darin, es direkt in das HTML-Tag einzuführen oder es vor der HTML-Datei zu deklarieren. Das Folgende ist ein einfaches Codebeispiel

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{background-color:red;
        color: black}
    </style>
<!--这里是修饰所有的P标签里面的内容，这是引入方法的一种-->
 <style>
        div{background-color:chartreuse;
        color: coral}
    </style>
 
</head>
<body>
 
 
<p style="background-color: aquamarine;color: black">Jay</p>
<!--在css里面，要用分号区别各种属性,虽然这个P标签有css样式，但是文本的样式是就近原则，这是最简单的css引入方式-->
 
<p>Bob</p>
 
<div>spider
<p>我是个P</p>
</div>
<!--div里面的P标签在上面有div的样式而没有P标签样式时，按div标签的样式，否则按P标签的样式-->
 
 
</body>
</html>

Nach dem Login kopieren

Der Zweck des Imports und Link ist beides. Es führt eine unabhängige CSS-Datei in eine HTML-Datei ein. Der Unterschied zwischen den beiden besteht darin, dass der Linktyp HTML-Tags verwendet, um externe CSS-Dateien einzuführen, während der Importtyp CSS-Regeln verwendet, um externe CSS-Dateien einzuführen.

Beispiel für die Verwendung eines Links zum Einführen einer externen CSS-Datei:

<link href="~/Content/Base.css" rel="stylesheet" type="text/css" />

Nach dem Login kopieren

Beispiel für die Verwendung eines Imports zum Einführen einer CSS-Datei:

<style type="text/css">
    @import "/Content/Base.css"
</style>

Nach dem Login kopieren

Der Unterschied in Anzeigeeffekte zwischen diesen beiden Methoden: Bei Verwendung der Link-Methode wird die CSS-Datei vor dem Laden des Hauptteils der Seite geladen, sodass die angezeigte Webseite von Anfang an Stileffekte aufweist. Bei Verwendung der Importmethode wird die CSS-Datei geladen, nachdem die gesamte Seite geladen wurde. Wenn die Webseitendatei relativ groß ist, wird sie in einigen Fällen eine Weile lang angezeigt Laden Sie die CSS-Datei, nachdem der Stil festgelegt wurde. Aus Sicht der Benutzererfahrung ist dies ein Nachteil der Verwendung des Imports.

Um die Wartung zu erleichtern, möchten Sie möglicherweise alle CSS-Stile in mehrere CSS-Dateien schreiben. Wenn Sie den linkbasierten Import verwenden, benötigen Sie daher mehrere Anweisungen zum Importieren des CSS Dateien separat. Wenn Sie die Klassifizierung von CSS-Dateien anpassen möchten, müssen Sie gleichzeitig die HTML-Dateien anpassen. Dies ist ein Nachteil für Wartungsarbeiten. Wenn Sie Import verwenden, können Sie nur eine allgemeine CSS-Datei importieren und dann andere unabhängige CSS-Dateien in diese Datei importieren.

Wenn Sie nur eine CSS-Datei importieren müssen, verwenden Sie die Link-Methode. Wenn Sie mehrere CSS-Dateien importieren müssen, verwenden Sie zuerst die Link-Methode, um eine „Verzeichnis“-CSS-Datei einzuführen, und verwenden Sie dann die Importmethode in diesem „Verzeichnis“ CSS-Datei Andere CSS-Dateien importieren.

Wenn Sie jedoch dynamisch entscheiden möchten, welche CSS-Datei über JavaScript importiert werden soll, müssen Sie dazu eine Link-Methode verwenden.

Das obige ist der detaillierte Inhalt vonEine Zusammenfassung, wie man CSS-Stile in das Web einführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!