CSS: ist die Abkürzung für Cascading Style Sheet, übersetzt als [Cascading Style Sheet], bei dem es sich um eine Reihe von Formatierungsregeln handelt. Ist eine Auszeichnungssprache, die zur (erweiterten) Steuerung des Webseiten-Stils verwendet wird und die Trennung von Stilinformationen vom Webinhalt ermöglicht.
Zusammensetzung von CSS: Die Definition von CSS besteht aus drei Teilen: Selektor (Selektor), Eigenschaften (Eigenschaften) und Eigenschaftswert (Wert). Syntax: selector{proprety:value} (selector{property:property value})
Dinge zu beachten:
1. Der CSS-Deklarationsblock besteht aus: Selektor + „{“ + einem oder mehreren CSS-Attributen + „}“.
2. Bei CSS wird die Groß-/Kleinschreibung nicht berücksichtigt. In der CSS-Syntax wird Kleinschreibung empfohlen.
1. CSS-Selektoren
Es ist der Name eines CSS-Stils. Wenn ein CSS-Stil in einem HTML-Dokument angezeigt wird, wird ein CSS verwendet. Wie benutzt man es? Zu diesem Zeitpunkt wird der CSS-Selektor (CSS-Name) verwendet, um anzugeben, dass dieses HTML-Tag diesen CSS-Stil verwendet.
2. Selektorsyntax
Ein CSS-Selektor definiert einen Stil.
Selektorname {declaration;}
Zum Beispiel:
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}P, dreamdublue und dreamdure sind alles Selektoren.
3. Benennungsregeln für Selektoren
CSS-Selektoren können englische Groß- und Kleinbuchstaben, Zahlen, Bindestriche, Unterstriche, Doppelpunkte und Punkte verwenden.
(1) Englische Groß- und Kleinbuchstaben AZ az
(2) Zahlen 0-9
(3) Bindestrich -
(4) Unterstreichen_
(5) Doppelpunkt:
(6) Zeitraum.
Hinweis: CSS-Selektoren können nur mit Buchstaben beginnen.
4. Selektorklassifizierung
CSS-Selektoren können in viele Kategorien unterteilt werden, z. B.: Typselektor, ID-Selektor, Klassenselektor, universeller Selektor, Gruppenselektor, Einschlussselektor, elementspezifischer Selektor, Unterobjektselektor, Attributselektor, verwandter Selektor, Nachbarselektoren usw werden im Folgenden einzeln vorgestellt und analysiert.
1. Typselektor: Der Typselektor ist das Webseitenelement selbst, und der Elementname wird beim Definieren direkt verwendet.
Body{/*Seitenattribute definieren*/}Div{Width:774px;/*Alle div-Elemente so definieren, dass sie eine Breite von 774 Pixeln haben*/}2. ID-Selektor: Es ist eindeutig, dass die ID-Werte verschiedener Elemente nicht wiederholt werden können. Der ID-Selektor definiert unterschiedliche Stile für die spezifischen Objekte jedes Elements, wodurch Benutzer die Seite genauer steuern können. Wenn Sie den ID-Selektor verwenden, müssen Sie zunächst für jedes Element ein ID-Attribut definieren.
<divid="top"></div>Wenn Sie den ID-Selektor verwenden, müssen Sie # zur Identifizierung verwenden: #top{Width:774px;/*Definieren Sie alle div-Elemente so, dass sie eine Breite von 774 Pixeln haben*/}3. Klassenselektor: Derselbe Klassenname kann für verschiedene Elementtypen in einem Dokument definiert werden. Eine Klasse kann Elemente desselben Stils in einer Kategorie vereinen. Bei Verwendung des Klassenselektors müssen Sie zunächst ein Klassenattribut für jedes Element definieren. :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>Bei Verwendung des Klassenselektors müssen Sie Englisch (Punkt) zur Identifizierung verwenden : . rot{Farbe:rot;}4. Universeller Selektor: Es handelt sich um einen speziellen Selektor, der durch * dargestellt wird. Es handelt sich um einen Selektor, der verwendet wird, aber leicht zu ignorieren ist.
*{font-size:12pt;/*Definieren Sie die Größe aller Schriftarten im Dokument auf 12pt*/}5. Gruppenselektor: Der Gruppenselektor ist kein Selektortyp, sondern eine Selektormethode. Wenn mehrere Objekte denselben Stil definieren, können wir sie in einer Gruppe zusammenfassen. Dies kann das Lesen und Schreiben von Code vereinfachen, z. B.:
.class1{font-size:13px;color:red;text-decroation:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}Kann gruppiert werden in:
.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{color:blue;}Es gibt zwei Prinzipien für die Verwendung der Gruppierung: 1. Aspektprinzip 2. Näherungsprinzip (wenn mehrere Elemente benachbart sind, können Sie die Verwendung von Gruppierungsselektoren innerhalb eines Moduls in Betracht ziehen)
6. Enthält Selektoren: Der nützlichste Selektortyp, der den Code vereinfachen und eine breite Palette von Stilkontrollen ermöglichen kann. Zum Beispiel:
.div1h2{/*Definieren Sie den Titelstil aller H2 in der Klasse div1 Layer*/font-size:18px;}.div1p{/*Definieren Sie den Titelstil aller P in der Klasse div1 Layer*/font-size:12px ;}7. Elementspezifische Selektoren: Manchmal möchten wir den Stil eines bestimmten Elements innerhalb eines bestimmten Bereichs steuern. In diesem Fall können wir Klassen- oder ID-Selektoren in Kombination verwenden. Zum Beispiel:
span.red{/*Definieren Sie die Farbe des Elements mit der Klasse red im span-Element als red*/color:red;}div#top{/*Definieren Sie die Breite des Elements mit id as top im div-Element als 100 %*/width:100% ;}zB:<div><h2><h2><p></p><span></span></div>Es ist offensichtlich nicht möglich, den Nachrichtenselektor im obigen Code zu verwenden. Es ist auch nicht gut, den Selektor vom Typ h2 zu verwenden.
p.news{} h2.news{} span.news{}
8. Unterobjektselektoren: Wie Elementselektoren sind sie Einschränkungsselektoren, dh Elementstile, die die Einschränkungsbedingungen erfüllen, werden innerhalb eines bestimmten Bereichs von Elementen definiert. Der elementspezifische Selektor verwendet Klassen- und ID-Attribute als Einschränkungen, während sub -Objektselektoren Der Selektor verwendet ID und Unterobjekt als Einschränkungen.
#main>table{/*Definieren Sie den Stil der Unterobjekttabelle im Hauptmodul mit der ID main*/width:788px;font-size:12px;}#main>.title{/*Definieren Sie das Unterobjekt im Hauptmodul mit der ID als main Die Klasse des Objekts ist der Stil von title*/color:red;font-style:italic;}9. Attributselektor: Der Attributselektor fügt nach dem Element eine Klammer hinzu, und in den Klammern werden verschiedene Attribute oder Ausdrücke aufgelistet. Es gibt 7 spezifische Formen von Attributselektoren:
(1) Existenzattributabgleich: Steuern Sie den Stil des Elements durch Abgleich vorhandener Attribute. Im Allgemeinen sollten die übereinstimmenden Attribute in Klammern stehen und nur die Namen ohne Zuweisung von Werten aufgelistet werden:
h1[class]{color:red;/*Gilt für jedes h1-Element mit dem Attribut „class“, unabhängig vom Wert der Klasse*/}img[alt]{border:none;/*Gilt für jedes img-Element mit dem Attribut „alt“, unabhängig vom Wert von „alt“. Was ist der Wert*/}a[href][title]{font-weight:bold;/*funktioniert als Element mit den Attributen href und title*/}(2) Präzise Attributübereinstimmung: Der Stil wird nur angewendet, wenn der Attributwert vollständig mit dem angegebenen Attributwert übereinstimmt. Die ID- und Klassenselektoren sind tatsächlich eine präzise Attributauswahl.
a[href=www.163.com][title=NetEase]{font-size:12px;/*Die Funktionsadresse zeigt auf www.163.com und die Titelaufforderung ist das a-Element von NetEase*/}(3) Leerzeichen werden einzeln abgeglichen: Durch Definieren einer Liste von Zeichenfolgen für Attribute können Sie den Elementstil steuern, solange Sie mit einer der Zeichenfolgen übereinstimmen.
<spanclass=abc>Wer kontrolliert meinen Stil?</span> Sie können die folgenden Stile zur Steuerung verwenden: [class^=a]{color:red;} oder: [class^=b]{color:red;} oder: [class^=c]{color:red;} oder: span[class^=c]{color:red;}(4) Bindestrichvergleich: Funktion und Verwendung sind dieselben wie beim Leerzeichenvergleich, die Zeichenfolgenliste beim Bindestrichvergleich wird jedoch durch Bindestriche getrennt.
<span>Wer wird meine Stile kontrollieren</span>
Dies kann mit den folgenden Stilen gesteuert werden:
[class|=a]{color:red;} oder: [class|=a]{color:red;} oder: [class|=b]{color:red;} oder: [class|=c]{color :red;} oder: span[class|=c]{color:red;}(5) Präfixselektor: Solange das Startzeichen des Attributwerts mit der angegebenen Zeichenfolge übereinstimmt, kann der Stil auf das Element angewendet werden. Der Präfixabgleich wird mithilfe der Form [^=] implementiert:
<div>Präfixübereinstimmung</div>
Sie können die folgenden Stilsteuerelemente verwenden
[class^=my]{color:red;}(6) Suffix-Übereinstimmung: Im Gegensatz zum Präfix wird die Formularsteuerung [$=] verwendet, solange das Endzeichen des Attributs mit dem angegebenen Zeichen übereinstimmt.
<div>Suffix-Übereinstimmung</div>
Sie können die folgenden Stilsteuerelemente verwenden
[class$=Test]{color:red;}(7) Teilstring-Übereinstimmung: Der Stil wird angewendet, solange die angegebene Zeichenfolge im Attribut vorhanden ist, und wird in der Form [*=] gesteuert.
<div>Teilstring-Übereinstimmung</div>
Sie können die folgenden Stilsteuerelemente verwenden
[class*=est]{color:red;}10. Angrenzender Selektor: Bezieht sich auf das nächste Element neben dem Element.
div+p{font-size:24px;/*Gilt für alle p-Elemente unmittelbar nach dem div-Element und definiert die Schriftgröße des p-Elements als 14px*/}z. B.:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>Um das untere p-Element separat zu steuern, sofern Sie kein Klassen- und ID-Attribut dafür definieren, können Sie benachbarte Selektoren verwenden.
#sub_wrap+p{font-size:14px;}