From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/outline/index.html | 162 ++++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 files/de/web/css/outline/index.html (limited to 'files/de/web/css/outline') diff --git a/files/de/web/css/outline/index.html b/files/de/web/css/outline/index.html new file mode 100644 index 0000000000..48b3666cce --- /dev/null +++ b/files/de/web/css/outline/index.html @@ -0,0 +1,162 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - CSS Eigenschaft + - CSS Outline + - Layout + - Referenz + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

Das outline CSS Eigenschaftskürzel setzt alle outline Eigenschaften in einer einzigen Deklaration.

+ +
{{EmbedInteractiveExample("pages/css/outline.html")}}
+ + + +

Bestandteileigenschaften

+ +

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

+ + + +

Syntax

+ +
/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* Global values */
+outline: inherit;
+outline: initial;
+outline: unset;
+
+ +

Die outline Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.

+ +
+

Hinweis: Der Umriss ist für viele Elemente unsichtbar, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf keinen Stil eingestellt ist: none. Eine bemerkenswerte Ausnahme bilden input Elemente, die von den Browsern als Standard-Stil vorgegeben werden.

+
+ +

Values

+ +
+
<'outline-color'>
+
Legt die Farbe des Umrisses fest. Standardeinstellung ist die currentcolor (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe {{cssxref("outline-color")}}.
+
<'outline-style'>
+
Legt den Stil des Umrisses fest. Standardeinstellung ist none, wenn nicht vorhanden. Siehe {{cssxref("outline-style")}}.
+
<'outline-width'>
+
Legt die Dicke der Umrisslinie fest. Standardeinstellung ist medium, wenn nicht vorhanden. Siehe {{cssxref("outline-width")}}.
+
+ +

Beschreibung

+ +

Borders und outline sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:

+ + + +

Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Initialwert gesetzt.

+ +

Bedenken zu Zugänglichkeit

+ +

Wenn Sie outline den Wert von 0 oder none zuweisen, wird der Standard-Fokussierungsstil des Browsers entfernt. Wenn ein Element mit ihm interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.

+ + + +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beschreibung

+ +

Verwendung von Umrissen zum Setzen eines Fokusstils

+ +

HTML

+ +
+
<a href="#">This link has a special focus style.</a>
+
+ +

CSS

+ +
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}Keine Änderung.
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Anfangsdefinition
+ +

Browser Kompatibilität

+ +
+ + +

{{Compat("css.properties.outline")}}

+
-- cgit v1.2.3-54-g00ecf