Ein Kaskadenstilblatt ist eine Sprache, mit der die HTML -Sprache Effekte verleiht. Ohne CSS ist HTML irgendwie nicht in der Lage, seinen Inhalt so anzuzeigen, wie die Webseite sein soll. Mit anderen Worten, beide Sprachen sind für die Entwicklung und Gestaltung von Webseiten verantwortlich. In diesem Artikel werden wir eine Eigenschaft von CSS erklären, die dafür verantwortlich ist. Diese Abmessungen umfassen rechts, unten, oben und linke Eigenschaften von Inhalten wie Text oder Bild usw.

Um die Arbeit von Inset -Eigenschaften zu erklären, haben wir einige grundlegende Beispiele im Texteditor verwendet, indem wir Inline- und interne CSS verwenden. Die grundlegende Syntax, die für die Einschubeigenschaft verwendet wird, lautet:

Es ist nicht notwendig, alle Werte in Pixel zu nehmen, % können alternativ verwendet werden. In ähnlicher Weise ist die Reihenfolge für die Dimension nicht angegeben. Es kann geändert werden.

Beispiel 1:

Um die Funktionsweise der CSS -Inset -Eigenschaft zu erläutern, werden wir einige grundlegende HTML -Inhalte erstellen, um eine Beispiel -Webseite zu bilden. Ohne zu stylen, wofür die einfachen HTML -Tags verantwortlich sind, wird dies aus der Ausgabe ersichtlich. Dies geschieht mit der Überschrift

Ein einfacher mutiger Text und ein Absatz, der im Div erwähnt wird. Alle diese Tags befinden sich im Tag des Zentrums. Dieses Tag wird den gesamten Inhalt von HTML auf die Mitte ausrichten. Diese Art von Styling ist Inline -CSS.

Speichern Sie den Code mit der HTML -Erweiterung und öffnen Sie ihn im Browser. Sie werden sehen, dass eine statische Webseite nur mit dem Text als Überschrift und Absatz gebildet wird.

Jetzt werden wir den oben genannten HTML -Tags interne CSS hinzufügen. Alle Tags sind gleich, haben aber eine zusätzliche Klassenerklärung.

Erstens werden wir eine Überschrift schaffen. Dann der kühne Text. Gib eine Pause
. Dieses Tag ist dafür verantwortlich, in die nächste Zeile zu springen und einen leeren Raum zwischen dem einfachen Text und dem Div zu bilden. Ein Div -Tag wird verwendet, um einen DIV -Container zu erstellen, um andere Inhalte von HTML zu speichern (wie Text, Bilder usw.,) wo ein Absatz deklariert wird. Der Klassenname 'One' im Absatz wird so erwähnt, dass auf alle im Stilblatt deklarierten Effekte auf diesen Absatz zugegriffen und angewendet werden.

1

Schließen Sie das Div -Tag und das Mitteletikett. Im Abschnitt über den Kopf verwenden wir ein Titel -Tag, um der Website einen Namen zu geben. Dieser Titel wird auf der Registerkarte des Browsers angezeigt.

Verwenden Sie das Style -Tag. Verwenden Sie in diesem Tag einen Stil für die Überschrift. Wir haben eine Schriftfarbe auf den Übergangstext angewendet. Dies ist ein internes CSS. In ähnlicher Weise wird DIV verwendet, um Auswirkungen darauf anzuwenden. Erstens ist die Hintergrundfarbe des DIV eingestellt. Dann werden die für die Größe des DIV notwendigen Abmessungen hinzugefügt, um einen Effekt zu bilden. Diese Abmessungen umfassen Breite und Höhenwerte in Pixel.

Nachdem wir diese Effekte angewendet haben, haben wir eine Klasse erstellt. '.eins ', dessen Name im Absatz -Tag erwähnt wurde. Die Klasse wird zu Beginn mit einem Punkt deklariert, der sie als Klasse angibt.

Die Klasse und die IDs in HTML -CSS werden gebildet, um das Styling auf den HTML -Inhalt anzuwenden. Durch die Verwendung dieses Mechanismus können wir uns auf das Inline -CSS -Styling enthalten, das den gesamten Code chaotisch macht. Während das interne CSS den Stilcode leicht verständlich macht und den Code kurz macht. Wir müssen diese Klasse- und IDS -Namen von CSS nur hinzufügen. In diesen spezifischen HTML -Tags, bei denen wir die in der Klasse oder in der IDS genannten Effekte anwenden möchten, werden in internem CSS erwähnt.

Zurück zum '.Eine Klasse, in der Einschubeigenschaft für den Absatz, haben wir 4 Werte in Pixel verwendet. Die Werte können auch in Prozent erwähnt werden. Der Einschubwert enthält alle 4 oberen, rechten, unten und linken Werte, damit der Absatz im Div -Container gebildet werden soll.

1 2 3 4 5

.eins Einschub: 10px 40px 30px 0px;

Diese 4 Werte sind die Randwerte des Absatztextes, da diese Werte den Text innerhalb der Div ausrichten. Die Hintergrundfarbe wird auch dem Absatz gegeben. Alle Einschubwerte der Ausrichtung sind für den Text nur im Div.

Schließen Sie alle CSS und Head -Tags und speichern Sie die Datei. Wenn wir diese Datei im Browser ausführen, werden Sie feststellen, dass all diese Effekte, die auf den HTML -Körperinhalt angewendet werden, insbesondere im Abschnitt Absatz angewendet werden. Ich habe den Absatz die Hintergrundfarbe hinzugefügt, um die Auswirkungen von Einschubwerten zu zeigen. Alle 4 Einschubwerte werden auf den Absatztext angewendet.

Beispiel 2:

Span ist auch eine Art Div -Behälter, der meist Text darin trägt. Diese beiden HTML -Inhaltsdiven und Spannweiten werden durch interne CSS gestylt. Also werden wir zuerst den Stilabschnitt näher erläutern. Der Div -Behälter wird mit der Hintergrundfarbe, der Höhe und der Breite und der Schriftfarbe angewendet. Dieser CSS -Stil erzeugt ein DIV mit einigen Effekten.

Jetzt die Klasse “.Beispielexplosion “. Auf diese Klasse wird der Span -Text nur innerhalb der DIV zugegriffen. Das CSS dieser Klasse enthält einen Schreibmodus für den vertikalen Text, damit der Text weniger Platz belegen kann. Dann wird die Einschubeigenschaft auch entsprechend festgelegt. Alle Einschubwerte in Pixeln werden bereitgestellt, um den Grenzabstand zwischen dem Text und den Grenzen von Div aufrechtzuerhalten.

1 2 3 4 5 6 7

.Beispielextext Schreibmodus: vertikal-rl; Position: absolut; Einschub: 40px 50px 30px 60px; Hintergrundfarbe: #F8FC08;

Nach dem Kopfabschnitt enthält der Körper nur das DIV -Tag und ein Spann -Tag im Div -Tag -Körper.

Speichern Sie den Code und führen Sie die Datei aus. Sie sehen. Die Einschubwerte werden genau angezeigt, um den darin enthaltenen Text zu beheben.

Wenn wir nun einige Änderungen vornehmen, indem wir die Einschubwerte so ändern, dass wir nur 2 Werte des Einschubs anstelle von 4 verwenden, während alle anderen Werte gleich bleiben, was ist das resultierende Bild, dann wird das resultierende Bild sein?

1 2 3 4

.Beispielextext Einschub: 4px 8px;

Wir haben Set 4 und 8px. Die resultierende Webseite enthält den Div und den Text, der den Platz in der Nähe der DIV hat. Dies liegt daran.

Abschluss:

Die CSS -Einsetzungseigenschaft wird verwendet, um der Dimension des HTML -Inhalts gemeinsam Werte hinzuzufügen. Um dieses Konzept zu erläutern, haben wir zunächst einen Überblick über HTML und CSS und die Typen gegeben, die in diesem Artikel verwendet werden. Die Inset -Eigenschaft hilft dem Benutzer dabei, dem inneren Inhalt der Außenseite eine Marge hinzuzufügen, indem sie entweder alle 4 Dimensionen gemeinsam oder durch Beseitigung eines Wertes aus der Eigenschaft haben. Darüber hinaus werden zwei Beispiele diskutiert, um die Funktion und Arbeit von Inset -Eigenschaften auf einer Webseite auszuarbeiten.