Eine kurze Einführung in CSS-Kenntnisse

零下一度
Freigeben: 2017-06-26 15:43:48
Original
1299 Leute haben es durchsucht

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 }
Nach dem Login kopieren

Jede Deklaration besteht aus einem Attribut und einem Wert.

selector {property: value}
Nach dem Login kopieren

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;}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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

/* 这是表示单行的注释 */
Nach dem Login kopieren

Hinweis: Kommentare können nicht verschachtelt werden:

/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */
Nach dem Login kopieren

Mehrzeilige Kommentare

/*
 * 这是表示多行的注释
 * 注释内容1
 * 注释内容2 */
Nach dem Login kopieren

5. Einführungsmethode

5.1. Inline-Stil

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

<div style="..."></div>
Nach dem Login kopieren

5.2. Eingebettet ist das Zusammenschreiben von CSS-Stilen im