CSS Attr
In diesem Handbuch werden wir die ATTR () -Funktion in CSS untersuchen und diese Funktion verwenden, um den Wert abzurufen. Wir werden erklären, wie diese Funktion in CSS verwendet wird und wie sie den Wert in der Ausgabe an der gewünschten Stelle zurücksetzt. Wir werden hier einige Beispiele machen und dieses ATTR () -Funktionskonzept für Sie klar machen.
Beispiel 1
Wir müssen einen HTML -Code haben, um diese ATTR () -Funktion in CSS zu verwenden. Wir können diese ATTR () -Funktion in unserem CSS -Code verwenden, um die in HTML verwendeten Werte abzurufen. Die Software, mit der wir diese Beispiele in diesem Handbuch durchführen, ist der Visual Studio -Code. Wir öffnen eine neue Datei im Visual Studio -Code und wählen dann die Sprache in der Datei als HTML aus. Die erstellte Datei ist die HTML -Datei. Dann schreiben wir den HTML -Code in dieser Datei. Wenn wir diese Datei nach Abschluss des Codes speichern, wird diese Datei mit der “gespeichert.HTML ”Dateierweiterung.
Im HTML -Code erstellen wir eine Überschrift 1 mit der “
”. Dann verwenden wir das Tag "", in dem wir einen "Link" von "Google" erstellen und dann den "Google -Link" schreiben, der auf dem Bildschirm angezeigt wird. Schließen Sie dann das "" "Tag". Wir verwenden die ATTR () -Funktion auf der „href“ in CSS, sodass der Link mit dem Text angezeigt wird.
CSS -Code:
Hier erstellen wir die CSS -Datei. Wir können die Funktion attr () verwenden, um die Daten abzurufen. Wir müssen das verwenden “.CSS ”Dateierweiterung beim Speichern dieser Datei.
Das „H1“ repräsentiert die Überschrift, die wir in der HTML -Datei erstellt haben. Wir richten diese Überschrift mit dem „Text-Align“ auf die Mitte des „Bildschirms“ aus. Dann verwenden wir die „A: vor“. Wenn wir also die Funktion „attr ()“ verwenden, wird der gewünschte Wert angezeigt, den wir vor dem Inhalt abgerufen haben. Dieser „Inhalt“ definiert die Daten, die wir in der HTML -Datei mit der benutzerdefinierten Eigenschaft geschrieben haben. Der „Attr (HREF)“ erhält die Daten des „href“, nämlich der Link. Und stellt es vor dem Inhalt und platziert das "=>" nach dem "href".
Dann stylen wir das „A“, mit dem der Hyperlink in der HTML definiert wird. Wir setzen den „Schriftarten“ auf „kursiv“, sodass es im „italischen“ Stil auf dem Bildschirm rendern wird. Außerdem setzen wir die „Farbe“ auf „blau“. Diese Eigenschaft „Farbe“ definiert die Farbe der Schriftart. Die "Schriftgröße" ist auf "30px" eingestellt. Nach dem Verknüpfen und Speichern der HTML- und der CSS -Codes können wir die Ausgabe erhalten, indem wir auf der HTML -Seite „Alt+B“ drücken.
Ausgang:
Die Ausgabe des vorherigen Codes spiegelt sich im folgenden Bild wider:
Der Link, den wir im HTML -Code verwendet haben, wird hier angezeigt, da wir den „attr ()“ verwendet haben, um diesen Link abzurufen. Wir haben "vor" verwendet, sodass dieser Link vor dem Inhalt angezeigt wird. Hier ist der Inhalt "Google -Link". Der Wert, den wir abrufen möchten, ist der Link des Google, den wir im „HREF“ im HTML -Code gespeichert haben.
Beispiel #2
In diesem Beispiel verwenden wir dieselbe HTML -Datei. Aber wir werden einige Änderungen im CSS -Code vornehmen und die Funktion „attr ()“ erneut auf dem vorherigen HTML -Code verwenden.
Wieder ist die Überschrift in der „Mitte“ ausgerichtet. Wir verwenden die "Nachher" mit "A". Wenn also die Funktion „attr ()“ den Wert abruft, wird dieser Wert nach dem Inhalt angezeigt. Hier verwenden wir den "Inhalt", dann haben wir einen Pfeil "=>" und dann die Funktion "attr ()". Wenn wir die Ausgabe davon erhalten, werden Sie feststellen, dass der Link nach dem Inhalt angezeigt wird. In diesem Beispiel verwenden wir eine „rote“ Schriftfarbe mit einem „30px“ „Schriftgröße“.
Ausgang:
Diese Ausgabe zeigt den Link nach dem Inhalt an. Es wird zunächst den Inhalt angezeigt, der "Google -Link" lautet. Dann wird der Link angezeigt, den wir mit der Funktion „Affr ()“ des CSS erhalten.
Beispiel #3
Hier erstellen wir eine Liste mit verschiedenen Namen. Der „OL“ wird verwendet, um die geordnete Liste zu definieren. Während „Li“ verwendet wird, um das Element in der Liste darzustellen. Wir erstellen die Liste mit vier Namen und rufen diese Namen mit der Funktion „attr ()“ in CSS ab.
CSS -Code:
Wir verwenden die "orange" Farbe für die Überschrift und richten sie in der „Mitte“ aus. Wir möchten die Namen nach dem Inhalt platzieren, also verwenden wir "After" mit der "Liste".li “. Wir verwenden den „Inhalt“, um den Inhalt anzuzeigen, den wir im HTML -Code geschrieben haben. Wir verwenden auch die Klammern in den Klammern. Wir verwenden die Funktion „attr ()“. Wir geben den „Namen“ als Element in der Funktion „attr ()“ vorbei. Wenn wir die Ausgabe erhalten, werden die Namen in der Klammern angezeigt. Die Schriftfarbe dieses Sets ist „blau“ und zeigt einen kursiven Stil an, während wir den „Schriftarten“ auf „kursiv“ einstellen. Sie verwenden einige Eigenschaften in den Listenelementen, nämlich die Eigenschaft „Schriftgröße“. Wir setzen die Schriftgröße auf "25px". Und verwenden Sie die Eigenschaft "Schriftfamilie", die auf "Times New Roman" eingestellt ist.
Ausgang:
Hier können wir sehen, dass der Inhalt zuerst wiedergegeben wird. Dann erscheinen die Namen in der Klammern nach dem Inhalt. Wir erhalten alle Namen, indem wir nur eine ATTR () -Funktion verwenden und diese Namen mit jedem Listenelement nach dem Inhalt gemacht haben.
Beispiel #4
Wir erstellen vier Links in diesem HTML -Code, indem wir "HREF" verwenden und den Inhalt für jeden Link haben. Schauen Sie sich nun den CSS -Code an und wie wir diese Links mit der Funktion „attr ()“ abrufen.
CSS -Code:
Wir stylen die Überschrift, indem wir die „Farbe“ und „Schriftfamilie“ des Textes ändern. Wir richten den Text im „Mitte“ aus. Wir verwenden "After", damit der Link, den wir mit der ATTR () -Funktion erhalten, nach dem Inhalt gerendert wird. Wir verwenden die Klammern. Wenn die ATTR () -Funktion den Link abruft, wird sie in der Klammern angezeigt. Diese Links werden in „roter“ Farbe und im „kursiv“ -Stil erzeugt.
Ausgang:
Beispiel Nr. 5
Wir erstellen eine Liste verschiedener Obst und Gemüse und wenden die ATT () -Funktion auf dieser Liste an. Die hier erstellte Liste ist die bestellte Liste. Jetzt kommt der CSS -Code, in dem wir die ATTR () -Funktion verwenden.
CSS -Code:
Wir verwenden die „grüne“ Farbe für die Überschrift. Die Hintergrundfarbe für diese Überschrift ist "Aqua". Wir verwenden „Nach“, was wir in unseren vorherigen Codes besprochen haben. Hier wird die ATTR () -Funktion erneut in der Klammern verwendet, sodass die abgerufenen Daten in dieser Klammung angezeigt werden. Wir setzen seine Farbe auf "orangeriert" und die Schriftgröße auf "22px". Wir verwenden die Hintergrundfarbe dafür und setzen sie auf "Gelb".
Ausgang:
Abschluss
In diesem Leitfaden haben wir gelernt, was ist eine attr () -Funktion und warum wir diese attr () -Funktion in CSS verwenden. Wir haben auch gelernt, diese Funktion in CSS zu verwenden. Wir haben diese attr () Funktion theoretisch erklärt und Beispiele durchgeführt, bei denen wir diese Funktion in CSS verwendeten. Wir haben die fünf verschiedenen Beispiele in diesem Leitfaden untersucht und die Daten oder den Link angezeigt, die wir mit der ATTR () -Funktion vor und nach dem Inhalt abgerufen haben. Wir haben erläutert, wie diese Funktion die gewünschten Daten des ausgewählten Elements oder des ausgewählten Werts abruft, und zeigt sie in der Ausgabe an.