Eine kurze Einführung in CSS-Kenntnisse

1. CSS-Definition

CSS bezieht sich auf Cascading Style Sheets, eine Stylesheet-Sprache, die zur Beschreibung der Dokumentpräsentation in HTML oder XML (einschließlich XML-Zweigsprachen wie SVG und XHTML) verwendet wird. CSS beschreibt, wie Elemente auf Bildschirm, Papier, Audio und anderen Medien gerendert werden sollen.

2. Warum CSS verwenden?

Webseiten bestehen aus HTML-Tags, und diese Tags werden gemäß der Standardmethode des Browsers eingegeben und gerendert Es wird empfohlen, CSS zu verwenden, da dadurch nicht nur die Trennung von Inhalt und Leistung erreicht wird, sondern auch die Wartung erleichtert wird.

3. CSS-Syntax

Die CSS-Syntax besteht aus zwei Hauptteilen: dem Selektor und einer oder mehreren Deklarationen.

selector {declaration1; declaration2; ... declarationN }

Jede Deklaration besteht aus einem Attribut und einem Wert.

selector {property: value}

Im folgenden Beispiel ist h1 der Selektor, Farbe und Schriftgröße sind Attribute und Rot und 14 Pixel sind Werte.

h1 {color:red; font-size:14px;}

Dieses Bild stellt anschaulich die Struktur des obigen Codes dar

CSS für Leerzeichen und Großschreibung gibt es nicht sensibel, das heißt, dass sowohl Groß- als auch Kleinschreibung verwendet werden kann, hat keinen Einfluss auf die Arbeitswirkung von CSS im Browser

/* 属性为大小，值为小写，并且冒号后面有多个空格 */
 .box {COLOR:   blue;
}/* 建议写法 */.box {color: blue;
}

Die beiden oben genannten Schreibmethoden sind Der im Browser angezeigte Effekt ist der gleiche.

4. CSS-Kommentare

Wie die HTML-Sprache gibt es auch Kommentare

4.1 Einzeilige Kommentare

/* 这是表示单行的注释 */

Hinweis: Kommentare können nicht verschachtelt werden:

/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */

Mehrzeilige Kommentare

/*
 * 这是表示多行的注释
 * 注释内容1
 * 注释内容2 */

5. Einführungsmethode

5.1. Inline-Stil

Inline-Stil ist das Festlegen des CSS-Stils im Stilattribut des Tags.

<div></div>

5.2. Eingebettet ist das Zusammenschreiben von CSS-Stilen im > des -Tags Webseite; Tag-Ausrichtung

<meta><title>嵌入式</title>...<style>...在这里写CSS样式</style>

5.3, externe Verlinkung

Schreiben Sie den CSS-Stil in eine separate Datei und führen Sie dann die CSS-Stildatei über das Link-Tag ein

<meta><title>外联式</title>...<link>

type-Attribut: Es gibt nur eine Option, „text/css“, die angibt, dass die aktuelle Datei eine CSS-Textdatei ist

rel: gibt an, dass die Beziehung Zwischen der aktuellen HTML-Datei und der CSS-Datei befindet sich ein Stylesheet

href: Geben Sie den Pfad des externen Stylesheets an

5.4 Importieren (nicht empfohlen)

Schreiben Sie den CSS-Stil ein Erstellen Sie eine separate Datei und führen Sie sie dann über das @import-Tag ein. CSS-Stildatei

<meta><title>导入式</title><style>@import url(css/outer.css);/*其他css样式*/</style>

Hinweis: Der importierte Stil muss geschrieben werden, bevor alle CSS-Regeln geschrieben werden, andernfalls ist er ungültig Das Importieren eines externen Stylesheets ähnelt dem Verknüpfen mit einem externen Stylesheet, was der direkten Verwendung in der Datei entspricht. Dadurch wird der Speicherplatz der HTML-Datei belegt. Darüber hinaus wird diese Methode nicht empfohlen Die importierten Stile bleiben daher erhalten, wenn Sie die Webseite zum ersten Mal öffnen. Die Stile werden importiert und die Benutzererfahrung ist nicht gut.

Eine andere Verwendung zum Importieren externer Stile Wenn eine Datei auf viele externe Stylesheets verweisen muss, können Sie die Stylesheets, auf die verwiesen werden soll, in einer Datei ablegen. Bei Dateien, auf die verwiesen werden muss, müssen Sie beispielsweise nur auf eine Datei verweisen Der Inhalt von

import.css lautet wie folgt:

@import „a.css“
@import „b.css“
@import „c. css“

Zusätzlich zu Bei den oben genannten vier importierten Stilen müssen Sie wissen, dass alle Tags einen Standardstil haben, den wir Browserstil oder Standardstil nennen. Das heißt, wie HTML-Tags in einem Browser angezeigt werden, ohne dass Stile hinzugefügt werden müssen.

6. Vorschläge und Aufmerksamkeitspunkte

Einige Vorschläge

Um das zu verbessern Zukünftiger Code Zur Optimierung wird empfohlen, nach jedem Attributwert ein Semikolon hinzuzufügen, z. B.: p {font-style: normal; }
Einige HTML-Attribute verfügen über benutzerdefiniertes Standard-CSS Attributwerte. , wie zum Beispiel:
Um mit Browsern kompatibel zu sein, wird empfohlen, die CSS-Attributwerte von zurückzusetzen alle Elemente, wie zum Beispiel:

h1>————>h1 { font-size: 12px; }

Wenn Sie eine spezielle Schriftart verwenden möchten Wenn Sie jedoch befürchten, dass der Benutzer nicht über die Schriftart verfügt, können Sie Bilder ersetzen.
Die Reihenfolge zum Festlegen chinesischer und englischer Schriftarten: Legen Sie zuerst die englische Schriftart und dann die chinesische fest Schriftart, wie zum Beispiel: p { „Courier New“, „宋体“ }, es wird empfohlen, die Schriftart Doppelte Anführungszeichen

Stilanwendungsreihenfolge

zu verwenden

Inline-Stile haben die höchste Priorität
Für die gleichen Stilattribute werden unterschiedliche Stilattribute zusammengeführt dargestellt
Für denselben Stil und dieselben Attribute wird die Rendering-Methode durch die Reihenfolge in bestimmt. Die zuvor definierten Attribute werden später überschrieben
!wichtig Die angegebenen Stilregeln werden zuerst angewendet

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in CSS-Kenntnisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!