CSS Cascading Style Sheets
1.CSS
-
Konzept:
CSS (Cascading Style Sheets), die allgemein als CSS-Stylesheets oder Cascading Style Sheets (Cascading Style Sheets)
-
Rolle:
- für Hauptsächlich verwendet Einstellung den Text (Schriftart, Größe, Ausrichtung, etc.) HTML - Seite, Bildform (Breite und Höhe, Randstil, Rand, etc.) sowie das Layout und das Aussehen des Layout - Anzeigestil.
- CSS in HTML-basierte, eine Fülle von Funktionen bereitstellt, wie Schriftarten, Farben, Hintergründe und das gesamte Layout der Bedienelemente, etc., aber auch verschiedene Stile für verschiedene Browser einrichten.
2. Die Einführung von CSS-Stylesheets
2.1 inline Formel (Inline Style)
-
Konzept:
Auch bekannt als Inline-Styles, Inline-Stil.
Es wird durch das Stilelement im Stil Attribut-Tag gesetzt
-
Die grundlegende Syntax lautet wie folgt:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
Praktisch alle HTML-Tags haben Stil-Attribut verwendet, um die innere Linie zu setzen.
- Beispiel:
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
- Hinweis:
- Stil ist eigentlich die Eigenschaft des Etiketts
- Style, und Zwischenwerte sind
: - Eine Mehrzahl von Sätzen von Attributwerten unter
;getrennt. - Und Sie können die aktuelle Etikett und Tagword darin verschachtelt steuern, in Coderedundanz resultierende
- Nachteile:
- Style-Struktur nicht erreicht und die Phasentrennung
2.2 Interne Stylesheet (Inline-Stylesheets)
-
Konzept:
Auch bekannt als Embedded
Der CSS-Code wird im Fokus Kopf head-Tag des HTML-Dokuments geschrieben und wird durch Stil-Label definiert
-
Die grundlegende Syntax lautet wie folgt:
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
- Beispiel:
<style>
div {
color: red;
font-size: 12px;
}
</style>
-
Hinweis:
- Style-Tags werden im Head-Tag im Allgemeinen liegt natürlich in der Theorie kann er überall im HTML-Dokument platziert werden.
- type = "text / css" kann in html5 weggelassen werden.
- Kontrollieren Sie die aktuelle Seite nur
-
Nachteile:
- Keine vollständige Trennung
2.3 Waibuyangshibiao (outer chain)
-
Konzept:
Auch bekannt als die Kette in
Es ist alle Stile in einer externen Stylesheet-Datei an einer oder mehrere CSS- Erweiterung von,
Durch die Verknüpfung von einer externen Stylesheet Link-Tag-Dateien in HTML-Dokumente
-
Die grundlegende Syntax lautet wie folgt:
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
- Hinweis:
- Link-Tag ist Single
- Link-Tag muss im Kopf-Tag-Header und drei Attribute Link-Tag angegeben
| Immobilien | Wirkung |
|---|---|
| rel | Definieren Sie die Beziehung zwischen dem aktuellen Dokument und das verknüpfte Dokument, in dem die Notwendigkeit als „Stylesheet“ bezeichnet ist, stellt es das verknüpfte Dokument ein Stylesheet-Datei ist. |
| Art | Die Dokumenttyp-Definition Link, hier braucht „text / CSS“ angeben, einen Link zu einer externen CSS-Stylesheet-Datei angibt. Wir können weggelassen werden |
| href | Definieren Sie die verlinkten externen Stylesheet-Datei URL, kann es ein relativer Pfad oder ein absoluter Pfad sein. |
Tabelle 2.4 fasst die drei Arten
| Style Sheets | Vorteil | Mangel | Verwendung | Regelbereich |
|---|---|---|---|---|
| Inline Style Sheets | Schreiben bequem, hohe Gewicht | Style-Struktur nicht erreicht und die Phasentrennung | weniger | Steuern eines Etiketts (klein) |
| Interner Stylesheet | Und die Teilstruktur, die eine Phasentrennung bilden | Keine vollständige Trennung | mehr | Steuern Sie eine Seite (in) |
| Externe Stylesheet | Fully Phasentrennungsstruktur und Stil erreichen | Müssen Sie sich vorstellen | Allenfalls wird dringend empfohlen | Die Steuerung der gesamten Website (und mehr) |
Code-Stil
Es gibt zwei allgemeine Arten des Schreibens:
- Eine davon ist das kompakte Format (Compact)
h3 { color: deeppink;font-size: 20px;}
- Und ein erweitertes Format (empfohlen)
h3 {
color: deeppink;
font-size: 20px;
}
Code Fall
/* 推荐 */
h3{
color: pink;
}
/* 不推荐 */
H3{
COLOR: PINK;
}
3. Zusammenfassung Schreiben CSS-Stilregeln
Das folgende Format:
Zusammenfassung:
- CSS-Stilauswahl wird verwendet, um die Rolle von HTML-Tags festlegen, innerhalb der geschweiften Klammern ist der Stil ihrer spezifischen Einstellungen.
- Attribute und Attributwerte in der Form von „Schlüsselpaar“.
- Attribut ist gebenes Element Stileigenschaften Einstellungen wie Schriftgröße, Schriftfarbe und dergleichen.
- Englisch zwischen den Attributen und Attributwerten „:“ Verbindung.
- Unterscheiden, eine Mehrzahl von „Schlüsselwertpaaren“ zwischen Englisch „“
