Attributbedingte CSS Formatierung

Es ist im Grunde genommen recht einfach möglich, eine attributbedingte CSS Formatierung zu erstellen. Das heißt, dass man das Format – z.B. von einem Text – von einem Attribut abhängig macht. So ist es bspw. möglich, alle zentrierten Texte anders zu formatieren, als nicht zentrierte Texte. Die Möglichkeiten dabei sind fast unbegrenzt.

Aus diesem Grund zeige ich dir in diesem Artikel, wie du über Attribute die Formatierung von CSS steuern kannst.

 

Die Erstellung einer attributbedingten CSS Formatierung ist dabei mit zwei relativ einfachen Schritten schnell erledigt. Zunächst zeige ich dir, wie man eine attributbedingte CSS Formatierung aufbaut und erläutere dann das gezeigte Beispiel. Am Ende findest du anschließend eine kleine Tabelle mit möglichen Selektoren für eine attributbedingte CSS Formatierung.

 

Schritt 1: HTML Elemente in die Website einfügen

Damit wir mir der Formatierung beginnen können, muss jedoch zunächst ein HTML Grundgerüst entstehen. Das folgende Beispiel stellt dabei ein Formular dar.

 

Beispiel:

<html>
 <head>
 <title>Attributbedingte CSS-Formatierung</title>
 </head>
 <body>
 
 <form>
 Name:<br />
 <input name="Name" type="text" value="Ihr Name"><br /><br />
 Passwort:<br />
 <input name="Passwort" type="password" value="passwort"><br /><br />
 
 <input type="reset"> <input name="Daten Absenden" type="submit">
 </form>
 
 </body>
 </html>

 

Schritt 2: Die Attribute mit CSS formatieren

Jetzt kannst du also über bestimmte Attribute die bereits erstellten HTML Elemente gestalten. Dazu musst du diese zunächst im Stylesheet festlegen.

 

Beispiel:

input[type=text] {
  color: red;
 }
 
 input[name=Passwort] {
  background-color: lightgrey;
 }
 
 input[name~=Absenden] {
  font-weight: bold;
 }

 

Erläuterung

Mit den im Beispiel genannten Formatierungen ist das Formular schließlich ein wenig bunter. Der Browser zeigt dann den Text im Feld „Name“ in rot an. Das Feld für das Passwort ist dabei mit einem hellen Grau hinterlegt. Der Text auf dem Button „Daten absenden“ hingegen ist fett markiert.

Nach diesem Schema kannst du weiterhin auch beliebig andere HTML Elemente attributbedingt formatieren. Wie überdies bereits in der Einleitung genannt, lässt sich ausgerichteter Text so anders darstellen, als der „normale“ Fließtext einer Seite.

 

Mögliche CSS Selektoren für Attribute

Die folgende Tabelle enthält dabei eine Liste aller möglichen Attribut-Selektoren in CSS.

 

Selektor Bedeutung
E[xam] Element E mit Attribut xam
E[xam=“ple“] Element E mit Attribut xam und Wert ple
E[xam~=“ple“] Element E mit Attribut xam, dessen durch Leerzeichen getrennte Liste von Werten ple enthält (p[class~=“ple“] entspricht p.ple)
E[xam|=“ple“] Element E mit Attribut xam, dessen durch Trennstriche (-) getrennte Liste von Werten mit ple beginnt
E[xam^=“ple“] Element E mit Attribut xam, dessen Wert mit ple beginnt
E[xam$=“ple“] Element E mit Attribut xam, dessen Wert mit ple endet
E[xam*=“ple“] Element E mit Attribut xam, das die Zeichenkette ple enthält

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.