CSS URL
Beispiel 1:
Wir beginnen mit unserem ersten Beispiel, indem wir eine neue Datei in der Software eröffnen, nämlich Visual Studio Code. Wenn wir eine neue Datei im Visual Studio -Code erstellen, haben wir die Wahl, die Sprache auszuwählen, und wir wählen HTML. Als nächstes müssen wir den HTML -Code erstellen. Durch Eingabe von "!Und dann drücken Sie "Enter", Visual Studio Code können uns automatisch die grundlegenden Tags erwerben. Wir geben den Link zur CSS -Datei im HTML -Head -Tag an, daher verwenden wir die URL () -Funktion in CSS. Im Körper haben wir eine Überschrift und einen einfachen Absatz. Danach setzen wir einen „Div“ -Container ein. Wir speichern diese Datei und bewegen uns dann in Richtung der CSS -Datei. Schauen Sie sich nun den CSS -Code unten an.
Wir setzen das "Div" in diesem Code und fügen die Eigenschaft "Hintergrundbild" hinzu. Jetzt müssen wir das Bild für den Hintergrund festlegen. Zum Hinzufügen eines Bildes müssen wir die Funktion „url ()“ verwenden und den Pfad des Bildes geben, den wir als Parameter der Funktion „url ()“ hinzufügen möchten. Wir verwenden die Eigenschaft "Text-Align" und setzen sie auf "Zentrum". Stellen Sie dann die „Breite“ auf als „500px“ ein. Die "Höhe" ist "260px". Wir stylen auch die Überschrift, um die Ausgabe attraktiver zu machen. Wir setzen die „Farbe“, die die Farbe des Textes des Überschriftens definiert und für diese Eigenschaft „rot“ festgelegt hat. Die "Schriftfamilie" für den Text des Keulens ist "algerisch".
Wir haben auch einen Absatz in der HTML -Datei, daher wenden wir auch einige Eigenschaften auf diesen Absatz an. Wir setzen die Größe des Textes des Absatzes, indem wir die Eigenschaft "Schriftgröße" anhand der CSS-Eigenschaft verwenden und als "18px" festgelegt haben. Jetzt verwenden wir wieder die Eigenschaft "Farbe" für den Text des Absatzes und "Blau".
Wir erhalten diese Ausgabe, indem wir in der HTML -Datei „Alt+B“ drücken, oder Sie können die rechte Maustaste drücken und dann den "Standard -Browser öffnen" zum Erhalten der Ausgabe auswählen. In der Ausgabe sehen Sie, dass sich das Bild unterhalb der Überschrift und dem Text befindet. Wir fügen dieses Bild hinzu, indem wir den Pfad dieses Bildes in den Parameter von URL () einfügen.
Beispiel # 2:
Wir fügen in diesem Beispiel erneut die Überschrift "H2" und den Absatz "P" hinzu. Legen Sie dann das „Div“ darunter. Wir werden die URL () des Bildes in der Hintergrund-Image-Eigenschaft für diese DIV hinzufügen. Sie werden dies in der CSS -Datei sehen, wie wir den Pfad in der Funktion „URL ()“ hinzufügen.
Wir fügen nur das „Hintergrundbild“ in die „Div“ hinzu und platzieren die Funktion „URL ()“. Wir bieten den Weg des Bildes als „Myhouse“.PNG ”. Sie müssen den richtigen Weg in diesen Parameter „URL ()“ einfügen. Die „Breite“ dieses Bildes lautet "400px" und die "Höhe" ist "350px". Die Überschrift „Farbe“, die wir verwenden, ist "lila". Die "Schriftfamilie" der Überschrift ist "Times New Roman". Der Absatz "Schriftgröße" ist "20px" und "Farbe" ist "grün".
Die Ausgabe zeigt, dass nach der Überschrift und dem Absatz ein Bild vorhanden ist. Die andere Überschrift wird auf dem Bild angezeigt, wie in der CSS -Datei festgelegt.
Beispiel # 3:
Der HTML -Code für dieses Beispiel ist der gleiche wie wir in dem ersten Beispiel, in dem wir einen Absatz, eine Überschrift und einen leeren Div -Container haben, aber wir werden die verschiedenen Parameter der URL () -Funktion im CSS -Code verwenden.
Die "Höhe" für das "Div" beträgt "700px" und "500px" in seiner "Breite". Jetzt verwenden wir „Hintergrundbild“ und setzen zwei verschiedene URLs ein, in denen wir unterschiedliche Bilderpfade geben. Wir setzen die erste „URL“ und in den Parameter. Wir setzen „lächeln.JPEG ”als Weg des Bildes und dann eine weitere„ URL “, indem sie beide URLs mit", "," "".
Wir setzen „lächeln.JPEG ”als Parameter der zweiten URL. Anschließend haben wir die Eigenschaft „Hintergrund-Repeat“, die zum Festlegen der Wiederholung der Hintergrundbilder verwendet wird. Wir setzen es für beide Bilder auf "No-Repeat". Wir setzen auch die „Hintergrundposition“, die die Positionen beider Bilder festlegt. Wir platzieren „rechts“ für das erste Bild und „links“ für das zweite Bild. Für "H2" haben wir "Marron" für die "Farbe" der Überschrift. Die „Schriftfamilie“ der Überschriften ist „Times New Roman“ und im „Zentrum“ ausgerichtet. Die "30px", die wir für die "Schriftgröße" verwenden und die "Schriftfamilie" in "Algerian" ändern. Wir verwenden auch die Eigenschaft "Schriftgröße" für das "P" und es ist "25px". Wir setzen die "Farbe" des Absatzes als "RGB (37, 35, 35)", der als "grau" erscheint. Wir richten dies auch wie die Überschrift im „Zentrum“ aus.
Sie können zwei Bilder sehen, bei denen das erste Bild auf der linken Seite platziert ist und das zweite Bild auf der rechten Seite des Ausgangsbildschirms platziert ist. Wir setzen den Pfad beider Bilder in die URL als Parameter. Beide Bilder erscheinen also in der Ausgabe.
Beispiel Nr. 4:
Die HTML-Datei, die wir verwenden.
In dieser CSS-Datei wird das „Schriftart“ zum Angeben der benutzerdefinierten Schriftart verwendet. Es bietet uns die Möglichkeit, aus einer Vielzahl von Schriftarten auszuwählen. Wir setzen "Schriftfamilie" als "offene Sans". In der "SRC" dient die Funktion "lokal", um die Schrift vom lokalen System des Benutzers zu erhalten. Wenn es nicht in den „offenen Sans“ zu finden ist, wird die nächste Option überprüft, bei der wir die „URL“ platzieren,. Und es überprüft es im "WOFF2" -Format, falls verfügbar. Dann wird dies angewendet, aber wenn es nicht verfügbar ist, wechselt es zur nächsten „URL“. Wenn es in keiner Option verfügbar ist, wählt es die „Schriftfamilie“ aus, die wir unten beschrieben haben und die „ohne Serife“ ist.
Wir machen das alles, indem wir die „URL“ setzen. Dann, alle Bilder im DIV -Container mit der gleichen Methode, wie wir diskutiert haben, durch Platzierung des Pfades in die Funktion „URL“ und Einstellungen „Breite“ und „Höhe“.
Die Ausgabe zeigt, dass sich die Schriftfamilie der Überschrift und der Absatz ändert und auch ein Bild unten für all diese ist.
Abschluss
Wir haben dieses Tutorial vorgestellt, um Sie über die CSS -URL () -Funktion zu führen. Wir haben dieses Thema in einer tiefen Tiefe durchlaufen und verschiedene Beispiele untersucht, in denen wir diese „URL ()“ -Funktion im CSS -Code verwendet haben. Wir haben erklärt, dass wir diese URL () -Funktion zum Verknüpfen mit einer Ressource verwenden: Bild, Schriftfamilie usw. In diesem Tutorial haben wir auch besprochen, wie der Pfad als Parameter in dieser Funktion „URL ()“ hinzugefügt werden kann. Wir haben ein komplettes Tutorial für Sie erstellt, in dem wir den Code bereitgestellt haben, und diesen Code zusammen mit der Ausgabe ausführlich erläutert.