CSS zuerst vom Typ

Ein Kaskadenstilblatt verfügt über eine Eigenschaft. HTML und CSS werden beide eine wichtige Rolle bei der Implementierung dieses Phänomens spielen.

Wie funktioniert die erste Art von Immobilien in CSS??

Diese Eigenschaft funktioniert so, dass der Inhalt, auf den wir einen bestimmten Effekt anwenden möchten. Es greift automatisch auf den Inhalt zu, der beim ersten Mal im Code deklariert wird. Die grundlegende Syntax für diese Eigenschaft lautet:

HTML Content Tag: Erst von Typ
// Effekte, die Sie anwenden möchten.

Warum verwenden wir den ersten Typ in CSS??

In CSS können wir unterschiedliche Auswirkungen auf den HTML -Inhalt anwenden. Einer der wichtigsten und wichtigen Ansätze zur Anwendung von Effekten auf die HTML -Tags sind die internen, inline- oder externen CSS. Das Inline -CSS ist in den Tags geschrieben, was bedeutet, dass sie nur verwendet wird, wenn ein Effekt auf das Tag speziell angewendet wird. Während intern interne und externe CSS verwendet werden, wenn die Klassen und IDs, die wir im Stylesheet verwenden.

Im Fall von "ERSTE-VON-TICHT" müssen wir keine Klassen oder IDs verwenden. Diese Eigenschaft wird verwendet, wenn Sie ein HTML -Tag in einer wiederholten Häufigkeit verwenden möchten, aber Sie möchten den Effekt nur auf das zuerst angezeigte Tag anwenden möchten. Diese Eigenschaft hat den Prozess der Anwendung von Effekten auf das Tag im Vergleich zu Inline -CSS erleichtert. Hier schreiben wir nur ein einfaches Code -Stück zu Beginn im Style -Tag, anstatt jedes HTML -Inhalts -Tag zu finden und das Style -Tag mit Effekten darin zu erwähnen.

Beispiel 1: Erstens Typ im Absatz und Überschrift

Diese Eigenschaft des ersten Typs wird einfach auf den Absatz des HTML -Inhalts angewendet.

Zunächst wird die Hintergrundfarbe der Webseite festgelegt. Es ist eine zusätzliche Eigenschaft, die nur verwendet wird, um die Ausgabe attraktiver zu machen. Eine Überschrift wird zusammen mit a deklariert

Überschrift Tag. Auch hier wird hier eine neue Überschrift verwendet. Diesmal geht es auf 2

. Dann wird ein einfaches Absatz -Tag verwendet. In den Eröffnungs- und Schließungsetiketten des Absatzes haben wir einen Dummy -Beispieltext hinzugefügt. Eine neue Überschrift

wird hinzugefügt, auf die erneut ein neues Absatz -Tag folgt. Dies ist die Hierarchie oder die Abfolge aller HTML -Inhalte, die wir verwendet haben:

…

…

…

…

…

HTML -Körpercode

Dieser CSS -erste Typ wird auf einige dieser HTML -Tags nur auf ihnen angewendet, die zuerst erschienen sind. Dies hilft dem Benutzer sicherlich, die Tags für die ersten Come zu identifizieren.

HTML CSS -Code

Nach dem HTML -Körper müssen Sie im Kopfabschnitt des HTML -Code CSS hinzufügen. In der Kopfposition haben wir unserer Seite einen Titel gegeben. In der Stiletik. Wir haben dem Absatz Farbe hinzugefügt und den Schriftstil iautalisiert.

P: Erst von Typ
Farbe Rot;
Schriftstil: kursiv;

Weitere Überschrift 3

wird mit einer gelben Farbe angewendet und der Schriftstil wird ausgewählt.

Schließen Sie alle Tags und speichern Sie den Code mit einer HTML -Erweiterung, um eine HTML -Webseite auf dem Browser zu erstellen. Ansonsten der '.Die Erweiterung der TXT 'Erweiterung wird nur Text bilden, die auf der Website angezeigt werden, wenn Sie die Datei im Webbrowser öffnen.

Ausgang

Bei der Ausführung der Datei werden Sie feststellen.

Beispiel 2: CSS First of Type in Beschreibungsliste

In HTML wird eine Beschreibungsliste verwendet, um den HTML -Inhalt genau wie eine einfache nicht ordnungsgemäße Liste zu enthalten. Erstens sind dies einige grundlegende Terminologien der Beschreibungsliste, die im Beispielcode verwendet werden:

• ist für die Beschreibungsliste.

• Dieses Tag ist für die Definition des deskriptiven Begriffs oder des Namens vorgesehen.
• Es wird verwendet, um jeden genannten Begriff zu beschreiben.

Jetzt werden wir sehen, wie es im HTML -Körpercode funktioniert. Im Körper wird eine Überschrift hinzugefügt. Danach starten wir die Beschreibungsliste mithilfe der Verwendung

Tag und dann zwei

werden verwendet. In beiden Begriff Tags

, Wir haben 3 Beschreibungen der Begriffe verwendet

.Dieses Beispiel zeigt das Gemüse und Früchte als DT und die Namen als

. Ein kleiner Code ist unten geschrieben.

Gemüse:

1. Tomaten

Schließen Sie danach alle Tags und bewegen Sie sich in Richtung des CSS -Teils.

HTML -Körpercode

Sobald Sie mit dem HTML -Teil im Style -Tag fertig sind, wenden Sie einen Effekt auf die

Tag mit dem Schriftgewicht oder Stil als mutig.

Dt
Schriftdicke: fett;

Als

Tags sind zwei, wir haben die erste Eigenschaft nicht erwähnt, dieser Effekt wird auf beide angewendet

Werte.

Alle Begriffe, die geschrieben werden als

erhalten einen Polsterabstand zwischeneinander. Wir haben also einfach den Namen "DD" geschrieben, um diesen Effekt auf alle DDs anzuwenden.

Dd
Rand: 3px;

HTML CSS -Code

Wir möchten jedoch nur einen Grenzeffekt auf die DD anwenden, die zuerst unter allen 6 erscheint <

Stichworte. Wir werden diese CSS -Eigenschaft also verwenden. Auch der Hintergrundeffekt wird dem hinzugefügt

Tag mit der Grenze.

DD: Erst von Typ
Grenze: 2px festes Lila;
Hintergrundfarbe: LightGreen;

Ausgang

Bei der Ausführung sehen Sie das die erste

wird mit einer Hintergrundfarbe und einem Rand hervorgehoben.

Notiz
Im HTML -Körper gibt es keine Kriterien im Tag oder im Höhepunkt zu erwähnen, um zu zeigen, dass ein bestimmtes Tag das erste ist oder dass wir einen Effekt auf ein bestimmtes Tag anwenden möchten. Sie müssen nur sicherstellen. Und die Reihenfolge des HTML -Inhalts sollte beim Schreiben des Codes festgestellt werden.

Abschluss

In diesem Artikel haben wir versucht, den Benutzer mit einem wichtigen Aspekt des CSS-Designs mit der erstklassigen Eigenschaft zu unterstützen. Diese Eigenschaft ist nützlich, wenn Sie die Auswirkungen auf den allerersten deklarierten HTML -Inhalt unter der Anzahl der gleichen Inhaltstypen anwenden müssen. Zunächst begannen wir mit der grundlegenden Funktionsweise des Effekts vom Typ und der Notwendigkeit dieser Eigenschaft in der Webseite. Wir haben zwei Beispiele erklärt, darunter die Überschrift und die Absatzauswahl im ersten Beispiel. Während das zweite Beispiel die Beschreibungsliste enthält, die durch diese CSS -Eigenschaft beeinflusst werden soll.