Heim > Artikel > Web-Frontend > Analyse des Unterschieds und der Verwendung zwischen Klasse und ID in CSS
Analyse des Unterschieds und der Verwendung zwischen Klasse und ID in CSS
- 不言Original
- 2018-06-15 09:23:011862Durchsuche
Dieser Artikel stellt hauptsächlich die Analyse des Unterschieds und der Verwendung von Klasse und ID in CSS vor. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.
Erstellt mit p CSS In Xhtml-Webseiten werden häufig Klassen und IDs zum Aufrufen von CSS-Stilattributen verwendet. Wann sollten wir also Klasse und wann ID verwenden? Erfahren Sie mehr über die grundlegenden Attribute und die Verwendung von CLASS und ID
Wir verwenden normalerweise bei der Verwendung von p CSS zum Erstellen von XHTML-Webseiten häufig Klasse und ID, um CSS-Stilattribute auszuwählen und aufzurufen. Für Anfänger, die CSS lernen, sind Klasse und ID möglicherweise vage. Gleichzeitig wissen sie nicht, wann sie Klasse und wann sie verwenden sollen und welche Verwendungen und Einschränkungen sie haben. Als nächstes erfahren wir mehr über die grundlegenden Eigenschaften und die Verwendung von CLASS und ID.
Klasse wird in Programmen „Klasse“ genannt, und in der geschriebenen Sprache von CSS wird sie auch „Klasse“ genannt. Im CSS-Stil wird es mit Kleinbuchstaben „Punkt“ und „.“ benannt, z. B.: .css5{attribute: attribute value;}, und auf der HTML-Seite wird class="css5" verwendet, um den Namen auszuwählen CSS wird auch CSS-Selektor genannt. Zum Beispiel: .css5{attribute: attribute value;} Der Selektor wird in HTML als „634316e925df670a1efce184bcd76f27I am a class example94b3e26ee717c64999d7867364b1b4a3“ bezeichnet. Wenn Sie nicht wissen, wie man CSS zitiert , Sie können mehr darüber erfahren CSS-Referenz.
Und Klasse (Klasse) kann dieselbe Klasse unzählige Male auf derselben HTML-Seite aufrufen. In diesem Beispiel können Sie „css5“ unzählige Male auf der entsprechenden Webseite aufrufen. Dies zeigt auch, dass Klasse im Allgemeinen zum Aufrufen vorkonfigurierter Attribute in CSS verwendet wird. Wenn es hier beispielsweise ein vorkonfiguriertes Attribut wie „.class01{attribute: attribute value;}“ gibt, kann es wie der Aufruf einer Funktion verwendet werden ohne dass ein „Klassen“-Attribut wiederholt auf der Webseite konfiguriert werden muss, Sie müssen nur eine Klassenauswahl schreiben und können die Auswahl mit derselben CLASS-Klasse an einer beliebigen Stelle auf derselben Seite aufrufen.
ID stellt die Identität des Tags dar und wird in JS-Skripten verwendet. Wenn JS die Attribute eines Tags ändern möchte, verwendet JS den ID-Namen als eindeutige Kennung des Tags. Mit anderen Worten: Die ID ist lediglich die Kennung des Seitenelements, auf die von anderen Elementskripten usw. verwiesen werden kann. Wenn Ihre Seite zwei IDs enthält, weist die JS-Effektfunktion einen Logikfehler auf und Sie wissen nicht, welche ID Sie zum Ändern der Tag-Attribute verwenden sollen. Die ID in CSS ist nicht unbedingt für JS festgelegt, aber dieselbe ID kann nur einmal auf der Seite erscheinen und ist eindeutig. Obwohl wir vielleicht gerade erfahren haben, dass p+CSS-Enthusiasten dieselbe ID mehrmals auf einer Seite aufrufen können, aber immer noch kein Seitenverwirrungsfehler auftritt, müssen wir im Interesse des W3C und verschiedener Standards auch die Eindeutigkeit der ID in a beachten Seite. Um Probleme mit der Browserkompatibilität zu vermeiden.
p Wie verwende ich die ID auf der CSS-Seite?
Normalerweise benennen wir beim Definieren von CSS-Stilen den ID-Namen beginnend mit „#“, wie zum Beispiel: #css5{attribute: attribute value;} Dies ähnelt auch ein wenig der Definition einer Klasse, außer dass die Klasse beginnend benannt wird mit einem Kleinbuchstaben „.“ und die ID wird beginnend mit „#“ definiert. Wie verwende ich die ID? Die Verwendung von ID in CSS ist dieselbe wie die Verwendung von Klasse. Ersetzen Sie lediglich die Klasse durch die ID. Zum Beispiel: Definieren Sie die ID im CSS-Stil --- #css5{height:25px;width: 200px;}, rufen Sie die ID auf --- 7125bcc5ac010f7937a4a183e9feac26Ich bin ID-Beispiel94b3e26ee717c64999d7867364b1b4a3.
Als nächstes werfen wir einen Blick auf die vollständigen CLASS- und ID-Beispiele:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>p CSS中CLASS与ID实例 - -p+CSS-www.pcss5.com</title>
<style>
.css5{ width:100px; height:100px; border:1px solid #000; float:left; }
.css5_class{ background:#FFF;} /* 背景白色 */
#css5_id{ background:#FF0000;} /* 背景红色 */
</style>
</head>
<body>
<p class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</p>
<p class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</p>
</body>
</html>Als nächstes analysieren wir das obige Beispiel: class="css5 css5_class" Warum ist das so? Dies entspricht dem Aufruf der ausgewählten Klassen class css5 und css5_class. class="css5" id="css5_id" Hier wählen wir auch die Klassenklasse :css5 und id :css5_id.
Auf dieser Seite werden CSS-Instanzen, CLASS-Klassen bzw. IDs erläutert. Ich glaube, Sie werden in der Lage sein, sie genau zu verstehen und zu unterscheiden und flexibel zu sein. Besonderer Hinweis: Achten Sie bei der Benennung von ID, Klassen-ID und Klasse besonders auf die Groß-/Kleinschreibung. Beginnen Sie am besten nicht mit Chinesisch, um CSS-Klassennamen zu benennen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
So steuern Sie das Anzeigen und Ausblenden von DIV-Ebenen mit CSS
So strecken Sie den Hintergrund Bild mit CSS-Padding, um wiederholte Anzeige zu vermeiden
Das obige ist der detaillierte Inhalt vonAnalyse des Unterschieds und der Verwendung zwischen Klasse und ID in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!