Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /var/www/sites/v11031301/html/framework/class.database.php on line 61
HTML-Attribute im Stylesheet nutzen - mRm-line: Das Netzwerk für Ihren Erfolg

… aus der Rubrik CSS, Layout

» alle Rubriken

HTML-Attribute im Stylesheet nutzen

Online seit
16.10.2010

Allen HTML-Elementen sind mehrere Attribute zugeordnet. Zusammen mit Operatoren kann man im CSS-Stylesheet echten Mehrwert für die Besucher einer Website schaffen – mit minimalem Aufwand.

Grundlagen HTML-Attribute:

  • Attribute liefern dem Browser Zusatz-Informationen (z.B. title ) und schlagen die Brücke zu CSS-Definitionen (z.B. style ).
    (Eine vollständige Liste finden Sie bei W3C oder SELFHTML.)
  • Attribute stehen durch Leerzeichen getrennt im öffnenden HTML-Tag.
  • Attribut-Werte werden mit = angefügt und in " Hochkommas " gesetzt.
    <a href="http://www.domain.tld">
    	Text
    </a>

Grundlagen CSS-Definitionen:

  • HTML-Attribute lassen sich per Attribut-Selektor in [ eckigen Klammern ] gezielt ansprechen.
  • a[rel] {
    	color: #ff0000;
    }
  • Jeder Attribut-Selektor kann mit Operatoren genauer definiert werden.
  • Folgende Operatoren sind verfügbar:
    Anwendungsbeispiel: Bestimmte Links rot ausgeben
    Operator Auswirkung auf Elemente, bei denen das definierte Attribut gesetzt ist
    = und der Wert exakt 'xyz' entspricht
    a[rel="xyz"] {
    	color: #ff0000;
    }
    ~= und im Wert 'xyz' enthalten ist
    a[rel~="xyz"] {
    	color: #ff0000;
    }
    |= und der Wert durch Bindestrich geteilt ist und von links mit 'xyz' beginnt
    a[lang|="xyz-abc"] {
    	color: #ff0000;
    }
    ^= und der Wert mit 'xyz' beginnt
    a[title^="xyzabc"] {
    	color: #ff0000;
    }
    $= und der Wert mit 'xyz' endet
    a[href$="abcxyz"] {
    	color: #ff0000;
    }
    *= und der Wert die Zeichenkette 'xyz' enthält
    a[href*="xyz"] {
    	color: #ff0000;
    }


Mit diesem Verfahren lassen sich z.B. Dateitypen oder externe Links zentral kennzeichnen. Richtig eingesetzt spart das Programmierarbeit – und dazu erleichtert es Besuchern einer Website die Orientierung ganz erheblich.

Hinweis:  
Die Veröffentlichung dieser Informationen erfolgt nach sorgfältiger Prüfung,
jedoch ohne Gewähr. Eine Haftung kann keinesfalls übernommen werden.
Die Inhalte sind interessant oder hilfreich für Sie und andere? Sagen Sie's einfach weiter.