Erläutern Sie ausführlich die grundlegenden Wissenspunkte von CSS-PHP-Tutorial-php.cn

Erläutern Sie ausführlich die grundlegenden Wissenspunkte von CSS

亚连

Freigeben： 2023-03-26 12:14:02

Original

1980 Leute haben es durchsucht

1. Konzept

CSS (Cascading Style Sheets): Cascading Style Sheets nach CSS-Stilen, Kaskadierung: Verwenden Sie verschiedene Methoden zum Hinzufügen zum gleichen HTML-Tag Stile: Alle Stile arbeiten im Tag zusammen. Stil: Fügen Sie die anzuzeigenden Effekte zum HTML-Tag hinzu.

wird hauptsächlich verwendet, um den Darstellungsstil des Textinhalts, die Bildform und das Layout der HTML-Seite festzulegen.

Funktion: CSS macht die Seite schöner; CSS+Div macht das Layout flexibler.

Regeln: Stilselektoren unterscheiden strikt zwischen Groß- und Kleinschreibung, Attribute und Attributwerte werden jedoch nicht unterschieden.

Mehrere Attribute werden durch englische Semikolons getrennt.

Wenn der Attributwert besteht aus mehreren Wortkompositionen, eingeschlossen in englische Anführungszeichen

Die Stilauswahl lautet wie folgt:

<font style="color:red;size:14;"></font>

Nach dem Login kopieren

2. Führen Sie den CSS-Stil ein

1.Inline-Stil

<body>  
    <!--行内样式-->  
    <font style="color:red">浅笑安然</font><br />  
</body>

Nach dem Login kopieren

2. Interner Stil

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <!--内部样式-->  
    <style type="text/css">  
        font{  
            color: red;  
        }  
    </style>  
</head>

Nach dem Login kopieren

3. Externer Stil

Referenz externer Stil:

<head>  
        <!--外部样式-->  
    <link rel="stylesheet" type="text/css" href="../css/outer.css"/>  
</head>

Nach dem Login kopieren

CSS-Dateieinstellungen:

/*Schriftstileinstellungen*/

font{  
    color:green;  
}

Nach dem Login kopieren

Priorität: Inline-Stile haben die höchste Priorität, interne Stile und externe Stile liegen nahe beieinander

3. Selektor

1. Elementselektor

<font >浅笑安然</font>  
[html] view plain copy
/*元素选择器*/  
font{  
    color: red;  
}

Nach dem Login kopieren

2. Klassenselektor: .class Klassenname {}

<font id="flower">心若浮沉</font>  
[html] view plain copy
/*ID选择器*/  
#flower{  
    color: blue;  
}

Nach dem Login kopieren

4. Attributselektor: Tag-Name [attribute='attribute value']

Text:

<font class="happy">清风自来</font>  
[html] view plain copy
/*类选择器*/  
.happy{  
    color:gold;  
}

Nach dem Login kopieren

Enthält Selektoren: übergeordnetes Tag, untergeordnetes Tag

4. CSS-Stil

1. Rahmenbreite hoch

2.display: Block-Attribut auf Blockebene, Inline-Attribut auf Zeilenebene, kein verstecktes Attribut inline-block: Element auf Blockebene in der Zeile, mit der Breite

Element auf Blockebene p; span

3. Schriftart: Farbe Schriftgröße Hintergrundfarbe

4. Float: Clear Float

Box-Modell

Rand: äußerer Rand, Box und Box, im Uhrzeigersinn eingestellt, wenn nicht eingestellt, ist es symmetrisch

Rand: Grenzlinie

Auffüllung: innen Randabstand, Box und Inhalt

Das Boxmodell ist die Box, die wir üblicherweise verwenden. Im wirklichen Leben hat es seine eigene Randdicke, den Abstand zu den Objekten im Inneren und den Abstand zwischen der Box selbst und der Außenseite Welt.

Zusammenfassung:

Der CSS-Kaskadenstil ist eine Kombination mehrerer Stile, die auf dem Etikett zusammenarbeiten, unabhängig davon, ob es sich um die Verwendung von Selektoren, Attributeinstellungen oder die Verwendung von Boxmodellen handelt Um den Stil einer HTML-Seite zu ändern, wirken im Grunde verschiedene Kräfte zusammen, um eine schöne Seite zu erstellen.

Verwandte Artikel:

Detaillierte Erläuterung der Schritte zum dynamischen Komprimieren von JS- und CSS-Dateien mit PHP

JS+CSS3, um das zu erreichen interaktiver Vergrößerungseffekt von Maus und Bildern

Ein Beispiel für eine Schaltfläche, die mithilfe von CSS mit einem Bild implementiert wurde

Das obige ist der detaillierte Inhalt vonErläutern Sie ausführlich die grundlegenden Wissenspunkte von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!