Quelltext betrachten

Aus 4webmaster.de

Du bist nicht berechtigt, die Aktion auszuführen. Grund:
Diese Aktion ist beschränkt auf Benutzer, die der Gruppe „user“ angehören.
Quelltext dieser Seite:
<noinclude>
{{TOCright}}
Mit CSS können Sie festlegen, wie bestimmte Elemente (in HTML- oder [[XHTML]]) dargestellt werden sollen.
Für so eine Festlegung müssen Sie zwei Fragen beantworten:
# '''Welche''' Elemente sollen speziell dargestellt werden?
# '''Wie''' sollen diese Elemente dargestellt werden?

Hier geht es um die erste Frage: Wie sage ich dem Browser, ''welche'' Elemente ich überhaupt formatieren will? 
Im Sprachgebrauch von CSS spricht man von '''Selektoren'''. 

</noinclude>
Am folgenden Beispiel sehen Sie den typischen Aufbau einer CSS-Definition:
<source lang=css>
h1 { color: blue; font-weight: bold; }
</source>

h1 ist der '''Selektor'''. Im obigen Beispiel bedeutet er: ''"Die folgende Definition gilt für alle h1-Elemente"''. Der Selektor beantwortet also die erste Frage: '''Welche''' Elemente sollen speziell dargestellt werden?

In geschweiften Klammern hinter dem Selektor steht die Antwort auf die zweite Frage: '''Wie''' sollen diese Elemente dargestellt werden? Im obigen Beispiel soll blau und fett formatiert werden. 

Es gibt verschiedene Möglichkeiten, die zu formatierenden Elemente auszuwählen. Betrachten wir alle Möglichkeiten anhand von Beispielen.

{{Achtung|Ich gehe in den folgenden Beispielen davon aus, dass Sie HTML-Elemente formatieren wollen. Dann muss ich nicht so abstrakt formulieren, das Thema ist auch so schon abstrakt genug. Sie können diese Beispiele aber auf andere Sprachen übertragen. Mit CSS lassen sich auch XHTML-Elemente formatieren und die Elemente vieler anderer Sprachen.}}


<hr class="h2"/>
== Selektierbare Eigenschaften ==
Die Elemente, die Sie formatieren wollen, haben bestimmte Eigenschaften. Anhand der folgenden Eigenschaften können Sie selektieren:
* '''Typ:''' Selektion nach dem HTML-Elementnamen. <br>Beispiel: Ein HTML-Element <tt><nowiki><h1></nowiki></tt> ist vom Typ <tt>h1</tt>.
* '''Klasse:''' Selektion nach dem <tt>class</tt>-Attribut des Elementes. <br>Beispiel: Ein HTML-Element <tt><nowiki><span class="rot"></nowiki></tt> hat die Klasse <tt>rot</tt>.
* '''ID:''' Selektion nach dem <tt>id</tt>-Attribut des Elementes. <br>Beispiel: Ein HTML-Element <tt><nowiki><div id="footer"></nowiki></tt> hat die id <tt>footer</tt>.
* '''Attribut:''' Selektion nach beliebigen Attributen, nicht nur <tt>class</tt> oder <tt>id</tt>. 

=== Typ-Selektoren ===
Der grundlegenste Selektor von CSS ist der Typ-Selektor. Damit lassen sich z.B. alle Überschriften gleich formatieren oder dokumentenweit gültige Regeln für Tabellenzellen aufstellen.
Die allgemeine Regel lautet:
{{Achtung |Ein HTML-'''Elementname''' als Selektor gilt für alle HTML-Elemente des bezeichneten Typs.}}

Betrachten wir dazu ein einfaches Beispiel:
<source lang=css>
h1 { color: blue; font-weight: bold; }
</source>

Die Formatdefinition in den geschweiften Klammern gilt für alle Elemente vom Typ <tt>h1</tt>.
Schreiben Sie also auf ihrer HTML-Seite
<pre><nowiki>
<h1>Dies ist eine Überschrift</h1> 
</nowiki></pre>
dann wird diese Überschrift blau und fett dargestellt werden.

=== Klassen-Selektoren ===
Die Klasse eines HTML-Elementes ist eine Eigenschaft, die der Designer frei wählen kann.
So lassen sich ähnliche Elemente zusammenfassen. Mit den 
Klassen-Selektoren von CSS lassen sich alle Elemente einer Klasse gleich formatieren.

Die allgemeine Regel lautet:
{{Achtung |Mit einem '''Punkt''' gefolgt von einem '''Klassennamen''' schränken Sie die Auswahl der Elemente auf eine bestimmte Klasse ein.}}

Beispiel:
<source lang=css>
.rot { color: red; }
</source>
Die Formatdefinition gilt für alle Elemente, die der Klasse "rot" angehören. Dabei ist es unerheblich, um was für ein HTML-Element es sich genau handelt. Entscheidend ist nur die Klassenzugehörigkeit. Beispiele:
<pre><nowiki>
<span class="rot">     Dies wird rot dargestellt.</span> 
<div class="rot">      Dies auch!                </div> 
<h1 class="rot">       Dies auch!                </h1> 
<p class="rot footer"> Dies ist auch rot.        </p> 
</nowiki></pre>
Im letzten Beispiel sehen Sie übrigens ein HTML-Element, das zwei Klassen gleichzeitig angehört. Dieses p-Element wird sowohl gemäß der Klasse <tt>rot</tt> formatiert, als auch gemäß der Klasse <tt>footer</tt>. 

Genau genommen ist der Syntax in obiger CSS-Definition nur eine Abkürzung. Eigentlich müssten Sie ein <tt>*</tt> vor den Punkt schreiben:
<pre><nowiki>
*.rot { color: red; }
</nowiki></pre>
Der <tt>*</tt> steht für jedes beliebige Element. Er heißt <span id="universalselektor"></span> '''Universal-Selektor'''. In der Praxis wird er meist weggelassen, aber wenn Sie wissen, dass <tt>*</tt> für jedes beliebige Element steht, erleichtert das das Verständnis der folgenden Selektoren.



=== ID-Selektoren ===
Der Designer kann einem HTML-Element nicht nur eine Klasse zuordnen, sondern auch eine eindeutige ID. 
Mit Hilfe dieser ID können Sie ein ganz bestimmtes Element speziell formatieren.
Die allgemeine Regel lautet:
{{Achtung |Mit einer '''Raute''' gefolgt von einem '''Identifikator''' selektieren Sie das Element mit der angegebenen <tt>id</tt>.}}

Beispiel:
<source lang=css>
#navigation { float: right; }
</source>
Obige Formatdefinition gilt nur für ein einziges Element. Und zwar für das Element mit der <tt>id</tt> "<tt>navigation</tt>".
Beispiel:
<pre><nowiki>
<div id="navigation"> Die Navigation ist auf dieser Site rechts. </div> 
</nowiki></pre>

Verwendet wird die Selektion per ID beispielsweise um das Grundlayout einer Site festzulegen. Dann gibt es z.B. ein <tt>div</tt>-Element mit <tt>id="main"</tt>", eines mit <tt>id="footer"</tt>", eines mit <tt>id="navigation"</tt>" usw. 
Jedes Element gibt es aber nur einmal. Statt mit <tt>id</tt> können Sie oft auch mit <tt>class</tt> arbeiten, für CSS macht es eigentlich keinen Unterschied.   

Wenn man es genau nimmt, ist der Syntax in obiger CSS-Definition wieder nur eine Abkürzung. Eigentlich müssten Sie den Universal-Selektor <tt>*</tt> vor den Punkt schreiben, er selektiert jedes beliebige Element:
<pre><nowiki>
*#navigation { float: right; }
</nowiki></pre>
In der Praxis werden Sie diese Schreibweise nur sehr selten sehen, sie ist sehr ungebräuchlich. 

=== Attribut-Selektoren ===
Mit Attribut-Selektoren können Sie Elemente abhängig vom Wert ihrer Attribute auswählen.
Am einfachsten lassen sich die Attribut-Selektoren anhand von Beispielen verstehen:
<source lang=css>
a[href ^="mailto:"] { background-image: url(mail_icon.png); }
a[href $=".wav"]    { background-image: url(audio_icon.png); }
</source>
Die erste Formatdefinition fügt jedem <tt>mailto</tt>-Link ein Icon hinzu. Auch das zweite Beispiel erzeugt ein automatisches Icon. Hier wird jeder Link auf eine WAV-Datei mit einem Icon versehen. Sehr praktisch! 

Um die Attribut-Selektoren zu verstehen, betrachten wir zunächst noch einmal die Begriffe: Was ist ein Element, was ist ein Attribut, was ist ein Wert? 
Dazu ein einfaches Beispiel in HTML. <br>Es enthält zwei HTML-<b>Elemente</b>: Das <tt>div</tt>-Element und das <tt>a</tt>-Element.
{{Zweispaltig
|col1=
<source lang="html4strict">
<div class="navi">
     <a href="http://w3.org" 
        title="zum WWW-Consortium"> 
        Link zum WWW-Consortium 
     </a>
</div>
</source>

|col2=
<br><div class="eng">
* Das <tt>div</tt>-Element besitzt ein <b>Attribut</b>, und zwar das <tt>class</tt>-Attribut. <br>Außerdem hat es einen '''Inhalt''', nämlich das <tt>a</tt>-Element. <br>
** Das <tt>class</tt>-Attribut hat den <b>Wert</b> <tt>"navi"</tt>.
** Einziger Inhalt des <tt>div</tt>-Elementes ist das <tt>a</tt>-Element. <br>Es besitzt zwei Attribute, und zwar das <tt>href</tt>-Attribut und das <tt>title</tt>-Attribut. <br>Außerdem hat es einen Inhalt, nämlich den Linktext.
*** Das <tt>href</tt>-Attribut hat den Wert <tt><nowiki>"http://w3.org"</nowiki></tt>. 
*** Das <tt>title</tt>-Attribut hat den Wert <tt>"zum WWW-Consortium"</tt>. 
*** Der Inhalt des <tt>a</tt>-Elementes ist der elementlose Text "Link zum WWW-Consortium". 
</div>
}}

Mit Attribut-Selektoren können Sie Elemente abhängig vom Wert ihrer Attribute auswählen. Folgende Möglichkeiten haben Sie:

{| class="prettytable"
|-
! style="background-color:#FFFFBF;" | Selektor
! style="background-color:#FFFFBF;" | Bedeutung
! style="background-color:#FFFFBF;" | Definition
! style="background-color:#FFFFBF;" | ab Version
|-
| [att]
| existiert
| Erfasst alle Elemente, die ein ''att''-Attribut besitzen. Welchen Wert das Attribut hat, ist egal.  
| CSS2
|-
| {{Nowrap|[att &#61; "val"]}}
| {{Nowrap|genau gleich}}
| Erfasst alle Elemente, dessen ''att''-Attribut den Wert "val" hat.
| CSS2
|-
| {{Nowrap|[att ^&#61; "val"]}}
| beginnt mit
| Erfasst alle Elemente, dessen ''att''-Attributswert mit "val" beginnt.
| CSS3
|-
| {{Nowrap|[att $&#61; "val"]}}
| endet mit
| Erfasst alle Elemente, dessen ''att''-Attributswert mit "val" endet.
| CSS3
|-
| {{Nowrap|[att *&#61; "val"]}}
| enthält
| Erfasst alle Elemente, dessen ''att''-Attributswert an irgendeiner Stelle die Zeichenfolge "val" enthält.
| CSS3
|}

Für sehr spezielle Anwendungen gibt es außerdem die Operatoren  {{Nowrap|[att ~&#61; "val"]}} und {{Nowrap|[att &#124;&#61; "val"]}}. Sie passen nur unter ganz bestimmten Umständen. Lesen Sie dazu bitte direkt in der CSS-Spezifikation nach: [[http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-representation]].


<hr class="h2"/>
== Kombinationen ==

=== Und-Verknüpfung ===
Beide Möglichkeiten der Selektion (nach Typ und nach Klasse) lassen sich kombinieren:
<source lang=css>
h1.rot { background-color: grey; }
</source>
Die obige Formatdefinition gilt nicht mehr für alle h1-Elemente, sondern nur noch für h1-Elemente, die der Klasse "rot" angehören.
Schreiben Sie also auf ihrer HTML-Seite
<pre><nowiki>
<h1 class="rot">Dies ist die rote Überschrift</h1> 
</nowiki></pre>
dann wird diese Überschrift zusätzlich mit grauem Hintergrund dargestellt. Andere h1-Überschriften dagegen werden von der Definition dagegen nicht erfasst.
{{Achtung |Mit '''HTML-Elementname Punkt Klassenname''' selektieren Sie Elemente eines bestimmten Typs ''und'' einer bestimmten Klasse.}}

Ähnlich können Sie auch Elemente selektieren, die einen bestimmten Typ haben ''und'' eine bestimmte ID: 
{{Achtung |Mit '''HTML-Elementname Raute Klassenname''' selektieren Sie Elemente eines bestimmten Typs ''und'' einer bestimmten ID.}}
Das macht nur Sinn, wenn IDs mehrfach vergeben wurden.

=== Oder-Verknüpfung ===
Auch eine Oder-Verknüpfung ist möglich. 
{{Achtung |Mit einem '''Komma''' trennen Sie alternative Selektoren voneinander, die gleich formatiert werden sollen. }}

Beispiel:
<source lang=css>
.red, .rot, #logo, .logo { color: red; }
</source>

Die obige Formatdefinition gilt für alle Elemente, die entweder der Klasse <tt>red</tt> angehören, oder die der Klasse <tt>rot</tt> angehören, oder die sich mit <tt>logo</tt> identifizieren, oder die der Klasse <tt>logo</tt> angehören. Sie ist also eine Kurzform für 

<pre><nowiki>
.red  { color: red; }
.rot  { color: red; }
#logo { color: red; }
.logo { color: red; }
</nowiki></pre>

=== Hierarchische Verschachtelung ===
Dieser Selektor lässt sich wieder am einfachsten anhand eines Beispieles verstehen:
<source lang=css>
.navigation h1 {	
  font-size: 95%;
  font-weight: normal;
  white-space: nowrap;
}
</source>

Mit dieser Formatdefinition bewirken Sie, dass h1-Elemente ''innerhalb'' der Navigation völlig anders dargestellt werden als sonst. Anwendungsbeispiel:

<pre><nowiki>
<h1>Eine normale Überschrift</h1>
<div class="navigation">
    <h1>Innerhalb der Navigation wird h1 ganz anders formatiert!</h1>
</div>
<h1>Noch eine normale Überschrift</h1>
</nowiki></pre>

Die allgemeine Regel lautet:
{{Achtung |Ein äußeres Element, welches das selektierte Element umgeben muss, notieren Sie vorweg und trennen es mit einem '''Space'''.}}

Die Selektion verschachtelter Elemente ist wichtig und wird gerne verwendet. Betrachten wir daher noch ein anderes Beispiel:
<source lang=css>
strong b, b strong { text-transform: uppercase; }
</source>

Obige Formatdefinition bezieht sich auf <tt>b</tt>-Elemente, die sich in einem <tt>strong</tt>-Element befinden, oder umgekehrt.
Eigentlich bewirken <tt>b</tt> und <tt>strong</tt> das gleiche, sie machen fette Schrift. Mit obiger Formatdefinition erwirken Sie, dass doppelter Fettdruck als Großbuchstaben dargestellt wird:

<pre><nowiki>
<strong>
   Dieser Text ist fett. 
   <b>Und dieser ist fett und Großbuchstaben!</b>
   Hier ist es wieder fett und ohne Großbuchstaben.  
</strong>
</nowiki></pre>
 
Es gibt noch eine Verfeinerung, die wir anhand des folgenden Beispiels betrachten können:
<source lang=css>
#navigation a       { color: black; }
#navigation a.aktiv { color: red; }
</source>

Mit diese Formatdefinition bewirken Sie, dass Navigations-Links schwarz sind. Der aktive Navigationslink aber ist rot. Anwendungsbeispiel:

<pre><nowiki>
<a href="irgendwohin1"> Außerhalb der Navigation: normale Linkfarbe </a>

<div id="navigation"> 
   <div id="navigation-body">
      <a href="ziel_a"> schwarzer Link </a>
      <a href="ziel_b" class="aktiv" > roter Link </a>
      <a href="ziel_c"> schwarzer Link </a>
   </div>
</div>

<a href="irgendwohin2"> Außerhalb der Navigation: normale Linkfarbe </a>
</nowiki></pre>

Haben Sie schon gesehen, dass die Navigations-Links gar nicht unmittelbar im <tt>#navigation</tt>-Element sind? Ein weiteres <tt>div</tt> trennt die Links von ihrem umgebenen Container. Die CSS-Selektion funktioniert aber trotzdem. Es ist unerheblich, wieviele Ebenen dazwischen liegen. Wichtig ist nur, dass die zu formatierenden Links irgendwo in einem <tt>#navigation</tt>-Element enthalten sind. 

<span id="direkte_hierarchische_verschachtelung"></span>
Es gibt auch einen Selektor, der nur dann funktioniert, wenn der äußere Selektor ein direktes Eltern-Element ist.
D.h. es darf dann, anders als im obigen Beispiel, keine Ebene dazwischenliegen. Die Regel lautet:  
{{Achtung |Ein äußeres Element, welches das selektierte Element ''direkt'' umgeben muss, notieren Sie vorweg und trennen es mit einem '''Größer'''-Zeichen (>).}}

In Kombination mit dem [[#universalselektor|Universalselektor]] <tt>*</tt> haben Sie die Möglichkeit, bei der Selektion die Anzahl der dazwischenstehenden Ebenen als Kriterium mit einfließen zu lassen. Siehe [[http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente]].

=== Abfolge ===
Sie können auch HTML-Elemente formatieren, die sie daran erkennen, welches HTML-Element in der Reihenfolge vor ihnen steht. Anders als bei der [[#Hierarchische_Verschachtelung| hierarchischen Verschachtelung]] liegt dieses Vorgängerelement aber auf der gleichen hierarchischen Ebene wie das nachfolgende Element. Die allgemeine Regel lautet:
{{Achtung |Ein Vorgänger-Element, welches direkt vor dem selektierten Element existieren muss, notieren Sie vorweg und trennen es mit einem '''Plus'''-Zeichen. }}

Beispiel:
<source lang=css>
 div.logo + p { display:none; }
</source>

Obiges Beispiel blendet den Absatz aus, der auf ein <tt>div</tt> der Klasse <tt>logo</tt> folgt. Mit dieser Technik können Sie z.B. das Layout von Standardsoftware ändern, auch ohne den möglicherweise dynamisch generierten HTML-Quelltext anzufassen. Beispiel:
<pre><nowiki>
<div class="logo"> Dies ist das Logo </div>
<p> Dieser Text wird nicht angezeigt. Es sei denn Sie benutzen noch den IE6.</p>
</nowiki></pre>


Ein weiteres Beispiel: 
<source lang=css>
  hr + h2 {  padding-top: 0em;}
</source>

Mit dieser Definition erreichen Sie, dass h2-Überschriften auf ihr Padding verzichten, wenn über ihnen eine Linie ist. 
Auf ganz ähnliche Weise wurden übrigens die Linien über den Überschriften auf dieser Seite erzeugt. 

<span id="abfolge_tilde"></span>
Mit dem Plus-Zeichen legen Sie fest, dass das selektierte Element einen bestimmten ''direkten'' Vorgänger hat. Zwischen den beiden Elementen dürfen keine weiteren Elemente liegen, die müssen direkt aufeinander folgen. Zwischen ihnen ist nur einfacher Text erlaubt, der kein eigenes Element bildet.

Sie können aber dazwischenliegende Elemente auch erlauben. Dann verwenden Sie statt des Plus-Zeichens einfach die Tilde. Die allgemeine Regel lautet:
{{Achtung |Ein Vorgänger-Element, welches vor dem selektierten Element existieren muss, notieren Sie vorweg und trennen es mit einer Tilde ('''~'''). }}

<hr class="h2"/>
== Was geht nicht? ==

* '''enthält XY:''' Sie können zwar Elemente selektieren, die von einem bestimmten äußeren Element umgeben sind (siehe [[#Hierarchische_Verschachtelung|Hierarchische Verschachtelung]]), aber Sie können keine Elemente selektieren, die ein bestimmtes Element enthalten. 

* '''hat Inhalt:''' Sie können zwar Elemente selektieren, die Attribute mit bestimmten Werten haben (siehe [[#Attribut-Selektoren]], aber Sie können keine Elemente selektieren, die einen bestimmten Inhalt haben.

* '''hat Nachfolger XY:''' Sie können zwar Elemente selektieren, die einen bestimmten Vorgänger haben (siehe [[#Abfolge|Abfolge]]), aber Sie können keine Elemente selektieren, die einen bestimmten Nachfolger haben. 


<noinclude>
{{CSS|ps2}}
__NOEDITSECTION__
</noinclude>
Folgende Vorlagen werden von dieser Seite verwendet:
Zurück zur Seite CSS-Selektoren.
Von „http://4webmaster.de/wiki/CSS-Selektoren“
Quelltext betrachten

Aus 4webmaster.de

4webmaster.de

Ansichten

Persönliche Werkzeuge

Suche

Werkzeuge
