Heim > Artikel > Backend-Entwicklung > Erläutern Sie ausführlich die grundlegenden Wissenspunkte von CSS
Erläutern Sie ausführlich die grundlegenden Wissenspunkte von CSS
- 亚连Original
- 2018-05-17 21:47:461937Durchsuche
1. Konzept
CSS (Cascading Style Sheets): Cascading Style Sheets nach CSS-Stilen, Kaskadierung: Verwenden Sie verschiedene Methoden zum Hinzufügen zum gleichen HTML-Tag Stile: Alle Stile arbeiten im Tag zusammen. Stil: Fügen Sie die anzuzeigenden Effekte zum HTML-Tag hinzu.
wird hauptsächlich verwendet, um den Darstellungsstil des Textinhalts, die Bildform und das Layout der HTML-Seite festzulegen.
Funktion: CSS macht die Seite schöner; CSS+Div macht das Layout flexibler.
Regeln: Stilselektoren unterscheiden strikt zwischen Groß- und Kleinschreibung, Attribute und Attributwerte werden jedoch nicht unterschieden.
Mehrere Attribute werden durch englische Semikolons getrennt.
Wenn der Attributwert besteht aus mehreren Wortkompositionen, eingeschlossen in englische Anführungszeichen
Die Stilauswahl lautet wie folgt:
<font style="color:red;size:14;"></font>
2. Führen Sie den CSS-Stil ein
1.Inline-Stil
<body>
<!--行内样式-->
<font style="color:red">浅笑安然</font><br />
</body>2. Interner Stil
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style type="text/css">
font{
color: red;
}
</style>
</head>3. Externer Stil
Referenz externer Stil:
<head>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="../css/outer.css"/>
</head>CSS-Dateieinstellungen:
/*Schriftstileinstellungen*/
font{
color:green;
}Priorität: Inline-Stile haben die höchste Priorität, interne Stile und externe Stile liegen nahe beieinander
3. Selektor
1. Elementselektor
<font >浅笑安然</font>
[html] view plain copy
/*元素选择器*/
font{
color: red;
}2. Klassenselektor: .class Klassenname {}
<font id="flower">心若浮沉</font>
[html] view plain copy
/*ID选择器*/
#flower{
color: blue;
}4. Attributselektor: Tag-Name [attribute='attribute value']
Text: c0c6ae27740aab9c2ac5e01a17b2edd6
<font class="happy">清风自来</font>
[html] view plain copy
/*类选择器*/
.happy{
color:gold;
}Enthält Selektoren: übergeordnetes Tag, untergeordnetes Tag
4. CSS-Stil1. Rahmenbreite hoch
2.display: Block-Attribut auf Blockebene, Inline-Attribut auf Zeilenebene, kein verstecktes Attribut inline-block: Element auf Blockebene in der Zeile, mit der BreiteElement auf Blockebene p; span
3. Schriftart: Farbe Schriftgröße Hintergrundfarbe
Rand: äußerer Rand, Box und Box, im Uhrzeigersinn eingestellt, wenn nicht eingestellt, ist es symmetrisch
Rand: Grenzlinie Auffüllung: innen Randabstand, Box und Inhalt Das Boxmodell ist die Box, die wir üblicherweise verwenden. Im wirklichen Leben hat es seine eigene Randdicke, den Abstand zu den Objekten im Inneren und den Abstand zwischen der Box selbst und der Außenseite Welt. Zusammenfassung: Der CSS-Kaskadenstil ist eine Kombination mehrerer Stile, die auf dem Etikett zusammenarbeiten, unabhängig davon, ob es sich um die Verwendung von Selektoren, Attributeinstellungen oder die Verwendung von Boxmodellen handelt Um den Stil einer HTML-Seite zu ändern, wirken im Grunde verschiedene Kräfte zusammen, um eine schöne Seite zu erstellen. Verwandte Artikel:Detaillierte Erläuterung der Schritte zum dynamischen Komprimieren von JS- und CSS-Dateien mit PHP
JS+CSS3, um das zu erreichen interaktiver Vergrößerungseffekt von Maus und Bildern
Ein Beispiel für eine Schaltfläche, die mithilfe von CSS mit einem Bild implementiert wurde
Das obige ist der detaillierte Inhalt vonErläutern Sie ausführlich die grundlegenden Wissenspunkte von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!