TYPO3, iOS & Web-Development Blog

Mit CSS Pseudo-Klassen lassen sich Elemente in Ihren Positionen oder Eigenschaften ohne zusätzliche CSS Klassen ansprechen. Wir nutzen also die Möglichkeiten des Browsers oder Positionen des Elements im HTML Markup. So lassen sich – zumindest in modernen Browsern – ganz einfach entsprechende Elemente selektieren und Style-Angabe definieren.

Eigenschaften Pseudo-Klassen

:hover

Durch die :hover Pseudo-Klasse lässt sich ein Mouse-Over Effekt nutzen. Mit diesem CSS Befehl werden oft Links beim Überfahren mit der Maus optisch anders dargestellt. Modifizieren lassen sich unter anderem Farbe und Unterstreichen. In modernen Browsern wird diese Pseudo-Klasse auch auf normalen, nicht Link-Elementen berücksichtigt. Somit können wir via CSS3 eine ganze aufklappbare Navigation erstellen (:hover & display).

:visited

Mit der CSS Pseudo-Klasse :visited lässt sich bereits besuchter Link grafisch anders darstellen und signalisiert so dem Besucher, dass er diese Seite bereits besucht hat.

:active

Die Pseudo-Klasse :active ermöglicht es, Links auf der aktuell geöffneten Seite anders darzustellen.

Positions Pseudo-Klassen

:first-child

Mit :first-child werden Elemente selektiert und angesprochen die nach dem entsprechenden Muster das erste „Kind-Element“ darstellen.

:last-child

Last-Child funktioniert genau wie First Child, jedoch wird hierbei das letzte Kind-Element der entsprechenden Selektion angesprochen.

:first-line

Fügt Style-Definitionen auf die erste Textzeile des selektierten Elements hinzu.

:first-letter

Mit First-Letter kann man das Aussehen des ersten Zeichens eines Elements anpassen.

:nth-child( <odd/even/Zahl> )

Mit der Pseudo-Klasse :nth-child lassen sich alle gerade bzw. ungeraden Elemente ansprechen. Ein einfaches Anwedungsbeispiel wären Tabellenzeilen oder Listen. So könnte man jede zweite Zeile mit einer leicht anderen Farbe hinterlegen. Auch ist es möglich dort z.B. jedes dritte Element (3n) anzusprechen. Zusätzlich ist es möglich jedes dritte Element – jedoch erst ab dem zweiten Element – anzusprechen (3n+2).

Wert Pseudo-Klassen

[attr=value]

Ebenfalls können wir Elemente direkt nach Attributen und entsprechenden Werten selektieren. Ein einfaches Beispiel: Wir selektieren alle Input-Felder vom Typ „Submit“: input[type=submit]

Für HTML Elemente und natürlich auch den gesamten HTML „body“ bestimmen wir per CSS Befehl bei Bedarf Hintergründe. Ob Bilder, Farben oder Verläufe ist natürlich euch überlassen. Hier die wichtigsten Befehle für Backgrounds.

Hinweis: Auch hier kann die Mischschreibweise (background:) verwendet werden.

Beispiele

.element {
    background-image:url(image.png);
    background-repeat:no-repeat;
    background-position:center center;
}

.element {
    background-image:url(image.png);
    background-position:center center;
}

Das große Thema in CSS: Die Positionierung. Sie umfasst relativ wenige Befehle. Diese haben jedoch eine große Wirkung auf die Darstellung im Browser. Mit diesen Anweisungen werden grundlegende Layouts erstellt wie Raster, Rahmengerüste, Navigationen und Co.

Der Befehl „position“ gibt an, wie das entsprechende HTML Element positioniert wird:

• statisch im normalen HTML / CSS Fluss,
• relativ zum HTML / CSS Fluss,
• absolut (nimmt keine Höhe im HTML / CSS Fluss ein) oder
• fixed (nimmt keine Höhe im HTML / CSS Fluss ein und bleibt beim Scrollen stehen).

Mit float setzen wir Boxen / Block-Elemente nebeneinander. „float:left“ um das entsprechende Element links anzuordnen, auf der rechten Seite wird umflossen – oder umgekehrt mit „float:right;“. Mit clear beenden wir den Umfluss wieder. Der CSS Befehl wird dabei auf das folgende Element angewendet – also auf jenes, das nicht mehr umfließen soll.

Die Angabe „display“ besagt, wie sich das Element verhalten soll:

• none (das Element ist nicht sichtbar),
• block (das Element verhält sich wie ein Block-Element – verursacht somit einen „Absatz“),
• inline (das Element verursacht keinen Absatz) oder
• inline-block (Element verursacht keinen Absatz, es können jedoch Block-Eigenschaften wie Margins hinzugefügt werden).

Durch die Befehle visibility und opacity stellen wir die Sichtbarkeit und die Transparenz ein. Anders als „display:none;“ wird bei „visibility:hidden;“ das Objekt zwar nicht gezeigt, der Platz aber für das Objekt weiterhin freigehalten.

Weiterlesen

Die Außenabstände (Margins) verhalten sich bei CSS ähnlich wie die Innenabstände (Paddings). Der Margin Befehl definiert den Abstand von Elementen zueinander.

Wir sorgen mit dem CSS Befehl Margin zum Beispiel für einen Spalt zwischen zwei „Boxen“. Auch hier können wir wieder die Mischschreibweise verwenden. Zulässig sind Außenabstände nur bei Block-Elementen wie div, p, ul, li, ….

Innenabstände (Paddings) sorgen – wie der Name schon sagt – für die nötigen Abstände zwischen dem Inhalt der „Box“ und dem Rahmen / Ende der Box. Diese sollten nicht verwechselt werden mit den Außenabständen (Margins).

Haben wir beispielsweise eine Box mit blauem Hintergrund und wollen darauf weißen Text setzen, so sollten wir mit dem CSS Befehl einen definierten Innenabstand angeben. Dadurch erscheint der Text nicht direkt am „Rand der Box“. Mit einer „Padding“ Anweisung von 20 Pixeln erzeugen wir beispielsweise einen in vielen Fällen gut zu erkennenden Innenabstand zwischen Text und Rahmen. Das Erscheinungsbild des Textes wird über CSS für Schriften definiert. Um die CSS Datei klein zu halten, verwenden wir hier im Idealfall die Mischschreibweise (siehe unten).

Beispiel

.element {
    padding:20px;
    padding-top:50px;
    padding-bottom:100px;
}

Wir definieren über CSS Befehle ebenfalls den Rahmen von HTML Objekten. Dazu weisen wir diesem mindestens eine Rahmenstärke zu. Um Farbe und Stil des Rahmens zu modifizieren, verwenden wir weitere Befehle. Dazu können wir ebenfalls die Mischschreibweise von CSS nutzen.

Ein Beispiel für einen gemischten Rahmen-Befehl:border:2px dotted red;  (2 Pixel stark, gepunktet, rot)

So reicht eine Anweisung, um Stärke, Farbe und Stil anzugeben. Somit sparen wir uns einige Zeilen CSS Code und halten den Quellcode schlank. Auch ist es mit CSS möglich, bei Rahmen nur bestimmte Seiten anzusprechen. Das funktioniert zum Beispiel so: „border-top:3px solid green;“

Dies versieht den Rahmen am Kopf eines Objektes mit den definierten Eigenschaften zur Darstellung. In diesem Fall handelt es sich um einen durchgezogenen, 3 Pixel starken, grünen Rahmen. Per CSS Anweisung können bei Rahmen Innenabstand und Außenabstand festgelegt werden, damit Inhalte, beziehungsweise benachbarte Elemente, sich nicht zu nahe kommen.

Den Rahmen Abrunden können wir mir dem Befehl border-radius.

Beispiel

.element {
    border:3px solid rgb(230,180,40);
    border-top:1px dotted red;
    border-right:3px dashed;
}

Wir haben die Möglichkeit, Schriftart, Schriftgröße, -dicke, Farbe und Ausrichtung sowie die „Fallback-Schriftart“ zu definieren. Letztere nutzt der Browser nach Möglichkeit, falls die gewünschte Schrift nicht auf dem Computer des Benutzers installiert ist.

Mit speziellen Anweisungen ist es möglich, Text einzurücken oder die Groß- und Kleinschreibung zu erzwingen und zu steuern. Dadurch kann der Text in Normalschrift geschrieben werden. Er wird lediglich via CSS in Großbuchstaben oder Kleinbuchstaben umgewandelt – somit indiziert Google den Text in Normalschrift. Folgende CSS Befehle passen Schrift und Texte an:

Weiterlesen