CSS ist eine Computersprache, mit der Dateistile wie HTML (eine Anwendung der Standard Generalized Markup Language) oder XML (eine Teilmenge der Standard Generalized Markup Language) ausgedrückt werden.
CSS kann Webseiten nicht nur statisch ändern, sondern auch mit verschiedenen Skriptsprachen zusammenarbeiten, um verschiedene Elemente von Webseiten dynamisch zu formatieren.
CSS kann das Layout von Elementpositionen in Webseiten präzise auf Pixelebene steuern, unterstützt fast alle Schriftgrößen und -stile und verfügt über die Möglichkeit, Webseitenobjekte und Modellstile zu bearbeiten. Wenn Sie sich ausführlicher damit befassen möchten, suchen Sie bitte auf Baidu nach „Video-Tutorial für PHP-Chinesische Website-CSS“ und lernen Sie kostenlos online.
1. Gemeinsame Attribute
Name: Name, kann wiederholt werden, kann derselbe sein; Klasse: Klassenname, kann wiederholt werden, oder kann mehrfach verwendet werden, z. B. <p class="one two"></p>; Bezeichner, nicht Wiederholungen werden im Allgemeinen in JavaScript verwendet. Die Benennungsregeln sind dieselben wie die Benennungsregeln für Bezeichnungen in anderen Sprachen.
title: Titel, der im Tag hinzugefügt werden kann, z. B. <img src="1.jpg" /title="This is a picture">;/
2. Tag-Beziehung
Nachkommenbeziehung: Eltern-Kind-Beziehung (einschließlich Beziehung);
Brüderliche Beziehung: Beziehung zum gleichen Vater;
3.CSS-Cascading Style Sheets
CSS-Kommentare: /Der Kommentarinhalt wird hier geschrieben, damit der Programmierer ihn sehen kann, und wird nicht auf der Seite angezeigt/;
CSS-Grammatikregeln: Alle Symbole müssen mit der englischen Eingabemethode in Kleinbuchstaben eingegeben werden und Attribute müssen in geschweiften Klammern geschrieben werden. Jede Attributanweisung muss mit einem Semikolon enden und der Attributwert muss eine Pixeleinheit (px) haben : Attribut: Attributwert ;
4. So führen Sie CSS ein
Inline-Einführung: Die Einführungsmethode zum Hinzufügen von Stilen in Tags; Format: <tag style="background:red; font-size:20px;">Content</tag>; Die Wartbarkeit des Codes ist äußerst schlecht und html Die Struktur ist nicht getrennt; der Einflussbereich liegt nur im aktuellen Tag. Fügen Sie <style type="text/css">CSS-Stil</style> im Kopf der Webseite hinzu Die Wartbarkeit des Codes ist relativ schlecht, es gibt keine Trennung von CSS-Code und HTML-Struktur, und der Einflussbereich liegt nur auf der aktuellen Seite.
Einführung in den externen Link: Erstellen Sie eine xx.css-Datei außerhalb der Webseite und verwenden Sie <link rel="stylesheet" type="text/css" href="xx.css"> im Header der Webseite Der Code ist sehr gut wartbar. Der CSS-Code ist vollständig von der HTML-Struktur getrennt und wirkt sich auf alle Webseiten aus, die CSS-Dateien auf der gesamten Website einführen.
5. CSS-Kernsyntax:
Strukturformat: selector {attribute: attribute value;...}; Beispiel: p{background:red;color:gray;size:20px;};Selector: ein Tool zum Auswählen von Seitenelementen;
Klammern: Der Inhalt des Stils wird in die Klammern geschrieben.
6. Auswahl
Basisselektor:
Universeller Selektor: Wird zum Initialisieren des Standardstils der Webseite verwendet und wird am Anfang des Stylesheets geschrieben. Format: *{padding:0;margin:0;}; {color:green; }; Klassenauswahlstil: .class name {background: pink;}; Die Inhaltsstile mehrerer Blöcke sind dann gleich. Geben Sie ihnen einfach den gleichen Stil.
ID-Selektor: eindeutiger Bezeichner, kann nicht wiederholt werden; Format: #id name{backgound-image:url(1.jpg);} Hinweis: ID-Name ist im Tag definiert id="one" id kann nicht mit der Tabelle hinzugefügt werden , wie oft Wenn der Inhaltsstil jedes Blocks gleich ist, müssen die ID-Namen mehrerer Blöcke unterschiedlich sein;;
Der Unterschied zwischen ID und Klasse: Beachten Sie den vorherigen Punkt – die ID muss den DOM-Knoten eindeutig bestimmen können. Wenn Sie den ID-Selektor im gesamten Artikel verwenden, müssen Sie den Knotenstil zweimal schreiben, auch wenn die beiden DOM-Knotenstile genau gleich sind. Wenn Sie ihn später beibehalten möchten, müssen Sie den Code an beiden Stellen beibehalten! ! ! Erhöht die Wartungskosten erheblich;
Pseudoklassenselektor: Sequentielles LoVe HAte-Prinzip, Sie können darüber springen, aber die Reihenfolge kann nicht geändert werden; es sind Linkstatus (Link), Besuchsstatus (besucht), Aktivstatus (Hover) und Klickstatus (aktiv);
Punktzeichnungsklasse: a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} Stil beim Fokussieren a:focus{}; Hinweis: Textattribute, Hintergrundfarben und Bilder können zu den Attributen a{} und a:link{} hinzugefügt werden, um den gleichen Effekt zu erzielen: li:link{color:yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};Hinweis: Textserienattribute, Hintergrundfarbe und Bilder können zu den Attributen hinzugefügt werden;
Verbindungsselektor:
Gruppenselektor (Vereinigungsselektor, Mehrfachselektor): Wird verwendet, um mehreren Elementen denselben Stil hinzuzufügen. Beispiel: .one, #one, a, span{color:red;font-size:14px;} bedeutet Klasse eins, #one , ein Tag und ein Span-Tag haben gemeinsame Attribute; Nachkommen-Selektor: Attribute zu Unterklassenelementen hinzufügen. Beispiel: .one a{text-decoration:none;} bedeutet den Inhalt, der durch das a-Tag des Nachkommen der Klasse eins geändert wird. Keine Unterstreichung; Untergeordneter Elementselektor (angegebener Selektor): Fügen Sie dem angegebenen untergeordneten Element Attribute hinzu.
Auswahl für benachbarte Elemente:
1. Zwei benachbarte Geschwisterselektoren fügen keine Attribute zu sich selbst hinzu, sondern nur Attribute zu den folgenden Geschwistern. 2.one~p{background:green} bedeutet um Attribute zu allen p-Tag-Elementen nach dem einen Selektor hinzuzufügen, vorausgesetzt, sie haben eine übergeordnete Klasse;
Attributauswahl:
1. Attribute zu Elementen mit attributes hinzufügen; img[id]{background:red;} Attribute zu Elementen mit id hinzufügen;
Attribute zu Elementen mit angegebenen Attributwerten hinzufügen: img[src="b.jpg"]{background:red;}Attribute zu Elementen mit b.jpg hinzufügen;
3. Fügen Sie Attribute zu Elementen hinzu, die mit dem angegebenen Zeichen beginnen: img[src^="b"]{background:red;} Fügen Sie Attribute zu allen Elementen hinzu, die mit b beginnen. 4. Der Selektor hat den angegebenen Attributwert am Ende : img[src$="b"]{background:red;}Attribute zu allen Elementen hinzufügen, die mit b 5 enden. Der Selektor enthält Elemente, die den angegebenen Attributwert enthalten: img[src*="b" ]{background:red ;}Attribute zu allen Elementen hinzufügen, die b enthalten;
7. Elementeinschluss (Klassifizierung der Anzeigemethoden)
Blockelemente: werden für den Schriftsatz verwendet: p, p, li, h1, dt;
Das Element wird in einer eigenen Zeile angezeigt (unabhängig von der Breite); Breite und Höhe können eingestellt werden;
Wenn ein Element auf Blockebene verschachtelt ist und die Breite des untergeordneten Elements nicht festgelegt ist, entspricht die Breite des untergeordneten Elements der Breite des übergeordneten Elements.
Inline-Elemente: werden zum Hinzufügen von Stilen verwendet; span, a, font, strong; Hinweis: Geben Sie den oberen und unteren Rändern und den Abstand zu Inline-Elementen nicht ein );
Elemente werden in einer Zeile angezeigt;
Breite und Höhe können nicht direkt eingestellt werden;
Inline-Blockelemente: Bild, Eingabe;
Elemente werden in einer Zeile angezeigt;
Breite und Höhe sind einstellbar;
Konvertierungsbeziehung: Inline enthält Inline; Blockelemente enthalten Blockelemente und Blockelemente können Inline-Elemente enthalten;
Anzeige: inline wandelt Elemente in Inline-Elemente um. Anzeige: inline-block wandelt Elemente in Inline-Blockelemente um
Anzeige: Block Konvertieren Sie das Element in ein Blockelement
8.CSS-Eigenschaften
Schriftartbezogene Eigenschaften:
Schriftgröße: Schriftgröße, Anzahl Pixel, Schriftstärke: Schriftstärke, Fett (700–900), normal, Schriftstil: Schriftneigung, kursiv, normal; : Schriftart, Microsoft YaHei, HeiTi;
Attributverkettung: Schriftart: Schriftgröße Schriftgröße/Zeilenhöhe Schriftfamilie; Hinweis: Die Schriftattributverkettung muss Schriftgröße und Schriftfamilie enthalten (andere Attribute können weggelassen werden). -Die Familienordnung kann nicht geändert werden;
Text:
Farbe: Farbe; Texteinzug: Einzug [Einheit ist em]; Textdekoration: Textzeile [Unterstreichung, Überstreichung, Durchgestrichene Zeile, keine Löschzeile]; Abstand; Textausrichtung: horizontale Ausrichtung [Standard links, Mitte, rechts];
Zeilenhöhe: Zeilenhöhe, die Höhe der Zeile, in der sich der Text befindet [wenn die Zeilenhöhe gleich der Höhe des Elements ist, wird der Text vertikal zentriert];
Größe: Dies ist die Größe des Blockelements. Die Breite und Höhe können für Inline-Elemente nicht festgelegt werden.
Breite: Breite;
Höhe: Höhe;
Attribute von list ul und li: list-style-type kann zu ul hinzugefügt werden, muss aber nicht zu li hinzugefügt werden;
list-style-type:none; Symbole, Quadrate, Kreise und durchgezogene Kreise entfernen. Sie müssen sie nicht schreiben, nachdem Sie Bilder hinzugefügt haben. list-style-type:none;list-style-image:url(1.jpg) Bildrand: 1 Pixel durchgehend rot; legt einen Rand für ul als Ganzes fest
list-style-position:outside; Stilbildpositionierung: innen, außen
Hintergrund:
Hintergrundfarbe Hintergrundfarbe; Hintergrundbild Hintergrundbild Hinweis: Stellen Sie beim Festlegen des Hintergrundbilds sicher, dass die Hintergrundkachel „Hintergrundwiederholung“ (Standardwert) | ist. x | (horizontale Kachelung) Hintergrundposition: Legen Sie den spezifischen Wert fest Zahl, der erste Wert stellt die horizontale Richtung dar, der zweite Wert stellt die vertikale Richtung dar. Stellen Sie das Einstellungsformat für das vordere Hintergrundbild auf „Hintergrundbild“ ein. Legen Sie fest, ob der Hintergrund fest ist. Bild behoben);
Attribut gemeinsames Schreiben: keine Mengen- oder Bestellbeschränkung: Hintergrund:url("") red no-peat 30px 40px;
Zeilenhöhe: Boxmodell: Wird für das Webseitenlayout verwendet. Die Breite muss festgelegt werden
Eigenschaften der Boxränder: Komponenten:
Rahmenbreite und -höhe: Rahmenbreite: 1 Pixel; Rahmenfarbe: Rahmenfarbe: Rot; Rahmenstil: durchgezogene Linie/gepunktete Linie/gestrichelte gepunktete Linie/keine; Attribut: gemeinsame Schrift: Rahmen: 1 Pixel ; Hinweis: Beim gemeinsamen Schreiben von Attributen muss keine Randfarbe angegeben werden, und die Randbreite muss nicht geschrieben werden. Separate Schreibmethoden: Randrand: Innenrand auffüllen: Legen Sie den Abstand zwischen den fest Inhalt und den Boxrand
Rand: Legen Sie den Abstand zwischen den Feldern fest
p{width:300px;height:200px;border-top:1px durchgehend rot;border-left:1px durchgehend rot;border-right:1px durchgehend rot;border-bottom:1px durchgehend rot;}
So legen Sie Eigenschaften einzeln fest:
border-top-color:red;border-top-style:solid;border-top-width:1px;
Kartongröße:
Wo sich die Boxgröße auswirkt: Die geerbte Box liegt innerhalb des Breitenbereichs der übergeordneten Box und der Füllwert hat keinen Einfluss auf die Berechnung der Boxgröße: Breite = Inhaltsbreite + linker und rechter Rand + linker und rechter Innenabstand
Der Rand kann sich auf die Boxgröße auswirken und die Polsterung kann sich auf die Boxgröße auswirken.
Wenn in Zukunft bei der Implementierung des Seitenbox-Layouts Innenränder für die Box festgelegt werden, muss der entsprechende Wert von der Inhaltsbreite oder -höhe abgezogen werden.
Rand: Legen Sie den Abstand zwischen den Feldern fest
Zentrieren Sie das Kästchen: Attribut gemeinsames Schreiben:
Das Feld unter dem Standardfluss ist zentriert: Rand: 0 Pixel automatisch; das positionierte Feld ist zentriert: Nehmen Sie zuerst die Hälfte des übergeordneten Felds und gehen Sie dann um die Hälfte seiner eigenen Breite zurück. Rand: 10 Pixel, oben, rechts, unten, links. 10pxMargin: 10px, 20px, oben, unten, 10px, links und rechts, 20pxMargin: 10px 20px 30px 10px oben, 20px links und rechts, 30px unten
Rand: 10px 20px 30px 40px oben rechts unten links
Beachten:
Attribut gemeinsames Schreiben:
Polsterung: 10px; der Abstand zwischen oben, rechts, unten und links beträgt 10pxPadding: 10px 20px; oben und unten 10px links und rechts 20pxPadding: 10px 20px 30px; links und rechts 20px
Polsterung: 10px 20px 30px 40px; oben, rechts, unten, links
Wenn zwei Boxen vertikal angezeigt werden, unterliegen die Ränder dem festgelegten Maximalwert (der erste Fall der Zusammenführung von Rändern). Wenn zwei Boxen horizontal angezeigt werden, überlappen sich die Ränder und die Ränder fallen zusammen (ein schwieriges Problem), um Schritt zu lösen:
Polsterung: Legen Sie den Abstand zwischen dem Inhalt und dem Rahmen der Box fest
Legen Sie einen Rahmen für das übergeordnete Feld fest
set overflow:hidden für die übergeordnete Box;
Klare Ränder:
Methode 1: *{padding: 0; margin: 0;}
Methode 2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9. Drei Hauptmerkmale von CSS
Nachlass:
Vererbbar: Farbe, Textausrichtung, Texteinzug, Schriftgröße, Schriftstärke, Schriftfamilie. Nicht vererbbar: Textdekoration, Rahmen, Anzeige, Rand, Gleitkomma, Auffüllung. Voraussetzung für die Vererbung ist die Zugehörigkeit zwischen Tags Bei einer verschachtelten Beziehung kann die Textfarbe vererbt werden; die Schriftart kann vererbt werden; die Textzeilenhöhe kann vererbt werden;
Besondere Merkmale:
Die Textfarbe im übergeordneten Element kann nicht vererbt werden (Kaskadierung)
<h1></h1> Titel-Tags können die Textgröße nicht vom übergeordneten Element erben
Überlappung: Überlappung bezieht sich auf die Überdeckung von Stilen
Die kaskadierende Natur von Stilen hat nichts mit der Reihenfolge zu tun, in der die Stile aufgerufen werden, sondern hängt mit der Reihenfolge zusammen, in der die Stile definiert werden.
Die Voraussetzung für das Auftreten von Kaskaden: Stilkonflikt
Priorität:
Gewichtung: Inline-Einführung (1000) > ID (100) > Klasse (10) > Bezeichnung (1) > Allgemein (0) Je größer der Wert, desto höher die Priorität.
Die Gewichte sind gleich und die folgenden Stile funktionieren
10. Ergänzende Wissensnotizen
Formularoptimierung schreiben: <lable for="one">Benutzername:</lable><input type="text" id="one">Formatlistensymbol: Listenstil: noneForm merge: border-collapse:collapse (Set Zusammenführen von Tabellenrändern, anwendbar auf Tabellen) Bfc-Überlauf „Formatierungskontext“:
sichtbar:Standardwert. Der Inhalt wird nicht zugeschnitten und außerhalb der Elementbox angezeigt. Der Inhalt wird zugeschnitten und der verbleibende Inhalt wird unsichtbar. Wenn das Bild seine Position ändert, ändert sich auch seine Position Das übergeordnete Element kann dazu führen, dass das übergeordnete Element seine Position ändert. Scrollen: Der Inhalt wird gekürzt, der Browser zeigt jedoch Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen
auto: Wenn der Inhalt zugeschnitten wird, zeigt der Browser Bildlaufleisten an, um den Rest des Inhalts anzuzeigen
11. Standardfluss: Elemente auf Blockebene werden in einer Zeile angezeigt; Standardfluss-Anzeigemodus: der Standardanzeigemodus von Elementen
12. Floating: Floating wird verwendet, um das Problem des Text- und Bildumbruchs bei der Erstellung von Navigationsleisten und Webseitenlayouts zu lösen
Verwendung: Float:left|. right Funktionen: Float, was immer Sie wollen
Als Float festgelegte Elemente nehmen nicht ihre ursprüngliche Position (außerhalb des Skripts) ein, sodass Elemente auf Blockebene als Float in einer Zeile angezeigt werden können. Inline-Elemente können in Inline-Blockelemente umgewandelt werden.
Verwenden Sie während der Moduskonvertierung nach Möglichkeit die Anzeige.
Klarer Schwimmer:
Definition: Das Löschen von Float bedeutet nicht das Löschen von Float. Achten Sie auf den Zeitpunkt der Verwendung: Wenn das untergeordnete Element auf Float eingestellt ist und das übergeordnete Element keine Höhe hat, wird das Seitenlayout verwirrt ; in diesem Fall den Schwimmer löschen.
Floating-Methode löschen: [x] Hinweis: Fügen Sie nach dem zu löschenden Element ein leeres Blockelement (<p></p>, Tag) hinzu und fügen Sie dem hinzugefügten leeren Element „clear:both left |right“ hinzu
13. Positionierung: Ausrichtung: links, rechts, oben, unten (weitere Informationen finden Sie im CSS-Tutorial-Kanal der chinesischen PHP-Website)
Statische Positionierung: Die statische Positionierung ist die Standard-Positionierungsmethode für den Elementfluss.
Absolute Positionierung: Positionierung relativ zum übergeordneten Element oder Vorgängerelement. Wenn das übergeordnete Element und das Vorgängerelement nicht vorhanden sind, wird die ursprüngliche Position nicht gefunden.
Beim Festlegen der absoluten Positionierung für ein einzelnes Element wird die Positionierung basierend auf der oberen linken Ecke des Browsers (Körper) festgelegt. Wenn bei verschachtelten Boxen die Positionierung nicht durch die übergeordnete Box festgelegt wird, legt die untergeordnete Box die Positionierung basierend auf der oberen linken Ecke des Browsers fest. Wenn Boxen verschachtelt sind und die übergeordnete Box positioniert ist, wird die untergeordnete Box basierend auf der oberen linken Ecke der übergeordneten Box positioniert. Für die Box ist die absolute Positionierung festgelegt und die Box nimmt keine Position ein (Off-Script). Nachdem die absolute Positionierung für das Inline-Element festgelegt wurde, wird das Element in ein Inline-Blockelement umgewandelt.
Hinweis: Nachdem das Element auf absolute Positionierung eingestellt wurde, kann die Position des Elements über den spezifischen Ausrichtungsnamen beliebig festgelegt werden.
Relative Positionierung: Relativ zur ursprünglichen Position des Elements nimmt es die vorherige Position ein: relativ;
Nachdem das Element auf relative Positionierung eingestellt wurde, nimmt es die ursprüngliche Position mit seiner eigenen Position ein. Die relative Positionierung kann keine Moduskonvertierung des Elements durchführen.
Das untergeordnete Element muss sich an derselben Position wie das übergeordnete Element befinden (das untergeordnete Element ist auf absolute Positionierung und das übergeordnete Element auf relative Positionierung eingestellt).
Feste Positionierung: relativ zur gesamten stabilen Position; feste Positionierung nimmt keine Position ein (Off-Label); Konvertieren Sie Inline-Elemente in Inline-Blockelemente position:fixed
Hierarchieprobleme:
Es gibt nur hierarchische Probleme, wenn die Positionierung relativ, absolut und andere Elemente ist, deren HTML-Dokumentstruktur sich hinten befindet und die sich auf der äußersten Ebene (höhere Ebene) befindet.
Z-Index: Stellen Sie den Wert ein. Solange eine Positionierung vorliegt, wird die Positionierungseinstellung verwendet.
14. CSS Elf Rabbit: Transparente Dokumente auswählen
Der Koordinatensystempunkt im Browser hat die richtige Richtung als positive Richtung, und die Richtung unter dem Punkt ist positiv. CSS-Sprite ist eine Möglichkeit, das Hintergrundbild der Webseite zu verarbeiten.
Verwendung von Sprites
Wenn Sie fw verwenden, müssen Sie die Sprite-Karte im offenen Modus öffnen. Wenn Sie die Sprite-Karte als Hintergrundbild verwenden, wird sie häufig in Verbindung mit der Hintergrundposition verwendet, um die Koordinaten der Elemente in der Sprite-Karte zu messen Wähler.
Oder verwenden Sie den Abkürzungsbuchstaben: k
15. CSS-Sichtbarkeit
Überlauf: versteckt Den überschüssigen Teil ausblenden display: none Das Element direkt ausblenden display: block Das Element anzeigen (besser passend zu js) Sichtbarkeit: versteckt Das Element ausblenden display: none Das Element ausblenden und die Position nicht belegen
Sichtbarkeit: ausgeblendet; das Element ausblenden und seine ursprüngliche Position einnehmen
16. Zentrieren Sie Bilder und Text
Jedes inlne-block-Element verfügt über eine standardmäßige Vertical-Align:Baseline
Vertical-Align: mittlere vertikale Ausrichtung; Vertical-Align und Inline-Block passen besser zusammen;
17. Vermeiden Sie den vom Standard abweichenden Ablauf
Wenn Sie beim Layout einer Webseite den Standardfluss nicht lösen können, kann die Positionierung nicht gelöst werden.
Verwenden Sie margin-left/margin-right und setzen Sie den Wert auf auto, um die Box automatisch an die beiden Außenseiten zu verschieben.
18. Spezifikationen zur Etiketteneinbindung
p kann jedes Tag unter dem Standard-Stream enthalten. Das p-Tag darf kein p-Tag und kein Titel-Tag enthalten. Die Titelnotiz des Listen-Tags kann andere Tags enthalten
Inline-Elemente sollten keine anderen Tags enthalten
19. Zusammenfassung der Einstellungsbreite und -höhe
Nach dem Schweben kann das Element die Breite und Höhe festlegen. Nach der absoluten Positionierung kann das Element die Breite und Höhe festlegen.
Nach der festen Positionierung kann das Element die Breite und Höhe festlegen
20. Upgrade auf CSS3
CSS3 und CSS2: CSS ist leistungsstark und der Code ist prägnant
Pseudoklassenselektor:
Das erste untergeordnete Element: first-child Das beste Element: last-child Das n-te untergeordnete Element: nth-child (n); 2n+1))
Gerades Element: nth-child(even); oder (nth-child(2n))
Textschatten: Textschatten: horizontal, vertikal, Schatten Boxschatten: Boxschatten: horizontal, vertikal, Schatten
Hintergrund: Hintergrund