Grundkenntnisse der Webseitenerstellung (HTML) (3) HTML+CSS

1.1HTML CS

CSS-Selektor

Unterschiedliche Stildefinitionen haben unterschiedliche Anwendungsmethoden und die entsprechenden Stilnamen sind ebenfalls unterschiedlich, daher ist der Stilname ein Selektor und sollte einfach zu verwenden sein Verstehen Sie den Unterschied. Der Stil der Anwendung.

1.Klassenselektor:

Der Name ist eine Zeichenfolge, die mit einem Punkt „.“ beginnt. Diese Art von Stil muss über das Klassenattribut in verwendet werden das Etikett. Dieser Stil muss über das Klassenattribut im Tag angewendet werden.

Beispiel:

.wenzi{font-size:20px;}
<p class=”wenzi”>类选择器样式</p>

2. Tag-Selektor:

Der Name stimmt mit dem HTML-Tag-Namen überein, sofern vorhanden Kein Tag im Tag Der Klassenauswahlstil wird angewendet und der Inhalt dieser Beschriftung wird entsprechend dem Beschriftungsauswahlstil angezeigt. Dieser Stil wird automatisch angewendet, wenn ein Tag mit demselben Namen definiert wird.

Beispiel:

p{font-color:#6ec;}

Der e388a4556c0f65e1904146cc1a846bee-Tag wird in der Farbe #6ec angezeigt.

ID-Selektor: Der Name von

ist eine Kombination aus „#“ und einer Zeichenfolge. Hier ist „#“ das Symbol des ID-Selektors Ein Tag ist Wenn der Wert des ID-Attributs mit dem Zeichen nach „#“ übereinstimmt, wird dieser Stil auf dieses Tag angewendet. Dieser Stil gilt für Tags, deren ID-Attributwert mit dem Zeichen nach # übereinstimmt.

Beispiel:

#idname{font-size:26px;}
<p id=”idname”>ID样式</p>

Es wird nicht empfohlen, dass zwei beliebige Tags im selben Seitendokument denselben ID-Attributwert haben, also in Webdokumenten, die Webstandards entsprechen, den ID-Stil entspricht nur einem Etikett. Wenn es mehrere Tags gibt, die denselben Stil wie dieser Stil verwenden, verwenden Sie zum Definieren des Stils den Klassenselektor anstelle des ID-Selektors.

3. Level-Selektor:

(Dies wird im Lehrbuch als abgeleiteter Selector bezeichnet, und Level-Selektor ist mein eigener Name)

Das entsprechende Tag für diesen Stil wird automatisch angewendet.

Siehe die Beispiele unten für Benennungsmethoden.

Um das Verständnis zu erleichtern, wird die Verschachtelung der folgenden Tags in der folgenden Form geschrieben:

<p>
<img />
<span>
a
<strong>
b
</strong>
c
</span>
</p>

Diese Tags sind ineinander verschachtelt, und die Tags img und span sind es eingebettet in das p-Tag, und das starke Tag ist in das span-Tag eingebettet. Das img-Tag, das span-Tag und das starke Tag können als untergeordnete Tags des p-Tags und des img-Tags und des span-Tags bezeichnet werden Das Tag kann als Unter-Tag des p-Tags bezeichnet werden. Das starke Tag ist ein untergeordnetes Tag des span-Tags und umgekehrt ist es das übergeordnete Tag oder übergeordnete Tag. Beachten Sie, dass das starke Tag kein untergeordnetes Tag von p, sondern ein untergeordnetes Tag von p-Tag ist.

Dann schauen wir uns zwei Beispiele an, um diesen Selektor zu veranschaulichen:

Beispiel 1:

<p><img><span>a<strong>b</strong>c</span></p>
p span{font-color:#038;}

Ein solcher Selektor bezieht sich auf das im p-Tag eingebettete untergeordnete Tag. Der Stil des Span-Tags.

p strong{font-color:#865;}

Ein solcher Selektor bezieht sich auf den Stil des untergeordneten Tags strong, der im p-Tag eingebettet ist

p span strong {font-color: #921;}

Dies bezieht sich auf den Stil des untergeordneten Tags strong des untergeordneten Tags span tag des Tags p.

Hinweis: Auf diese Weise kann jedes Tag auf niedrigerer Ebene definiert werden. Wie in diesem Beispiel gezeigt, wird dieser Stil nicht angewendet, wenn das Dokument andere Span-Tags enthält, die keine untergeordneten Tags des p-Tags sind. Das Gleiche unten.

Beispiel 2:

<p class=”abc”><img><span>a<strong>b</strong>c</span></p>

kann auch so definiert werden:

.abc span{font-color:#038;}
.abc strong{font-color:#865;}
.abc span strong{font-color:#921;}

Dies bezieht sich auf den Stil des untergeordneten Tags des Tags mit angewendetem Stil abc .

Beispiel 3:

#abc{}
<p id=”abc”><img><span>a<strong>b</strong>c</span></p>

Wenn der ID-Stil definiert ist und eine Tag-ID diesen Attributwert verwendet, kann er auch so definiert werden:

#abc span{font-color:#038;}
#abc strong{font-color:#865;}
#abc span strong{font-color:#921;}

Pseudoklasse: Führt nur mehrere Stildefinitionsmethoden von Status-Pseudoattributen von Hyperlinks ein.

Dieser Stil wird automatisch auf das Tag a vor dem Pseudoattribut angewendet.

a:link{}Der Stil des Hyperlinks, wenn er nicht besucht wird.

a:active{}Der Stil, wenn die linke Maustaste auf dem Hyperlink gedrückt, aber nicht losgelassen wird.

a:hover{}Der Stil, wenn die Maus über den Hyperlink fährt.

a:visited{}Der Stil des Hyperlinks, nachdem er besucht wurde.

* Selektor:

Der durch diesen Selektorstil definierte Name ist nur ein Platzhalter „*“, der sich auf alle Tags bezieht. Mit anderen Worten, alle Tags wenden diesen Stil automatisch an.

*{}

So verwenden Sie Stile

Wenn der Browser ein Stylesheet liest, formatiert er das Dokument entsprechend dem Stylesheet. Es gibt drei Möglichkeiten, ein Stylesheet einzufügen:

Externes Stylesheet

Ein externes Stylesheet ist ideal, wenn Stile auf viele Seiten angewendet werden müssen. Mithilfe externer Stylesheets können Sie das Erscheinungsbild Ihrer gesamten Website ändern, indem Sie eine Datei ändern.

841d69de86aa247c0cee69de4ff4794e definieren.

<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>

Inline-Stile

Wenn spezielle Stile auf einzelne Elemente angewendet werden müssen, können Sie Inline-Stile verwenden. Die Verwendung von Inline-Stilen erfolgt über die Verwendung des Stilattributs im entsprechenden Tag. Stileigenschaften können beliebige CSS-Eigenschaften enthalten. Das folgende Beispiel zeigt, wie Sie die Farbe und den linken Rand eines Absatzes ändern.

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

【Verwandte Empfehlungen】

1. Kostenloses HTML-Online-Video-Tutorial

2. HTML-Entwicklungshandbuch

3.php.cn Original-HTML5-Video Anleitung

Das obige ist der detaillierte Inhalt vonGrundkenntnisse der Webseitenerstellung (HTML) (3) HTML+CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!