Drei Möglichkeiten zur Einführung von CSS: 1. Inline-Einführung: Verwenden Sie das Stilattribut, um CSS-Code in ein bestimmtes HTML-Tag einzufügen. Die Syntax lautet „
... name> ;"; 2. Eingebetteter Import, CSS-Code in das Style-Tag-Paar im Kopfteil des Dokuments einfügen, Syntax lautet „"; 3. Externer Import, CSS-Code einfügen In die externe CSS-Datei einfügen, verwenden Sie das Link-Tag oder die „@import“-Regel, um es in das HTML-Dokument einzuführen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS: Cascading Style Sheets sind eine Computersprache, mit der die Stile von Dokumenten wie HTML oder XML 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 und unterstützt fast alle Schriftarten Größen und Stile und verfügt über die Möglichkeit, Webobjekt- und Modellstile zu bearbeiten.
Grundlegende CSS-Syntax:
CSS-Regeln bestehen aus zwei Hauptteilen: dem Selektor und einer oder mehreren Anweisungen. Der Selektor ist normalerweise der HTML, das geändert werden muss. Jede Deklaration besteht aus einem Attribut und einem Wert.
1. Selektor (Selektor)
Der Selektor besteht aus der ID des HTML-Elements, dem Klassenattribut oder dem Elementnamen selbst und einigen speziellen Symbolen, die verwendet werden, um anzugeben, für welches HTML-Element der Stil definiert werden soll , wie zum Beispiel „Selektor p“ bedeutet, Stile für alle
-Tags auf der Seite zu definieren Wähler. Alle Deklarationen werden in einem Paar geschweifter Klammern {} direkt nach dem Selektor platziert.
Eine Anweisung muss zwei Teile enthalten: Attribute und Attributwerte, und das Ende einer Anweisung muss mit einem Semikolon markiert werden. Bei der letzten Anweisung in einem Stil kann das Semikolon weggelassen werden.
Attribut: Der Stilname, den Sie für das HTML-Element festlegen möchten. Er besteht aus einer Reihe von Schlüsselwörtern, wie z. B. Farbe, Rahmen, Schriftart usw. CSS bietet viele Attribute, die Sie auf der offiziellen W3C-Website verwenden können
Wert: Er besteht aus einem numerischen Wert und einer Einheit oder einem Schlüsselwort und wird verwendet, um den Anzeigeeffekt eines bestimmten Attributs zu steuern. Der Wert des Farbattributs kann beispielsweise Rot oder #F1F1F1 usw. sein.1. Inline-Stylesheet (Inline-Einführung)Fügen Sie das Stilattribut direkt zu einem einzelnen HTML-Element-Tag hinzu, um den Ausdrucksstil des HTML-Tags zu steuern.
Diese Art der Einführung von CSS ist dezentral, flexibel und bequem, aber es mangelt ihr an Integrität und Planung, was einer späteren Änderung und Wartung nicht förderlich ist. Wenn der Stil der Website geändert werden muss, kann dieselbe Änderung mehrere Stellen betreffen. was zu hohen Wartungskosten führt. Der Stileffekt, der das STYLE-Attribut verwendet, ist der stärkste und überschreibt die gleichen Stileffekte anderer Einführungsmethoden.<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: maroon; margin-left: 40px">PHP中文网</h1> <p style="color: blue;">https://www.php.cn/</p> </body> </html>
Obwohl Inline (Inline-Stil) HTML-Tags problemlos CSS-Stile verleihen kann, sind seine Mängel auch sehr offensichtlich und es wird nicht empfohlen, es zu häufig zu verwenden.
Das Definieren von Inline-Stilen erfordert die Definition des Stilattributs in jedem HTML-Tag, was sehr unpraktisch ist.
Seien Sie besonders vorsichtig, wenn Sie in Inline-Stilen doppelte oder einfache Anführungszeichen verwenden, da die Attribute von HTML-Tags normalerweise doppelte Anführungszeichen verwenden um den Wert des Attributs zu umschließen, z. B. Eine Website besteht normalerweise aus vielen Seiten. Wenn Sie den Seitenstil ändern, müssen Sie die Seiten einzeln ändern.