Um anzugeben, wie ein HTML -Dokument aussehen wird, werden CSS -Stilblätter verwendet. Darüber hinaus gibt es drei Möglichkeiten, CSS -Styling -Eigenschaften zu schreiben, die Inline -CSS, eingebettete CSS und externe CSS -Stylesheets sind. Ein eingebettetes Stilblatt ist eines, das Stylesheet -Daten in ein HTML -Dokument mit dem Element integriert.

In dieser Beschreibung wird erörtert:

• HTML -Seitenstruktur
• So erstellen Sie ein CSS -Embedded Style Sheet?

HTML -Seitenstruktur

Eine HTML -Seite hat hauptsächlich zwei Abschnitte “Kopf" Und "Körper”. Der Kopfabschnitt enthält die Meta -Informationen zur Seite, während der Körperabschnitt die auf der Webseite sichtbaren Elemente wie Bilder, Listen, Tabellen, Überschriften und mehr umfasst.

Das CSS -Stilblatt ist im Kopfabschnitt innerhalb des Elements eingebettet, wie mit dem roten Pfeil hervorgehoben:

So erstellen Sie CSS eingebettetes Stilblatt?

Erstellen Sie in HTML zunächst ein DIV -Element mit dem Klassennamen “Inhalt”. In diesem Element hinzufügen

Element und Element, das den Attributen zugeordnet ist:

• src: Dieses Attribut wird verwendet, um den Pfad des Bildes anzugeben.
• Alt: Dieses Attribut gibt den alternativen Text an, der angezeigt wird, wenn ein Bild nicht geladen wird.
• Breite: Dieses Attribut wird verwendet, um die Breite des Bildes anzugeben.

Dann fügen Sie die hinzu
Tags zum Hinzufügen von Zeilenpausen und

Element mit der ID “para”Um der Webseite Inhalte hinzuzufügen:

LinuxHint School

Hallo Welt!

Stil alle Elemente

*
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;

Der "*"Wird verwendet, um alle auf das angewandten Elemente darzustellen"Schriftfamilie" Eigentum. Hier der Wert “Verdana, Genf, Tahoma, Sans-SerifWird bereitgestellt, um sicherzustellen, dass der nächste angewendet wird, wenn der erste Schriftstil nicht vom Browser unterstützt wird.

Stil "Inhalt" Divelelement

.Inhalt
Breite: 500px;
Höhe: 300px;
Polsterung: 5px;
Rand: Auto;
Padding-Links: 50px;
Hintergrundfarbe: #7db9e4;

Der ".Inhalt”Wird angegeben, um auf das DIV -Element mit dem Klasseninhalt zuzugreifen und die angegebenen Eigenschaften anzuwenden:

• “BreiteEigenschaft legt die Breite des Elements fest.

• “HöheDie Eigenschaftssätze/stellt die Höhe des Elements ein.
• “PolsterungDas Attribut enthält Platz um den Inhalt des Elements oder innerhalb des Elementrandes des Elements.
• “RandEigenschaft fügt Platz um das Element um.
• “Padding-LinksEigenschaft fügt den Platz links vom Inhalt des Elements hinzu.
• “HintergrundfarbeDie Eigenschaft legt die Hintergrundfarbe des Elements fest.

Stil „img“ Element

img
Übergang: alle 0.3s Leichtigkeit;

Das Element wird Übergang mit dem CSS angewendetÜbergangEigentum, wo "alle"Ist ein Übergangseffekt"0.3s"Bezieht sich auf die Übergangsdauer und"Leichtigkeit”Bezieht sich auf den Übergangseffekt mit einem langsamen Start, dann schnell und endet langsam.

Stil „IMG“ -Leelement auf dem Schwebe

.Inhalt img: Hover
Cursor: Zeiger;
Transformation: Perspektive (100px) Translate3D (50px, 20px, 20px);

Die für das Element auf Schwebe gelegenen Eigenschaften werden nachstehend erklärt:

• “Mauszeiger"Eigenschaft gibt den Maus -Cursorstil im Element an, wobei der Wert"Zeiger”Zeigt eine Cursorhand mit einem zeigenden Finger.
• Als Wert der “verwandeln”Eigentum, die“Perspektive (100px)Die Funktion wird verwendet, um den Abstand zwischen dem Benutzer und dem Objekt und der “anzugebenTranslate3d (50px, 20px, 20px)”Verlagert ein Element in die 3D -Ebene. Diese Parameter zeigen die X-Achse, die y-Achse und die Z-Achse an.

Stil "para" ID von "P" Element

#para
Schriftgröße: 25px;
Schriftdicke: fett;
Farbe: #3802CE;
Polsterung: 5px;

Der "#PARA”Wird verwendet, um mit dem ID -Absatz auf das Element zugreifen zu können und die folgenden Eigenschaften anzuwenden:

• “SchriftgrößeEigenschaft legt die Schriftgröße des Elements fest.
• “SchriftgewichtDie Eigenschaft setzt die Schriftgröße so dünn oder dick.
• “FarbeDie Eigenschaft wird verwendet, um die Schriftfarbe des Elements einzustellen/anzuwenden.

Hier ist die Ausgabe des oben genannten Code:

Aus dem gegebenen Ausgang kann beobachtet werden, dass das eingebettete Stilblatt erfolgreich angewendet wurde.

Abschluss

CSS-in-eingebettete Stilblätter eignen sich für Dokumente mit spezifischen Designanforderungen. Um ein eingebettetes Stilblatt zu erstellen, muss CSS -Eigenschaften innerhalb des Elements deklariert werden. Dieses Stilelement ist im HTML -Kopf -Tag angegeben. In diesem Beitrag haben wir die Methode gezeigt, um eingebettete CSS -Stilblätter mit einem Beispiel zu erstellen.