Kapitel 2 Wie man CSS anwendet-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Kapitel 2 Wie man CSS anwendet

Dec 19, 2016 pm 04:01 PM

ＣＳＳＳs Deklarationsmethode

Dieses Kapitel beginnt mit der Einführung in die Anwendung von CSＳS. Zu Beginn möchte ich natürlich die Erstellung eines Stylesheets (Style Sheets) vorstellen, einschließlich der Deklarationsmethode und der Anwendungsmethode auf der Webseite. Abschließend werde ich Ihnen auch einige Merkmale von CSS erläutern. Grob gesagt gibt es drei Möglichkeiten, CSS zu deklarieren: 1. Basisdeklaration: die typischste Art, CSS zu deklarieren. element {PROperty: value} Wenn es auf Chinesisch ausgedrückt wird, ist es element (label) {property (property) name: Setting Value}. Beispiel: H3 {COLOR: BLUE} ist eine Reihe von Anweisungen. 2. Sammeldeklaration: Deklarieren Sie eine Gruppe oder ein Array von Stilregeln (Eigenschaften) (getrennt durch Semikolons zwischen den einzelnen Regelgruppen) einer oder mehrerer Komponenten (Beschriftungen) gleichzeitig (getrennt durch Kommas zwischen den einzelnen Komponenten (Beschriftungen)). Komponente (Bezeichnung) {Eigenschaftsname (Eigenschaft) 1: Einstellungswert 1; Eigenschaftsname (Eigenschaft) 2: Einstellungswert 2;... } oder Komponente A (Beschriftung A), Komponente B (Beschriftung B), Komponente C (Beschriftung). C), ... {Eigenschaftsname (Attribut) 1: Einstellungswert 1; Eigenschaftsname (Attribut) 2: Einstellungswert 2;...} Zum Beispiel: TD {FARBE: BLAU;Schriftgröße: 9pt;} oder TD,P,DIV {COLOR: BLUE;font-size: 9pt; } 3. Unterelementdeklaration: Gruppieren Sie viele Stilregeln und deklarieren Sie sie separat. Komponente A (Bezeichnung A) {Eigenschaftsname (Eigenschaft) 1: Einstellungswert 1; Eigenschaftsname (Eigenschaft) 2: Einstellungswert 2; Eigenschaft ( Attribut) Name 4: Einstellungswert 4; } Zum Beispiel: TD { COLOR: BLUE; Schriftgröße: 9pt}TD { Schriftfamilie: "Standard-Kursivschrift": 150 %} Eine Anweisung wie diese stehen nicht in Konflikt miteinander, da die deklarierten Eigenschaften unterschiedlich sind. Wenn Sie dieselbe Eigenschaft versehentlich zweimal deklarieren, werden nur die später deklarierten Einstellungen wirksam. Übrigens: Solange Ihr Format korrekt ist, wird es unabhängig von Groß- und Kleinschreibung, Leerzeichen oder Zeilenumbrüchen keinen Einfluss auf die angezeigten Ergebnisse haben.

ＣＳＳ Anwendungsmethode

Als Nächstes stelle ich Ihnen die vier grundlegenden Methoden zum Anwenden des erstellten Stylesheets auf Webseiten vor. 1. Verwenden Sie das STYLE-Attribut: Fügen Sie das STYLE-Attribut direkt zu einzelnen Komponenten-Tags hinzu. <Component (label) STYLE="Property (property)1: Setting value 1; Property (Property)2: Setting value 2; ...} Zum Beispiel: <TD STYLE="COLOR:BLUE; 9pt; font-family:"楷体"; line-height:150%>Der Vorteil dieser Verwendung besteht darin, dass Stile flexibel auf jedes Tag angewendet werden können, der Nachteil besteht jedoch darin, dass es keine „Einheit“ im gesamten Dokument gibt. 2. Verwenden Sie das STYLE-Tag: Schreiben Sie die Stilregeln in das <STYLE>...</STYLE>-Tag. <STYLE TYPE="text/CSS"> </STYLE>Zum Beispiel: <STYLE TYPE="text/css"></STYLE>Normalerweise die gesamte <STYLE>; Die Struktur </STYLE> wird im Abschnitt <HEAD> geschrieben. Der Vorteil dieser Verwendung liegt in der Einheitlichkeit des gesamten Dokuments. Solange eine deklarierte Komponente vorhanden ist, wird die Stilregel angewendet. Der Nachteil liegt in der mangelnden Flexibilität einzelner Komponenten. 3. Verwenden Sie das LINK-Tag: Schreiben Sie die Stilregeln in die CSS-Stildatei und führen Sie sie dann mit dem <LINK>-Tag ein. Angenommen, wir speichern die Stilregeln als example.css-Datei. Wir müssen der Webseite nur <LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"> hinzufügen Datei. Der Stil wurde formuliert. Normalerweise wird das LINK-Tag in den Abschnitt <HEAD> geschrieben. Der Vorteil dieser Verwendung besteht darin, dass Sie mehrere Dokumente, für die dieselben Stilregeln gelten, derselben Stildatei zuordnen können. Der Nachteil ist auch die mangelnde Flexibilität einzelner Dateien oder Komponenten. 4. Verwenden Sie @import, um Folgendes einzuführen: Es ist der LINK-Verwendung sehr ähnlich, muss jedoch in <STYLE>...</STYLE> platziert werden. <STYLE TYPE="text/css"></STYLE> Zum Beispiel: <STYLE TYPE ="text/css"></STYLE> Es ist zu beachten, dass das Semikolon am Ende des Linie ist unbedingt erforderlich! Denken Sie daran, denken Sie daran! Unabhängig davon, ob es sich um die Verwendung von LINK oder @import handelt, ist es natürlich möglich, die vorhandenen Stylesheets anderer Personen direkt anzuwenden. Wenn Sie so etwas jedoch nicht gut machen, sollten Sie gemäß der Internet-Etikette zumindest die andere Partei informieren und zuerst deren Zustimmung einholen! Jede der vier Anwendungsmethoden hat ihre eigenen Vor- und Nachteile. Sie können sie umfassend nutzen, ohne dass es zu Konflikten kommt. Wenn jedoch dieselben Eigenschaften wiederholt deklariert werden, muss die Frage der Anwendungspriorität berücksichtigt werden! Im Allgemeinen folgt die Reihenfolge der Priorität den folgenden Prinzipien: Stileinstellungen des Webdesigners > Stileinstellungen des Benutzers > Stileinstellungen des Browsers Stileinstellungen des STYLE-Attributs > Stileinstellungen des STYLE-Tags > Kette Die nach den verknüpften Stileinstellungen deklarierten Stileinstellungen > Das sogenannte „ „Verknüpfte Stileinstellungen“ der vorherigen Stileinstellungen beziehen sich auf die beiden oben genannten Anwendungsmethoden: LINK-Tag und @import-Einführung. Der Knoten kommt in der Stileinstellung. Das Obige ist eine Einführung in die grundlegendsten Deklarations- und Anwendungsmethoden von CSS. Mit diesen grundlegenden Kenntnissen und Methoden können Sie bereits mit der Erstellung Ihres Stylesheets beginnen! Zusätzlich zu den oben genannten grundlegenden Deklarations- und Anwendungsmethoden gibt es weitere Deklarations- und Anwendungsmethoden, die Ihnen im nächsten Kapitel vorgestellt werden.

Das Obige ist der Inhalt von Kapitel 2 CSS-Anwendungsmethoden. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn