Heim >Web-Frontend >CSS-Tutorial >Detaillierte CSS-Erklärung
Detaillierte CSS-Erklärung
- 高洛峰Original
- 2016-10-20 13:26:451179Durchsuche
Einführung in CSS
1. Übersicht und Funktion von CSS
CSS (Cascading Style Sheets) ist ein Cascading Style Sheet, das zur Definition des Anzeigeeffekts von Webseiten verwendet wird. Es kann die Duplizierung von Stildefinitionen im HTML-Code lösen, die Wartbarkeit späteren Stilcodes verbessern und den Anzeigeeffekt von Webseiten verbessern.
Funktion: CSS trennt Webseiteninhalt und Anzeigestil und verbessert so die Anzeigefunktion.
2. Kombination von CSS und HTML (*****) (vier Typen)
Kombination von CSS und HTML
1. Stilattributmethode:
Verwenden Sie das Stilattribut im Tag, um den Anzeigestil jedes Tags zu ändern.
Beispiel:
p-Tag-Absatzinhalt.
Diese Methode ist flexibler, aber es ist schwieriger, denselben Stil für mehrere identische Tags zu definieren, sodass sie für lokale Änderungen geeignet ist.
2. Style-Tag-Methode: (eingebettete Methode)
Fügen Sie das Style-Tag zum Head-Tag hinzu, um mehrere Tags einheitlich zu ändern.
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style></head>Mit dieser Methode kann der Stil einer einzelnen Seite einheitlich festgelegt werden, sie ist jedoch für lokale Bereiche nicht flexibel genug.
3. Importmethode: (allgemeine Methode)
Voraussetzung ist, dass bereits eine definierte CSS-Datei vorhanden ist. Wenn ein Teil des Stils der Webseite verwendet werden muss, verwenden Sie diese Methode.
Beispiel:
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}</style>
Definieren Sie das Ende einer externen CSS-Datei (.css).
@import url("CSS-Dateiadresse"); muss innerhalb des
Hinweis: Die URL-Klammern müssen mit einem Semikolon abgeschlossen werden. Wenn sich der importierte Stil mit dem auf dieser Seite definierten Stil überschneidet, hat der auf dieser Seite definierte Stil Vorrang.
4. Link-Methode: (häufig verwendete Methode)
Wird über das Link-Tag im Head-Tag implementiert. Voraussetzung ist, dass zuerst eine definierte CSS-Datei vorhanden ist.
Beispiel:
<link rel="stylesheet" type="text/css" href="css_3.css" />
<link rel="stylesheet" type="text/css" href="CSS文件的地址" > ，不能写在<style>内部，写在<head>标签的内部。 rel：代表当前的文件和引入文件的关系。 type：类型 href：CSS的地址
Hinweis: Mehrere CSS-Dateien können über mehrere Link-Tags verknüpft werden. Der wiederholte Stil unterliegt dem zuletzt verknüpften CSS-Stil.
3. CSS-Stilpriorität und Codespezifikationen
1. CSS-Priorität
(Im Allgemeinen) von oben nach unten, von außen nach innen, Priorität Von niedrig nach hoch.
Sonderfälle: Tag-Namen-Selektor
2. CSS-Code-Spezifikationen
(1) Selektorname {Attributname: Attributwert; Attributwert;...}
(2) Trennen Sie Attribute mit Semikolons
(3) Attribute und Attributwerte werden direkt mit Doppelpunkten verbunden
(3) Wenn ein Attribut hat Bei mehreren Werten werden die Werte direkt durch Leerzeichen getrennt
Beispiel
div{border: value 1 value 2 value 3}
4. CSS-Selektor (*****)
1. Selektor:
Auf welches Label der geschriebene CSS-Code wirkt.
2. Basisselektor:
(1) Tag-Namenselektor
Jedes Tag definiert das Klassenattribut und das ID-Attribut. Wird zur Identifizierung von Etiketten verwendet, um die Etikettenoperationen zu erleichtern.
In der Definition kann der Klassenattributwert mehrerer Tags gleich sein und der ID-Wert muss eindeutig sein, da er häufig in JavaScript verwendet wird.
(2) Klassenselektor: (häufig verwendet)
Definieren Sie das Klassenattribut im Tag und weisen Sie einen Wert zu. Legen Sie den Stil des Tags über Tagname.Klassenwert fest.
Beispiel:
Wenn Sie unterschiedliche Stile für dasselbe Tag festlegen, verwenden Sie zur Unterscheidung die Klasse.
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p><p class=”pclass_2”>P标签样式</p>
Wenn verschiedene Tags dieselben Einstellungen haben, verwenden Sie die Klasse, um sie einheitlich zu definieren.
.classname {color:#00FF00;}
P-Tag-Stil
(3) ID-Selektor:
Ähnlich dem Klassenselektor, aber in einem anderen Format. Der Name des Selektors lautet: #id-Wert.
Beispiel:
#pid { color:#0000FF;}
P-Tag-Stil
Hinweis: Mehrere Tags können auch denselben ID-Wert definieren. Es tritt jedoch ein Fehler auf, wenn JavaScript das Tag-Element erhält. Daher ist es auch für das zukünftige Datenbankdesign von großem Vorteil, eine Gewohnheit zu entwickeln und die Einzigartigkeit des ID-Werts sicherzustellen.
Priorität (speziell):
Tag-Namen-Selektor
3. Erweiterungs-Selektor:
(1 ) Assoziations-Selektor: Erstellt eine Beziehung zwischen mehreren Tags.
Durch Leerzeichen getrennt
(2) Kombinationsselektor: Den gleichen Stil für mehrere verschiedene Selektoren festlegen
Durch Kommas getrennt
(3) Pseudoelementselektor: CSS-Definition Guter Selektor
Wenn Sie verwenden die 4 Zustände von Hyperlinks, die Reihenfolge der Verwendung: L V H A
5. CSS-Layout (Verstehen)
* Box-Modell
Mein Das Herz ist wie ein Tiger, der an der Rose schnüffelt.