initial commit

1 files changed, 162 insertions, 0 deletions

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
+---
+<div>{{CSSRef}}</div>
+
+<p>Das <strong><code>outline</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Shorthand_properties">Eigenschaftskürzel</a> setzt alle outline Eigenschaften in einer einzigen Deklaration.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
+
+<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<h2 id="Bestandteileigenschaften"><strong class="b5">Bestandteileigenschaften</strong></h2>
+
+<p>Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/outline-color"><code>outline-color</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/outline-style"><code>outline-style</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/outline-width"><code>outline-width</code></a></li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 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;
+</pre>
+
+<p>Die <code>outline</code> Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> 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: <code>none</code>. Eine bemerkenswerte Ausnahme bilden <code>input</code> Elemente, die von den Browsern als Standard-Stil vorgegeben werden.</p>
+</div>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;'outline-color'&gt;</code></dt>
+ <dd>Legt die Farbe des Umrisses fest. Standardeinstellung ist die <code>currentcolor</code> (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe {{cssxref("outline-color")}}.</dd>
+ <dt><code>&lt;'outline-style'&gt;</code></dt>
+ <dd>Legt den Stil des Umrisses fest. Standardeinstellung ist <code>none</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-style")}}.</dd>
+ <dt><code>&lt;'outline-width'&gt;</code></dt>
+ <dd>Legt die Dicke der Umrisslinie fest. Standardeinstellung ist <code>medium</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-width")}}.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><a href="/de/docs/Web/CSS/border">Borders</a> und <code>outline</code> sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:</p>
+
+<ul>
+ <li>Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.</li>
+ <li>
+  <p>Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.</p>
+ </li>
+</ul>
+
+<p>Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren <a href="/de/docs/Web/CSS/Initialwert">Initialwert</a> gesetzt.</p>
+
+<h2 id="Bedenken_zu_Zugänglichkeit">Bedenken zu Zugänglichkeit</h2>
+
+<p>Wenn Sie <code>outline</code> den Wert von <code>0</code> oder <code>none</code> 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.</p>
+
+<ul>
+ <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
+ <li>
+  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p>
+ </li>
+</ul>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beschreibung_2">Beschreibung</h2>
+
+<h3 id="Verwendung_von_Umrissen_zum_Setzen_eines_Fokusstils">Verwendung von Umrissen zum Setzen eines Fokusstils</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="Using_outline_to_set_a_focus_style">
+<pre class="brush: html notranslate">&lt;a href="#"&gt;This link has a special focus style.&lt;/a&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">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;
+}
+</pre>
+</div>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Anfangsdefinition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.outline")}}</p>
+</div>