Arten von CSS-Attribut-Selektoren - Semalt Expert
Ein HTML-Element besteht aus einer Klasse, einer ID und Attributen. Ein Attributselektor wählt die HTML-Elemente aus, die ein Attribut oder einen Attributwert aufweisen. Attributselektoren bieten eine einfache Methode zum Anwenden von Stilen auf HTML-Elemente mit einem bestimmten Attribut oder Merkmalwert. Attributselektoren sind durch zwei eckige Klammern definiert, die das Attribut mit seinem Wert einschließen. Dennoch können Sie einen Elementtyp-Selektor davor setzen. Die CSS-Attributauswahl wendet die Stilregeln auf ein Element an, wenn es aus einem bestimmten Merkmal besteht.
Arten von Attributselektoren
Es gibt verschiedene Arten von Attributselektoren, von denen jeder für verschiedene Fälle verwendet werden kann:
CSS [Attribut | = "Wert"] Selektor-Hervorhebungen Elemente, die ein bestimmtes Merkmal haben, und es beginnt mit einem definierten Wert.
CSS [Attribut ~ = "Wert"] Selektor wird verwendet, um Elemente mit einem Eigenschaftswert zu finden, der ein bestimmtes Wort enthält.
CSS [Attribut ^ = "Wert"] Selektor findet Elemente mit einem Eigenschaftswert, der mit einem bestimmten Wert beginnt. Der Wert ist nicht unbedingt ein ganzes Wort.
CSS [Attribut $ = "Wert"] Selektor findet Komponenten, deren Attributwert mit einem definierten Wert endet.
Anwendungen der CSS-Attributselektoren
Es gibt verschiedene Möglichkeiten, wie der Attributselektor anstelle des universellen, Klassen- oder ID-Selektors verwendet werden kann.
Die am häufigsten verwendeten Attributselektoren sind Eingaben B. Text-Selektoren, Checkbox-Selektoren, Passwort-Selektoren, Datei-Selektoren, versteckte Selektoren, Passwort-Selektoren, Radio-Selektoren, Reset-Selektoren usw.
Styling-Formen
Die Attribut-Selektoren sind sehr nützlich beim Styling Formulare ohne Klasse oder ID.
Stil-Links
Zum Beispiel können Attribut-Selektoren verwendet werden, um eine Blogroll zu stylen, wo Sie eine Liste von Links zu Freundes-Sites haben Link ist anders gestylt. Die traditionelle Art, dies zu tun, ist es, einen Anrufnamen zu vergeben, der mehr Markups erfordert. Sie könnten jedoch das nth-child verwenden, das erfordert, dass sich die Befehle nie ändern. Die Verwendung der Attributselektoren macht dies so einfach Es gibt ein Attribut, auf das Sie ein Targeting durchführen können.
Border-Eingaben
Um Border-Elemente mit dem CSS-Border-Bildattribut zu gestalten, können Sie auf elegante Weise dem Körper Bilder hinzufügen. Sie können ein Bild als Rahmen eines Elements definieren. Das Rahmenbild könnte skaliert, geschnitten und auf verschiedene Arten wiederholt werden, um sicherzustellen, dass es in den Randbereich passt. Mit dem Attribut "border radius" können Sie abgerundete Ecken hinzufügen, ohne Bilder zu verwenden. Die Eigenschaft definiert die Form der Ecke.
Stylingfarben
Mit den CSS-Attributselektoren können alle Elemente mit einem bestimmten Farbwert einfach gestylt werden. Sie können die Farbschlüsselwörter RGB, RGBA, HSL und HSLA verwenden. Die RGBA-Farbwerte sind eine Erweiterung des RGB-Farbmodells mit einem Kanal, der die Deckkraft einer Farbe definiert. Der Parameterwert liegt zwischen 1,0 (undurchsichtig) und 0,0 (transparent).
Das HSL-Farbmodell wird als (Hue_saturation_Lightness) erklärt, die Farbtondarstellung erfolgt in Form eines Winkels (0-360) oder der Farbe Rad. Sättigung und Helligkeit werden als Prozentsätze gemessen 0% Sättigung stellt Schatten oder Grau dar, während 100 Vollfarbe darstellt, 100% Helligkeit stellt Weiß dar, während 0% Schwarz ist.
Post a comment