Web-Frontend
CSS-Tutorial
Analyse des Unterschieds und der Verwendung zwischen Klasse und ID in CSS
Analyse des Unterschieds und der Verwendung zwischen Klasse und ID in CSS
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 „
I am a class example
“ 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 ---
Ich bin ID-Beispiel
.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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
