PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: outline, Kategorien: Bildschirm­darstellung (allgemein), Rahmen (allgemein), User interface (CSS 2.1), Basic User Interface (CSS 3)

Kontur oder Umriss. outline liegt über dem HTML-Element und nimmt keinen eigenen Raum ein.

(folgt)

CSS-Eigenschaft: outline
KurzbeschreibungWerteStandardwertKategorieHinweis
Kontur oder Umriss. outline liegt über dem HTML-Element und nimmt keinen eigenen Raum ein.see individual properties
Allgemein:
Bildschirm­darstellung
Rahmen
CSS 2.1:
User interface
CSS 3:
Basic User Interface
 

Verwandte Eigenschaften aus der Kategorie: Bildschirm­darstellung (allgemein), Rahmen (allgemein), User interface (CSS 2.1), Basic User Interface (CSS 3):

Folgendes ist beim Einsatz von outline zu beachten:

  • Es ist die Kurzschreibweise für outline-color, outline-style und outline-width.
  • outline ist am besten über den Vergleich zu border zu verstehen.
  • Farben, Style und Dicke des outline sind genauso wie bei border zu verwenden.
  • Im Gegensatz zur border ist outline weder Teil vom Box-Modell, noch Teil im Elementfluss. Das hat folgende Bedeutung:
    • Ein HTML-Element wird durch ein outline nicht breiter bzw. höher.
    • outline liegt nicht um ein HTML-Element, sondern oberhalb. Benachbarte Bereiche können also potentiell überdeckt werden.
  • Im Fließtext umrandet ein outline den Bereich komplett, im Gegensatz zur border sind bei mehreren Zeilen wie im Beispiel 3 die Linien rechts und links geschlossen. Mit Ausnahme vom Firefox werden auch zwischen den Zeilen keine Linien gezeichnet, es wird also der Bereich umrandet.
  • IE6 und IE7 unterstützen outline nicht, wahrscheinlich ist das ein Grund, dass man outline (mit einer Ausnahme) in der Praxis so gut wie nicht findet.
  • outline ist vom W3C nicht dem "Box-Modell" zugeordnet, sondern dem Bereich "User Interface". Vor allem wird outline im Zusammenhang mit dem Fokus der Tab-Position auf der Seite beschrieben, der Benutzer einer Webseite soll über den outline die aktuelle Position erkennen. Dies haben die Browser per Default auf Links und Eingabefelder implementiert, es entspricht dem kleine Krüsel-Rahmen um die Links legen, wenn man die Seite mit der Tab-Taste ab-surft, bzw. Links anklickt. Auch die alten Netscape konnten das bereits. Dieser "gedottete" Rahmen ist bei vielen Webdesigner verpönt, von daher sieht man in der Praxis häufig folgende Anweisung a { outline:0px } und dient dazu, dass der Rahmen unterdrückt wird. Rein optisch kann man diese Maßnahme nachvollziehen, aus Sicht der Benutzbarkeit einer Webseite sollte man den outline von den Links nicht weg stylen. Das wiederspricht dem W3C-Standard und verschlechtert die Benutzbarkeit.
  • Benötigt mindestens die Angabe von outline-style und outline-width, damit der Umriss angezeigt wird. Wird keine Farbe angegeben, wird die Schriftfarbe verwendet, die für den Bereich definiert ist.
Browserunterstützung von outline
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu outline:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    orphans


Beispiele

HTML:

<div>
   <h1>Überschrift</h1>
</div>

CSS:

div {
   border: 1px solid #999;
}
h1 {
   outline: 2px solid red;
}

Beispiel Nr. 1 So sieht's aus:

Überschrift

 

HTML:

<div>
   <h2 class="doOutline">Überschrift mit Outline</h2>
   <h2 class="doBorder">Überschrift mit Border</h2>
</div>

CSS:

h2 {
   width: 12em;
}
.doOutline {
   outline: 12px solid red;
}
.doBorder {
   border: 12px solid red;
}
/* Die obere Überschrift hat ein Outline, die Dicke wird überlagert.
Die untere Überschrift hat eine Border, die Überschrift wächst in der Höhe und Breite um die Stärke der Border an. */

Beispiel Nr. 2 So sieht's aus:

Überschrift mit Outline

Überschrift mit Border

 

HTML:

<p>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: <span class="outline">Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht</span> erst gelesen.</p>
<p>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: <span class="border">Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht</span> erst gelesen.</p>

CSS:

span.outline {
   outline: 1px solid blue;
}
span.border {
   border: 1px solid blue;
}
/* "outline" umrandet den ganzen Textblock ohne Zwischenlinien (Ausnahme: Firefox, der zeichnet auch Zwischenlinien)
"border" umrandet zeilenweise, zeichnet in der ersten Zeile einen linken Rahmen, an der letzten Zeile einen rechten Rahmen */

Beispiel Nr. 3 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.112 sec.