Eigenschaft
outline
oder mit den Einzeleigenschaften
outline-style
(Rahmentyp),
outline-width
(Rahmendicke) und
outline-color
(Rahmenfarbe) bestimmen. Ergänzt wird dieses Ensemble durch die spezielle Eigenschaft
outline-offset
, mit deren Hilfe sich der Abstand des Funktionsrahmens zum Elementinhalt verändern lässt, ohne dass dabei benachbarte Elemente in ihrer Position verschoben werden.
Beispiel
    
    
    
    
    
    
    
    
    

    Im Rahmen
    unseres heutigen Vortrags …
    

    

… informieren wir

    
    
Erläuterung
    Das Beispiel zeigt zwei Elemente, die einen Funktionsrahmen erhalten: ein Inline-Element (
span
) und ein Block-Element (
p
). Die Eigenschaften der Funktionsrahmen werden im Dokumentkopf in einem
style
-Bereich für entsprechende Klassennamen definiert.
    Im Fall des
p
-Elements wird die zusammenfassende Eigenschaft
outline
verwendet. Sie erwartet eine Angabe zur Rahmendicke, zum Rahmentyp und zur Rahmenfarbe. Als Werte können Sie alles zuweisen, was auch bei der bereits beschriebenen
border
-Eigenschaft möglich ist. Beim
span
-Element werden im Beispiel die Einzeleigenschaften
outline-width
,
outline-style
und
outline-color
verwendet, um das Aussehen des Funktionsrahmens zu bestimmen.
    Beim
p
-Element kommt außerdem die Eigenschaft
outline-offset
zum Einsatz. Der Rahmen wird dadurch im Beispiel mit 5 Pixeln mehr Abstand um das Element gezogen. Dadurch werden allerdings keine Nachbarelemente anders positioniert. Notfalls überschneiden sich der Rahmen und die Inhalte von Nachbarelementen.
    Bild 14.20: Darstellung der Rahmen mit der outline-Eigenschaft
Weitere Hinweise
    Bei
outline
-Rahmen sind derzeit keine Einzeleigenschaften für einzelne Rahmenseiten vorgesehen. Die Argumentation dahinter ist, dass Funktionsrahmen im Gegensatz zu Schmuckrahmen nur für Signaleffekte genutzt werden sollten, typischerweise auch in Verbindung mit Scripting. Ein Anwendungsfall könnte etwa sein, beim Überprüfen von Formulareingaben den Fokus in ein Pflichtfeld zu setzen, in dem der Anwender nichts eingegeben hat. Gleichzeitig könnte das Script dafür sorgen, dass dieses Eingabefeld mittels eines
outline
-Rahmens signalisierend hervorgehoben wird.
Referenzinformationen
    CSS-Eigenschaften
outline
,
    CSS-Eigenschaften
outline-width
,
outline-style
,
outline-color, outline-offset
:

14.7      Hintergrundfarben und Hintergrundbilder
    Fast alle sichtbaren Elemente eignen sich potentiell für eine Hintergrundgestaltung. Die Gründe, ein Element mit einer Hintergrundfarbe oder einer Hintergrundgrafik zu versehen, können sehr unterschiedlich sein. So ist die Hintergrundgestaltung ein sehr wichtiges Mittel des Webseitenlayouts, denn es ist das Mittel der Wahl, um farbige Flächen zu erzeugen. Manchmal werden Hintergrundfarben oder Hintergrundbilder aber auch verwendet, um Signalwirkungen zu erzeugen, oder etwa für automatische Hyperlink-Icons.
14.7.1    Hintergrundfarben
    Sie können für ein HTML-Element eine Hintergrundfarbe definieren.
Beispiel
    
    
    
    
    
    
    
    
    

Hintergründig!

    

    Hinter dem Internet kommt das
    Hinternet
    

    

Dies hat nichts zu sagen

    

     Im Kinderzimmer herrscht das
    Kindernet
    

    

Auch jenes nicht minder

    
    
    Bild 14.21: Das Hintergrundfarben-Beispiel im Browser
Erläuterung
    Mit
background-color:
können Sie eine Hintergrundfarbe bestimmen. Zulässige Wertzuweisungen sind alle Arten von Farbwerten und Farbnamen sowie der Default-Wert
transparent
oder der Wert
inherit
(gleiche Hintergrundfarbe