HTML/CSS (der erste Leitfaden, den Anfänger unbedingt lesen sollten)

1. Die Bedeutung von Webstandards verstehen - Warum Webstandards übernehmen?

***** Trennen Sie Inhalt und Stil

1. Webstandards sind eine Reihe von Standards, d. h. eine Reihe von technischen Standards, die in Kombination verwendet werden [1], strukturierter Inhalt xhtml
【2】、Ausdrucksinhalt CSS
【3】Verhaltensbezogener Inhalt JavaScript

2. Ein kleines Tool für die Webentwicklung – Firebug in Firefox
Tools - Add-ons - Suche nach Firebug
Da es sich um eine Web-Frontend-Arbeit handelt, sind kompatible Browser wie IE, Firefox, Google Chrome, Safari usw. erforderlich.
Testen Sie, ob die Webseite über CSS-Stil verfügt – ändern Sie die Textgröße im Browser.

3. CSS-Definitionsfähigkeiten:
[1] Für zukünftige CSS-Codeoptimierungen wird empfohlen, allen Attributwerten ein „;“ zu folgen.
[2] Einige XHTML-Tags haben ihre eigenen Standard-CSS-Attributwerte.

Beispielsweise verfügt das h1-Tag über einen eigenen Attributwert, der automatisch fett und mit größerer Schriftgröße angezeigt wird.
【3】Aus Kompatibilitätsgründen mit gängigen Browsern und aus Gründen der Einheitlichkeit wird empfohlen, die CSS-Eigenschaften aller Elemente beim Festlegen auf die Standardeigenschaften zurückzusetzen.
【4】Verschiedene Browser haben ihre eigenen inkompatiblen CSS-Attributwerte – das Wichtigste ist die Browserkompatibilität.
【5】Was muss ich tun, wenn ich eine spezielle Schriftart verwenden möchte? --Wandeln Sie es in ein Bild um.

Unterteilt in chinesische und englische Schriftarten. Legen Sie die Reihenfolge der Schriftarten fest, mit englischen Schriftarten vorne und chinesischen Schriftarten hinten.
[6] CSS-Bearbeitungstool – Sie können alles verwenden. Experten können Menschen mit Blättern töten. [7] Wenn Sie den Text vertikal zentrieren möchten, stellen Sie die Zeilenhöhe auf die Höhe des Elements ein. Zeilenhöhe = Elementhöhe. [8] CSS kann auf den Standardstil von XHTML-Tags zurückgesetzt werden.

4. Die Art und Weise, wie CSS auf Webseiten angewendet wird, entspricht der Art und Weise, wie Menschen Kleidung anziehen.
[1] Inline-Stil: auf einen angewendet.
【2】Eingebetteter Stil: Auf einen Tag-Typ angewendet.
【3】Wenn wir viele Webseiten haben und alle CSS benötigen, können wir diese CSS in eine separate Datei schreiben. Dies ist der externe Linkstil und wird empfohlen.
【4】Importierte Stile: Die Stile werden ebenfalls in eine Datei geschrieben und dann in die Webseite importiert.

*****Hinweis: Der Importstil ist tatsächlich dem eingebetteten Stil ähnlich. Beide fügen der Webseite Stile hinzu.
1. Der Import nimmt Platz in HTML-Dateien ein
2. Bei einigen Browsern kann es zu Analyseproblemen kommen. Der Browser liest den Inhalt in @import zuletzt.
3. Importieren Sie mehrere Stildateien in eine Stildatei.

2. Eigenschaften von CSS

CSS wird als Cascading Style Sheets bezeichnet.

1. Vererbung: Untergeordnete Elemente erben bestimmte Stile übergeordneter Elemente.
[Da einige untergeordnete Elemente Standardwerte haben, benötigen sie keine übergeordneten Elemente]

2. Überlagern: Wenn ein untergeordnetes Element den gleichen Stil definiert wie das übergeordnete Element, wird der Stil des übergeordneten Elements überschrieben.
*****Die folgenden Stile überschreiben die vorherigen

3. CSS-Stilpriorität: Auf wen sollten Sie bei Stilkonflikten hören?

CSS-Priorität: Je kleiner der Umfang des Proximity-Prinzips, desto höher die Priorität.
Je näher der Stil am Ziel ist, desto höher ist die Priorität.

Opa -- Rot Papa -- Grün Kind -- Blau Auswahlpriorität Inline > id > class > tag selector In besonderen Fällen können wir die Berechtigungen eines bestimmten Attributs erhöhen
*****Das IEtest-Tool hat auch ein Kompatibilitätsproblem und kann IE6 unter Win7 nicht öffnen. – Laden Sie die grüne Version von IE6 herunter. Sie müssen nicht installieren, welche Version direkt verwendet werden soll.

4. Einige häufig verwendete Text- und CSS-Stile zur Textsteuerung

*****Wenn wir CSS-Stile anwenden, müssen wir auf deren Standardwerte achten. Weil verschiedene Browser unterschiedliche CSS-Standardwerte haben (verschiedene Browser unterstützen unterschiedliche Attribute und wir müssen auch die Kompatibilität unserer Webseiten sicherstellen. Versuchen Sie, die übergebenen Attribute zu verwenden und keine Attribute mit Kompatibilitätsunterschieden zu verwenden.)

5. CSS steuert einen bestimmten Status der Element-Pseudoklasse

Pseudoklassensyntax:
Elementname: Pseudoklassenname {Attribut: Wert}
Beispiel: der Mouseover-Status eines Hyperlinks
a:hover{text-decoration:underline;}
*****Wenn die Maus nicht funktioniert, ändern Sie bitte die Reihenfolge des Verbindungsstatus LVHA

Das obige HTML/CSS (der erste Leitfaden, den Anfänger unbedingt lesen sollten) ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/xie-zhan/archive/2016/07/01/5631868.html