Icon für RSS-Feed Link zum XING-Profil
Wählen Sie eine Hintergrundfarbe:
Schwarzer Hintergrund Blauer Hintergrund Hellblauer Hintergrund Rose Hintergrund Grüner Hintergrund Grüner Hintergrund Olivfarbener Hintergrund Gelber Hintergrund Sandfarbiger Hintergrund Beiger Hintergrund Weisser Hintergrund
Texthintergrund:
Schwarzer Hintergrund Weisser Hintergrund Transparenter Hintergrund


Ladebild
Brick in the Wall

CSS Spezial: Gezieltes Ansprechen von HTML-Elementen

Von Matu am 21. Mai, 2009 (15:33 Uhr) unter Kategorie: CSS

Wer sich mit Cascading-Stylesheets befasst, sei es beruflich oder privat, definiert die Style-Informationen der grundlegenden Elemente im Allgemeinen in einer externen .css-Datei.

Vor allem Anfänger, die sich erst kurz mit dem Thema befasst haben, erkennen dabei nicht die weiterreichenden Möglichkeiten dieser deklarativen Stylesheet-Sprache, einzelne Elemente oder Bereiche gezielt ansprechen zu können.

Als erste Stufe der Separierung wird hierzu das jeweilige Block-Element (div) mit einer Klasse -oder ID-Deklaration versehen, damit es angeprochen werden kann. Aufbauend auf diesen “Angriffspunkten”, d.h. das gezielte Ansprechen eines zu gestaltenden Bereiches über die zugeordnete Klasse bzw. ID, kann nun auf die einzelnen Elemente innerhalb dieses separierten Bereiches eingewirkt werden, ohne das dies Einfluss auf die restliche Webseite hat.
Beispiel:
Webseiten enthalten üblicherweise Struktur-Bereiche wie container (main, wrapper), header, content, menu, sidebar und footer. Nun definiert man zum Beispiel zunächst die allgemeinen Deklarationen für den a-Tag (hover, visited, focus, active) :

a {
color: #aaa;
text-decoration: none;
}

a:hover{
color: #ccc;
text-decoration: underline;
}

...

Nur bei dem content- sowie sidebar-Bereich soll nun noch ein Zusatz in Form eines nachstehenden Images (Link in CSS Spezial: Gezieltes Ansprechen von HTML-Elementen) durch das :after-Pseudoelement angehängt werden. Die Links im Text-Bereich (content) und im Seiten-Bereich (sidebar) sollen also im Gegensatz zu a-Tags im header, menu oder footer-Bereich zusätzlich kenntlich gemacht werden, was dann so aussehen soll.
Dazu muss im Stylesheet folgendes deklariert werden:

#content, #sidebar a:after {
content:" "url(images/link.png);
}

Der Pfad zum Image muss natürlich angepasst werden.
Dies würde nun allen Links in den Bereichen

<div id="content"> Inhalt mit a-Tags </div>
<div id="sidebar"> Inhalt mit a-Tags </div>

ein Image anhängen.
Ich gehe davon aus, das bis hier alles bekannt sein sollte. Nun gehen wir aber noch einen Schritt weiter. Was wäre, wenn sich innerhalb dieser beiden Bereiche eine sogenannte “Sprungmarke” befindet. Ein a-Tag, der es ermöglicht, an eine (diese) bestimmte Stelle zu springen:

<a name="anker">

Dieser ist eigentlich nicht sichtbar, da hier das href-Attribute fehlt (… was durchaus gewollt ist). Durch unsere zusätzliche Style-Zuweisung würde aber auch diesem nun ein (sichtbares) Image angehängt werden, was hier fehl am Platz wäre.
Was tun sprach Zeus


Eine Möglichkeit wäre es, jeden a-Tag, wo das Image gewünscht wird, einer Klasse zuzuordnen:

.image a:after {
content:" "url(images/link.png);
}

Das sieht im Stylesheet sogar noch kürzer aus. Aber nun müßte jedes a-Tag mit dieser Klassen-Definition versehen werden:

<a href="http://ziellink" class="image">Link</a>

Nicht sehr sinnvoll, oder?!
Daher möchte ich auf den Titel dieses Artikels zurück kommen und eine weitere Möglichkeit offerieren, einzelne Elemente direkt anzusprechen.
Dazu gebe ich zunächst ein paar Beispiele:

#content, #sidebar a[href]:after {             //Beispiel 1
content:" "url(images/link.png);
}

#content, #sidebar ul li a[href]:after {       //Beispiel 2
content:" "url(images/link.png);
}

#content, #sidebar ul ul li a[href]:after {    //Beispiel 3
content:" "url(images/link.png);
}

p.textinput input[type="text"]:hover {         //Beispiel 4
background: #EBF4FF;
}
...

Bestimmt kann ich mir weitere Kommentare sparen, dennoch eine kurze Erklärung.
Beispiel 1 würde nur a-Tags innerhalb der Bereiche mit den IDs content und sidebar ansprechen (und ein Image anhängen), die ein href-Attribute enthalten. Den zuvor angesprochene Anker jedoch nicht, da hier dieses Attribute nicht vorhanden ist.
Beispiel 2 würde allen a-Tags innerhalb einer ungeordneten Liste (ul) ein Image anhängen. Bei Beispiel 3 beschränkt sich das wiederrum nur auf Unterlisten einer übergeordneten ul-Liste.
Beispiel 4 würde alle Textfelder innerhalb von p-Tags (Abschnitte) angesprechen, denen die Klasse textinput zugeordnet wurde. So läßt sich zum Beispiel die Hintergrundfarbe ändern, wenn man mit dem Mauszeiger drüberfährt ( … dies könnte man noch auf focus erweitern, interessant bei Formularen …).

So kann gezielt auf jedes Element bzw. auf jedes Element innerhalb eines Bereiches eingewirkt werden.

Teilweise findet man in CSS-Dateien die wildesten Konstrukte, dagegen sind die hier aufgeführten Beispiele noch einfach gehalten.
Ich habe schon Seiten gesehen, wo Experten in Sachen CSS Bildanimationen erstellt haben, die normalerweise mit Javascript realisiert werden (z.B. Lupeneffekt). Leider finde ich den Link nicht mehr, werde ihn aber nach Möglichkeit nachreichen.

Wenn man sich erst einmal damit beschäftigt hat, erweitert es den eigenen Horizont in Bezug auf die Gestaltung von Webseiten ungemein.

Ich hoffe, dieses Spezial war für den einen oder anderen hilfreich und informativ.

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4,50 out of 5)
Loading ... Loading ...

Deine Meinung ist mir wichtig!

Es besteht die Möglichkeit, Kommentare nachträglich innerhalb einer Zeitspanne von 5 Minuten zu ändern (Keine werblichen Kommentare)
Jeder 1. Kommentar muss freigeschaltet werden!

Smileys:spy:

Nach oben