Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)

1. Das Konzept von CSS: (Cascading Style Sheet)

Vorteile: 1. Trennung von Inhalt und Präsentation. (Mithilfe von XHTML kann der Inhalt der Webseite von der Präsentation getrennt werden)

2. Einheitliche Vertretung

3. Reichhaltige Stile

4. Reduzieren Sie den Webseitencode

5. Verwenden Sie CSS, das unabhängig von der Webseite ist

2. Auswahlschalter

1. Tag-Selektor

Tag-Name {Attribut:Attributwert;}

2. Klassenauswahl

.Klassenname{Attribut:Attributwert;}

<Tagname class="Klassenname">Taginhalt</Tagname>

3. ID-Selektor

#ID Name{Attribut:Attributwert;}

4. Union-Selektor

Tag-Name,.Klassenname,#ID-Name{Attribut:Attributwert;}

5. Nachkommenauswahl

Der Nachkommenselektor wird geschrieben, indem zuerst das äußere Tag und danach das innere Tag geschrieben wird, getrennt durch Leerzeichen. Wenn Tags verschachtelt sind, werden die inneren Tags zu Nachkommen der äußeren Tags.

P span{Attribut:Attributwert;}

Das <span>-Tag ist im <p>-Tag verschachtelt.

Das <span-Tag ist ein Nachkomme des <p>-Tags und die beiden sind durch ein Leerzeichen getrennt.

6. Schnittpunkt-Selektor (Hinweis: Zwischen den Schnittpunkt-Selektoren darf kein Leerzeichen stehen). Damit kann ein bestimmtes Tag bestimmt werden

Tagname.Klassenname{}

7. Globaler Selektor

*{Stil;}

Kommentare in CSS können nur die Form /* Kommentar */ haben.

3. So führen Sie CSS-Stile in HTML ein

1. Inline-Stil,

<h1 Stil="Schriftgröße:18px"></h1>

2. Eingebettet,

Schreiben Sie den Stil in den Kopf

<style type="text/css">

H1{font-size:18px;}

</Stil>

3. Importieren und verknüpfen (externer CSS-Stil)

Verlinkt:

<link href=”style.css” rel=”stylesheet” type=”text/css”/>

Import:

<style type="text/css"> @import"style.css";</style>

Der Unterschied zwischen beiden besteht darin, dass beim Link zuerst der Stil und dann die Seite geladen wird, während beim Import das Gegenteil der Fall ist.

4. Stilpriorität

Zwischen grundlegenden Selektoren: ID-Selektor > Klassenselektor > Tag-Selektor

Zwischen Stylesheets: Inline-Style > eingebetteter Style > externer Style

Zwischen CSS-Stilen: Wenn im selben Selektor zwei identische Deklarationen vorhanden sind, überschreibt die letztere die vorherige.

5. Boxmodell

Die Gesamtgröße des Boxmodells = Rahmenbreite-Polsterung + Rand + Inhaltsgröße (Breite oder Höhe)

6. Schwimmende Eigenschaften

Float: Wert (links, rechts, keine, erben (wird vom IE nicht unterstützt, nicht empfohlen))

Ein weiteres Attribut, das in Verbindung mit dem Float-Attribut verwendet wird, ist Clear. Es bestimmt, auf welcher Seite des Elements keine anderen Floating-Elemente zulässig sind. Das Clear-Attribut hat fünf Werte, wie unten gezeigt:

Left erlaubt keine schwebenden Elemente auf der linken Seite.

Rechts: Auf der rechten Seite sind keine schwebenden Elemente zulässig

Beides: schwebende Elemente sind weder auf der linken noch auf der rechten Seite zulässig.

Keine ist der Standardwert, der es ermöglicht, dass schwebende Elemente auf beiden Seiten erscheinen

Erben: Gibt an, dass der Wert des Clear-Attributs vom übergeordneten Element geerbt werden soll. Der IE-Browser unterstützt dies nicht und wird nicht empfohlen. Im Allgemeinen wird beim Löschen von Floats häufig der Attributwert „beide“ verwendet, und zwar:

Klar: beides;

7. Positionierungsattribute:

1. Absolute Positionierung

Position: absolut; Z-Index: 2; (Stapelreihenfolge)

Hintergrundfarbe: Hintergrundfarbe. Transparent zeigt eine transparente Hintergrundfarbe an

background-attachment: bestimmt, ob das Hintergrundbild mit dem Inhalt gescrollt wird. Stellen Sie es auf fixed für fest und auf scroll für Scrollen ein.

2. Relative Positionierung: position:relativ;

8. Anzeigemodus der Bedienelemente

1. Anzeigemodus Anzeige: Wert

2. Behandeln Sie den Überlauf im Feld: Überlauf: Wert

3. Stellen Sie die Cursorform ein: Cursor: Zeiger (kleine Hand)

4. Hyperlink-Stil:

a:link{color:#ff0000;} //Nicht besuchter Link

a: visited{color:#00CC00}//Besuchte Links

a:hover{color:#000FF}//Bewegen Sie den Mauszeiger auf den Link

a:active{color:#FF00FF}//Ausgewählter Link

Der definierte Stil muss sein: linkàvisitedàhoveràactive

Erfahrung: Inline-Tags können in Tags auf Blockebene eingefügt werden und zu deren untergeordneten Elementen werden, umgekehrt gilt dies jedoch nicht.

Anzeige:Block; In ein Element auf Blockebene konvertieren;

Die obige Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen) ist der gesamte Inhalt, den der Herausgeber mit Ihnen teilt. Ich hoffe, dass er Ihnen als Referenz dienen kann. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/izhongwei/archive/2016/06/09/5572443.html