Heim >Web-Frontend >HTML-Tutorial >Wie verwende ich das Klassenattribut des HTML-Span-Tags? Hier finden Sie eine detaillierte Erklärung des Klassenattributs
Wie verwende ich das Klassenattribut des HTML-Span-Tags? Hier finden Sie eine detaillierte Erklärung des Klassenattributs
- 寻∝梦Original
- 2018-08-28 13:54:3531489Durchsuche
Dieser Artikel informiert Sie hauptsächlich über die Verwendung des Klassenattributs des HTML-Span-Tags. Dies muss in Verbindung mit dem CSS-Stil verwendet werden. Jetzt kann ich über die Grundlagen des CSS-Stils sprechen alles einfach. Werfen wir jetzt einen Blick auf diesen Artikel
Werfen wir zunächst einen Blick auf die Bedeutung des Klassenattributs des HTML-Span-Tags:
span in Englisch bedeutet span, aber in der Webseitenproduktion ist es ein vollständiges Tag des HTML-Tags:
wird verwendet, um Inline-Elemente im Dokument zu kombinieren.
Klasse wird verwendet, um den Stil von Etiketten in HTML zu definieren und kann wiederverwendet werden. Sie kann die Länge, Breite, Höhe, Hintergrundfarbe usw. für verschiedene Etiketten definieren...
Für Beispiel: , wobei main der Klassenname ist und mit „.“ in CSS definiert ist
Suchen Sie nach unten für die Entwicklung:
Hier ist ein Beispiel:
<p><span>some text.</span>some other text.</p>
Das Beispiel wird hier erklärt:
Wenn Sie keine Stile auf Spannen anwenden, wird der Text in Das Span-Element weist keinen visuellen Unterschied zu anderem Text auf. Dennoch fügt das span-Element im obigen Beispiel dem p-Element zusätzliche Struktur hinzu.
Sie können ID- oder Klassenattribute auf Spans anwenden, was eine entsprechende Semantik hinzufügen und die Anwendung von Stilen auf Spans erleichtern kann.
Es ist möglich, entweder Klassen- oder ID-Attribute auf dasselbe -Element anzuwenden, es ist jedoch üblicher, nur eines davon anzuwenden. Der Hauptunterschied zwischen den beiden besteht darin, dass die Klasse für Gruppen von Elementen (ähnliche Elemente oder als eine bestimmte Art von Elementen verstanden werden kann) verwendet wird, während die ID zur Identifizierung einzelner und eindeutiger Elemente verwendet wird.
Tipp: Möglicherweise ist Ihnen aufgefallen, dass einige Texte auf der W3School-Website einen anderen Stil haben als andere Texte. „Tipps“ sind beispielsweise in kräftigem Orange dargestellt. Obwohl es viele Möglichkeiten gibt, diesen Effekt zu erzielen, lautet unser Ansatz: Verwenden Sie den „Hinweis“, um das Span-Element zu verwenden, und wenden Sie dann die Klasse auf das übergeordnete Element des Span-Elements, also das p-Element, an, damit Sie es anwenden können span zum untergeordneten Element dieser Klasse Entsprechender Stil.
Dies ist der Code in HTML:
<p class="tip"><span>提示：</span>... ... ...</p>
Dies ist der Code in CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}Das ist es, a Einfache CSS-Attribute in Verbindung mit der Anwendung von Span-Tags können die Anwendung eines Tags auf andere Tag-Elemente ermöglichen. Dies ist einer der Vorteile von CSS-Stilen und ist bequem zu verwenden.
Hier ist ein weiteres vollständiges Klassenbeispiel eines HTML-Span-Tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
<style>
span.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<span class="intro">标题 1</span>
<p>段落。</p>
<p class="important">注意：这是一个很重要的段落。 :)</p>
</body>
</html>Soweit Sie dem Bild entnehmen können, handelt es sich auch hier um eine sehr einfache Webseite mit Mit einigen CSS-Stilen können Sie den gesamten Stil korrigieren. Ändern Sie beispielsweise die Schriftfarbe in Blau.
Genau wie auf dem Bild:
Okay, das Obige ist eine Einführung in das Klassenattribut des HTML-Span-Tags. Wenn Sie Fragen haben, stellen Sie diese bitte unten.
【Empfehlung des Herausgebers】
Wie schreibe ich einen relativen Pfad für das Basis-Tag in HTML? (Nutzungsanweisungen enthalten)
Das obige ist der detaillierte Inhalt vonWie verwende ich das Klassenattribut des HTML-Span-Tags? Hier finden Sie eine detaillierte Erklärung des Klassenattributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!