Zusammenfassung der Wissenspunkte zum CSS-Frontend

Im Folgenden finden Sie eine Zusammenfassung der CSS-Frontend-Wissenspunkte. Der Inhalt ist recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden.

1. Das Konzept von CSS: (CascadingStyleSheet)

Vorteile: 1. Trennung von Inhalt und Leistung. (Der Inhalt der Webseite kann mithilfe von 5 von der Präsentation getrennt werden. Verwenden Sie CSS, das von der Webseite unabhängig ist

2. Selektor

1. Tag-Selektor

Tag-Name｛ Attribut: Attributwert;｝2. Klassenselektor .Klassenname｛Attribut: Attributwert;｝

ba1189b5c40edb44fbf87a5f16068ba2

3. ID-Selektor

#ID-Name｛Attribut: Attributwert;｝

4. Union-Selektor

Tag-Name,.Klassenname,#ID-Name｛Attribut :Attributwert;｝

5. Nachkommenselektor

Der Nachkommenselektor wird geschrieben, indem das äußere Etikett vorne und das innere Etikett hineingeschrieben wird auf der Rückseite. Mit Leerzeichen trennen. Wenn Tags verschachtelt sind, wird das innere Tag zum Nachkommen des äußeren Tags.

P span{ Attribut: Attributwert;}e388a4556c0f65e1904146cc1a846bee-Tag verschachtelt im 45a2772a6b6107b401db3c9b82c049c2 59707c9b0d9b6f71f830d4fbe70264c3e388a4556c0f65e1904146cc1a846bee-Tags, getrennt durch Leerzeichen

6. Schnittpunktauswahl (Hinweis: Schnittpunkt Es gibt kein Leerzeichen dazwischen die Selektoren) Dies kann als ein bestimmter Tag

Tagname ｛｝

7. Globale Auswahl bestimmt werden

*｛-Stil ｝

Kommentare in CSS können nur in der Form /* Kommentare*/ vorliegen. 3 Stil

1. Inline,

<h1 style=”font-size:18px”></h1>

2. Eingebettet,

Schreiben Sie den Stil in den Kopf Medium

<style type=”text/css”>
H1{font-size:18px；}
</style>

3. Importtyp und Linktyp (externer CSS-Stil)

Linktyp:

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

Importtyp:

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

Der Der Unterschied zwischen den beiden besteht darin, dass der Link zuerst den Stil und dann die Seite lädt, und das Gegenteil gilt für den Import

4 Priorität der Stile

Zwischen grundlegenden Selektoren : ID-Selektor > Tag-Selektor

Zwischen Stylesheets: Inline-Stile > Identische Anweisungen, die letztere Anweisung überschreibt die vorherige Anweisung,

5. Box-Modell

Gesamtgröße des Box-Modells = Randbreite-Padding+Rand+Inhaltsgröße (Breite oder Höhe)

6. Float-Attribut

Float: Wert (links, rechts, keiner, erben (vom IE nicht unterstützt und nicht empfohlen)) Ein weiteres Attribut „clear“, das in Verbindung mit dem float-Attribut verwendet wird, wird verwendet, um zu bestimmen, welche Seite des Elements keine anderen schwebenden Elemente zulässt. Das clear-Attribut hat 5 Werte, wie folgt:

Links nicht Erlaube schwebende Elemente auf der linken Seite

Rechts: Erlaubt keine schwebenden Elemente auf der rechten SeiteBeide: Erlaubt keine schwebenden Elemente sowohl auf der linken als auch auf der rechten Seite

Keiner Standardwert, Floating-Elemente dürfen auf beiden Seiten angezeigt werden

Erben: Gibt an, dass der Wert des Attributs „clear“ vom übergeordneten Element geerbt werden soll. Der IE-Browser unterstützt dies nicht und wird nicht empfohlen. Im Allgemeinen wird der Attributwert „Beide“ zum Löschen von Gleitkommazahlen verwendet, d 1. Absolute Positionierung

position:absolute; z-index:2;(Stapelreihenfolge)

Hintergrundfarbe: Hintergrundfarbe. Transparent stellt eine transparente Hintergrundfarbe dar

background-attachment: Bestimmen Sie, ob das Hintergrundbild mit dem Klasseninhalt scrollt, auf „Fixed“ für „Fixed“ und „Scroll für Scrollen“ auf „Relative Positionierung“ eingestellt ist: relativ ;

8 Kontrollelement-Anzeigemodus

1. Anzeigemodus: Wert2 im Feld Überlauf: Überlauf: Wert

3. Legen Sie die Form des Cursors fest: Cursor:Zeiger (kleine Hand)

4. Hyperlink-Stil:

a:link{color:#ff0000;} //Unbesuchter Link

a: besuchte{color:#00CC00}//Besuchter Link

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

a:active{color:#FF00FF}//Der ausgewählte LinkDefinieren des Stils ist erforderlich Ja: linkàvisitedàhoveràactiveErfahrung: Inline-Tags können in Tags auf Blockebene eingefügt werden und zu deren untergeordneten Elementen werden, aber das Gegenteil ist nicht der Fall.

display:block; konvertiert in Elemente auf Blockebene; ich hoffe, dass es für alle zum Lernen hilfreich ist Achtung auf die chinesische PHP-Website!

Das obige ist der detaillierte Inhalt vonZusammenfassung der Wissenspunkte zum CSS-Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!