CSS -Sternchen
Syntax
*Eigentumswert
ODER
*Elternteil
Eigentumswert
Beispiel 1
Erstellen Sie die HTML -Datei und schreiben Sie Absätze und Überschriften in der HTML -Datei, damit wir diese mit dem CSS -Selektor "*" stylen können. In diesem Tutorial ist die Software, die wir zum Ausführen von Beispielen verwenden, Visual Code Studio. Wir öffnen also die HTML -Datei in diesem Visual Studio -Code und schreiben hier den HTML -Code. Wir geben auch den Code an. Diese Datei wird mithilfe der "gespeichert" gespeichert.HTML ”Dateierweiterung.
Sie sehen
"Tag und schließen Sie dann diese" Div ". Danach "haben wir einen weiteren Absatz"
"Das ist außerhalb des" ". Hier schließen wir den Körper und retten ihn. Dann gehen wir zu unserer CSS -Datei über.
CSS -Code
Hier erstellen wir unsere CSS -Datei und verwenden die “.CSS ”Dateierweiterung mit dieser Datei. Wir müssen diese Datei mit der HTML -Datei verknüpfen. Das gesamte Styling, das wir hier erwähnen, gilt also für die HTML -Datei, die wir zuvor erstellt haben.
Zuerst verwenden wir den "*" Selektor und verwenden dann verschiedene Stileigenschaften in den lockigen Klammern dieses "*" -Selectors. Wir verwenden die Eigenschaft „Hintergrundfarbe“ und haben die „gelbe“ Farbe für den Hintergrund dieser Seite ausgewählt. Dann haben wir die Eigenschaft "Farbe" und diese Eigenschaft "Farbe" verändert die Farbe des Textes in "lila". Es wird alle Textfarben geändert, die in der HTML -Datei in "lila" geschrieben sind. Verwenden Sie auch die Eigenschaft „Schriftfamilie“, die zum Ändern des Schriftstils verwendet wird, und setzen Sie sie auf „Times New Roman“ ein. Der gesamte Text wird in diesem Schriftstil geschrieben sein. Alle Style -Eigenschaften, die wir verwenden, gelten auf der vollständigen HTML -Seite, da wir "*" verwenden und wir keinen Namen mit diesem "*" erwähnen.
Ausgang
Wir erhalten diese Ausgabe, indem wir mit der rechten Maustaste auf die HTML-Datei klicken und "im Standardbrowser öffnen" auswählen. Die Ausgabe zeigt, wie dieser "*" -Sektor in CSS funktioniert.
Sie können beobachten, dass der gesamte Text in der Farbe „lila“ angezeigt wird und der gesamte Text in der Schriftstil „Times New Roman“ geschrieben ist und die gesamte Hintergrundfarbe „Gelb“ ist. Wenn wir also den "*" -Segektor verwenden, müssen wir ihn nicht separat auf jedes Element anwenden. Der "*" -Schiffektor nimmt alle Elemente der HTML -Datei und wendet den Stil auf alle an.
Beispiel 2
Wir haben Beispiel 2 und ändern den HTML -Code. Wir erstellen drei Absätze im „DIV“ und einen Absatz außerhalb des DIV in diesem gegebenen HTML -Code.
CSS -Code
In dieser CSS -Datei werden wir das „DIV“ mit dem „*“ -Asternisk erwähnen. Verwenden Sie dann die Styling -Eigenschaften für diese „Div“. Diese Stile gelten für alle Elemente der „Div“.
Wir verwenden „Div *“ und platzieren lockige Zahnspangen, in denen wir die Stileigenschaften verwenden. Hier verwenden wir "hellblau" als "Hintergrundfarbe" nur für die Divelemente. Dann ist das „Blau-Violett“ für die Farbe des Textes oder der Schriftart eingestellt. Ändern Sie auch den Schriftstil der Divelelemente in „algerisch“ mithilfe der Eigenschaft „Schriftfamilie“. Wir richten den Text der „Div“ -Anlemente im „Zentrum“ mit Hilfe von „Text-Align“ aus.
Ausgang
In dieser Ausgabe ist die Überschrift einfach. Es gibt keinen Stil für diese Überschrift, da diese Überschrift außerhalb des „Div“ geschrieben ist. Wir wenden das Styling nur auf die „DIV“ -Anlemente an. Jetzt wurden die nächsten drei Zeilen im „Div“ geschrieben. Der Schriftstil wird verändert, seine Schriftfarbe wird verändert und auch der Text in der Mitte platziert und der Hintergrund dieser Zeilen blau ist. Alle diejenigen Stile, die wir in unserer CSS -Datei verwenden. Der letzte Absatz ist auch einfach, da er auch außerhalb des „Div“ geschrieben ist.
Beispiel 3
Wir führen auch ein weiteres Beispiel aus.
In dieser HTML -Datei erstellen wir die Überschrift 1 mit dem “
" Schild; eine DIV -Klasse, die das "" "" "" "" "" Mit dem "" -Tag verwendet; Absätze mit dem “
" Schild; und auch eine Spanklasse, die „“ -Tag verwendet. Wir werden mit CSS verschiedene Stile auf „H1“, „Div“, „P“ und „Span“ anwenden.
CSS -Code
Zunächst verwenden wir nur den "*" Selektor, um die gesamte Hintergrundfarbe der HTML -Seite zu ändern. Die "rosa" Farbe wird als "Hintergrundfarbe" für die HTML-Seite ausgewählt. Dann verwenden wir "P" mit dem "*", sodass das gesamte Styling auf die in der HTML -Datei geschriebenen Absätze angewendet wird. Die „Hintergrundfarbe“ aller Absätze wird als „hellgrün“ Farbe festgelegt. Die Größe des im Absatz -Tags geschriebenen Textes wird in „Monospace“ gerendert, während wir die Größe des Absatztextes auf „Monospace“ setzen. Alle diese Stileigenschaften werden auf die Absätze angewendet.
Dann werden wir die Elemente der Klassenklasse mit dem "Spannwesen" mit dem "*" stylen. Die Hintergrundfarbe der Spannelemente ist „hellblau“ und der Schriftstil ist „kursiv“ und „fett“. Dann haben wir eine Div -Klasse und wir werden dies stylen. Wir ändern seine Hintergrundfarbe in „Gelb“. Die „Schriftgröße“ beträgt „130%“ für die Divelemente. Der gesamte Text des DIV-Elements wird in der Mitte gerendert, da wir "Text-Align" verwenden. Die "Schriftfamilie" dafür ist "algerisch". Das "H1" bleibt. Wir müssen also einen Stil auf diesem H1 anwenden. Die „Hintergrundfarbe“ der Überschrift 1 ist „orange“ und der Text dieser Überschrift 1 ist als „grün“ in Farbe eingestellt. Die Größe der Schriftart des Kopfes 1 ist "25px" und "zentral" ausgerichtet.
Ausgang
Die Ausgabe zeigt, dass die Überschrift unterschiedlich farblich ist und auch der Stil dieser Überschrift unterschiedlich ist. Wir verwenden zwei Div -Klassen und die Daten dieser beiden Div -Klassen sind im Styling gleich sind. Sie können sehen, dass es vier Absätze gibt und die Hintergrundfarbe dieser vier Absätze grün ist. Die Spanklassen sind im Stil gleich und die Hintergrundfarbe der Span -Klasse ist hellblau. Der gesamte Hintergrund ist der gleiche wie wir diese „Hintergrund-Color“ -Mobilie mit dem „*“ verwenden.
Abschluss
In diesem Tutorial haben wir die Verwendung des „*“ -Faskens in CSS gelernt. Wir haben untersucht, wie es alleine funktioniert und wie es funktioniert, wenn wir einen Namen mit diesem "*" -Sektor schreiben. Wir haben erfahren, dass dieser Sternchenwähler alle Elemente der HTML -Seite nimmt und den Stil auf all diese Elemente angewendet hat. Wir haben verschiedene Beispiele untersucht, in denen wir diesen "*" -Sektor in CSS verwendet haben und die Ausgabe all dieser Beispiele erzielt haben. Wir haben den HTML- und CSS -Code in diesem Tutorial zusammen mit den Ausgängen dieser Codes bereitgestellt.