 CSS-Anweisungen gruppieren (Seite 01)
Wenn Sie sich damit vertraut gemacht haben wie CSS-Anweisungen notiert werden und verstehen was ein Type-Selektor (für HTML-Elemente) ist, außerdem Class-Selektoren und ID-Selektoren kennen, können wir uns mit ganz brauchbaren kleinen Tricks beschäftigen, die dem Webmaster das Leben leichter machen.
|
|
1. Identische CSS-Anweisungen für eine Gruppe von Selektoren
2. CSS-Anweisungen zusammenfassen und vereinfachen
3. CSS-Anweisungen für Selektoren, die innerhalb anderer Selektoren stehen
a Rückblick - das haben wir bisher gemacht
Ein Anweisungsblock mit Formatierungsreglen haben wir für einen einzigen, bestimmten Selektor notiert. Hier in der vereinfachten Darstellung sehen Sie, dass die Anweisungen für alle Überschriften der Kategorie 1 gelten.
b Anweisungen gruppieren
Mann kann die CSS-Anweisungen in einem Anweisungsblock auch einer Gruppe von Selektoren zuweisen. Dazu werden die vorgesehenen Selektoren durch ein Komma getrennt notiert. Im ersten Anweisungsblock habe ich festgelegt, welche Anweisungen für die Überschriften der Kategorie 1, 2 und 3 gelten sollen. Für alle 3 Selektoren wurde die gleiche Schriftfamilie, Fettschrift und die Textfarbe blau festgelegt.
Ohne weitere Angaben für die Textgröße bestimmt der Browser wie groß die Überschriften dargestellt werden. Ich habe bisher lediglich die Schriftfamilie, Textfarbe und Gewichtung (bold = Fettschrift) festgelegt. Fettschrift wäre aber ohnehin Standard.
Wichtig: Selektoren werden durch Komma getrennt !
c Aber auch das wäre möglich
Sie legen Regeln für bestimmte Selektoren fest und wiederrufen (überschreiben) diese Regel ganz oder teilweise durch eine später (darunter angeordnete) neue Regel.
Im ersten Anweisungsblock habe ich festgelegt, welche Anweisungen für die Überschriften der Kategorie 1, 2, 3 und 4 gelten sollen. Für alle 4 Selektoren wurde die gleiche Schriftfamilie, Fettschrift und die Textfarbe blau festgelegt.
Danach überschreibe ich im zweiten Anweisungsblock die Anweisung für die Textfarbe der Überschriften der Kategorie 4.
Nun werden Überschriften der Kategorie 4 in blau dargestellt. Die Anweisungen für Schriftfamilie und Fettschrift bleiben gültig.
d Was haben wir gelernt?
1) Eine solche Notierung kann man vereinfachen und gruppieren:
p {
font-family: Tahoma, sans-serif;
font-size: 12px;
}
div {
font-family: Tahoma, sans-serif;
font-size: 12px;
}
td {
font-family: Tahoma, sans-serif;
font-size: 12px;
}
2) Die Selektoren werden einfach als Gruppe notiert. Natürlich vergessen wir die Kommas nicht.
p, div, td {
font-family: Tahoma, sans-serif;
font-size: 12px;
}
3) Die Anweisungen gelten für alle Absätze (a), Div-Elemnente (div) und Tabellenzellen (td).
Beispiel:
Was in dem Beispiel oben für Type-Selektoren (für HTML-Elemente) [p, div, td] gilt, kann man auch für andere Selektoren anwenden. Ein Beispiel dazu sehen Sie gleich hier:
p, div, td, .grau, a:link, a:visited {
font-family: Verdana, sans-serif;
font-size: 11px;
color:#6F6F6F;
}
Die Anweisung gilt für alle Type-Selektoren (HTML-Elemente) p, div und td
Die Anweisung gilt für den Class-Selektor (eigene CSS-Klasse) .grau
Die Anweisung gilt für die Class-Selektoren (Psydo-Klassen) a:link, a:visited
d Beispiel für gruppierte Anweisungen
In der Notierung finden Sie Kombinationen und Gruppierungen für
- Type-Selektoren (für HTML-Elemente) [body, h1, p, td, ... ]
- Class-Selektoren (eigene CSS-Klassen) [.headline, .textrot, .kasten]
- Class-Selektoren (Psydo-Klassen) [:visited, :hover]
- ID-Selektoren [#Hinweis]
<style type="text/css">
<!--
body {
font-family: Arial,Verdana,Helvetica,sans-serif;
color: #2F2F2F;
}
h1, h2, h3, h4, .headline {
font-size: 14px;
}
h1, h2 {
font-variant: small-caps;
color: #5F5F5F;
}
h3, h4 {
text-transform: uppercase;
color: #0090E0;
}
.headline {
font-weight: bold;
color: #0090E0;
}
a:link, a:visited {
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #9000E0;
}
a:hover {
color: #FF007F;
}
td, p, .textrot {
font-size: 11px;
line-height: 130%;
}
.textrot {
color: #FF0000;
}
/* gilt für #Hinweis und .kasten (Komma) */
#Hinweis, .kasten {
width:500px;
padding:15px;
}
/* gilt nur für #Hinweis */
#Hinweis {
margin-left:30px;
color: #FF0000;
border:1px solid #0090E0;
}
/* gilt nur für .kasten */
.kasten {
color: #0090E0;
border:1px dotted #6F6F6F;
}
/* gilt nur für #Hinweis mit der Klasse .grau (kein Komma) */
#Hinweis .grau {
margin-left:30px;
color: #FF0000;
border:1px solid #0090E0;
background-color: #EFEFEF;
}
-->
</style>
Was es mit der letzen Anweisung auf sich hat, erkläre ich im nächsten Kapitel
Ich denke, die Erklärungen dazu fasse ich besser auf einer eigenen Seite zusammen:
f Selektoren die innerhalb anderer Selektoren stehen
(Seite in Arbeit, kommen Sie in den nächsten Tagen noch einmal vorbei)
|
Home • Bilder • CSS • CSS-Anweisungen kombinieren