CSS

⌘K
  2. Home
  4. Docs
  6. CSS
  8. CSS Outline
  10. CSS Outline Shorthand

CSS Outline Shorthand

CSS Outline Shorthand: outline in CSS ist eine Shorthand-Eigenschaft, mit der Sie mehrere Outline-Eigenschaften in einer einzigen Zeile festlegen können. Sie ermöglicht die gleichzeitige Definition von outline-width, outline-style und outline-color, wodurch der Code kompakter und übersichtlicher wird. Outlines liegen außerhalb des Box-Modells und beeinflussen nicht die Größe oder Position eines Elements.

Syntax der Shorthand-Eigenschaft outline

outline: [outline-width] [outline-style] [outline-color];
  • outline-width: Bestimmt die Breite des Umrisses (z. B. thin, medium, thick oder eine spezifische Länge wie 2px).
  • outline-style: Legt den Stil des Umrisses fest (z. B. solid, dotted, dashed, double).
  • outline-color: Bestimmt die Farbe des Umrisses (z. B. red, #FF5733, rgb(255, 87, 51)).

Beispiele für outline Shorthand

/* Beispiel 1: Einfache Shorthand-Syntax */
.box1 {
    outline: 2px solid #FF5733; /* Breite, Stil und Farbe */
}

/* Beispiel 2: Nur outline-style und outline-width festlegen */
.box2 {
    outline: thick dashed; /* Stil und Breite; Farbe bleibt Standard */
}

/* Beispiel 3: outline-color mit Standardwerten für Breite und Stil */
.box3 {
    outline: red; /* Nur Farbe, Standardwerte für Breite und Stil */
}

Beispiel zur Kombination aller Outline-Eigenschaften

/* Detaillierte Definition mit allen Outline-Werten */
.button {
    outline: 3px dotted rgba(0, 128, 0, 0.6); /* Grüner, halbtransparenter Umriss */
}

Hinweise zur Verwendung

  • Browser-Kompatibilität: Alle modernen Browser unterstützen die Shorthand-Eigenschaft outline.
  • Barrierefreiheit: Ein klarer und gut sichtbarer Outline-Umriss hilft bei der Navigation, besonders für Benutzer:innen, die mit der Tastatur arbeiten.

Häufig gestellte Fragen

Kann ich outline in CSS auch nur mit einer Eigenschaft verwenden?

Ja, outline akzeptiert auch eine einzige Eigenschaft. Wenn Sie z. B. nur outline: red; verwenden, wird die Standardbreite und der Standardstil hinzugefügt.

Beeinflusst outline die Größe des Elements in CSS?

Nein, Outlines liegen außerhalb des Box-Modells und verändern daher die Größe oder Position des Elements nicht.

Zusammenfassung

Die Shorthand-Eigenschaft outline in CSS ist eine praktische Methode, um Umrissfarbe, -breite und -stil in einem Schritt zu definieren. Sie sorgt für kürzeren Code und kann das Layout durch fokussierte Umrisse verbessern.

Übungsaufgabe

Erstellen Sie ein Beispiel für eine outline-Definition mit einer Breite von 2px, einem double-Stil und einer Farbe Ihrer Wahl.

Gegenfeld Team

Das Team von Gegenfeld engagiert sich für die Veröffentlichung allgemein zugänglicher Bildungsinhalte im Bereich Marketing, E-Commerce und Webentwicklung.