CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben CSS-Hintergründe CSS-Grenzen CSS-Ränder CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung CSS-Text CSS-Schriftarten CSS-Icons CSS-Links CSS-Listen CSS-Tabellen CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste CSS-Dropdowns CSS-Bildergalerie CSS-Bild-Sprites CSS-Attribut-Selektoren CSS-Formulare CSS-Zähler CSS-Website-Layout CSS-Einheiten CSS-Spezifität CSS !wichtig CSS-Mathematikfunktionen

CSS-Erweitert

Abgerundete CSS-Ecken CSS-Randbilder CSS-Hintergründe CSS-Farben CSS-Farbschlüsselwörter CSS-Verläufe CSS-Schatten CSS-Texteffekte CSS-Webfonts CSS-2D-Transformationen CSS-3D-Transformationen CSS-Übergänge CSS-Animationen CSS-Tooltips Bilder im CSS-Stil CSS-Bildreflexion CSS-Objektanpassung CSS-Objektposition CSS-Maskierung CSS-Schaltflächen CSS-Paginierung CSS mehrere Spalten CSS-Benutzeroberfläche CSS-Variablen Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox

CSS- responsiv

RWD-Einführung RWD-Ansichtsfenster RWD-Rasteransicht RWD-Medienabfragen RWD-Bilder RWD-Videos RWD-Frameworks RWD-Vorlagen

CSS -Raster

Grid-Einführung Grid-Container Rasterelement

CSS -SASS

SASS-Tutorial

CSS- Beispiele

CSS-Vorlagen CSS-Beispiele CSS-Quiz CSS-Übungen CSS-Zertifikat

CSS- Referenzen

CSS-Referenz CSS-Selektoren CSS-Funktionen CSS-Referenz Aural CSS-websichere Schriftarten CSS animierbar CSS-Einheiten CSS PX-EM-Konverter CSS-Farben CSS-Farbwerte CSS-Standardwerte CSS-Browser-Unterstützung

CSS -Konturversatz


CSS-Konturversatz

Die outline-offsetEigenschaft fügt einen Abstand zwischen einem Umriss und dem Rand/Rand eines Elements hinzu. Der Raum zwischen einem Element und seinem Umriss ist transparent.

Das folgende Beispiel gibt einen Umriss an, der 15 Pixel außerhalb der Rahmenkante liegt:

Dieser Absatz hat einen Umriss von 15 Pixel außerhalb der Begrenzungskante.

Beispiel

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Das folgende Beispiel zeigt, dass der Raum zwischen einem Element und seinem Umriss transparent ist:

Dieser Absatz hat einen Umriss von 15px außerhalb des Randes.

Beispiel

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Testen Sie sich mit Übungen

Übung:

Legen Sie für das <div>-Element einen durchgehenden 5-Pixel- Umrissrahmen fest.

<style>
div {
  : solid;
  : 5px;
}
</style>

<body>

<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>

</body>


Alle CSS-Gliederungseigenschaften

Property Description
outline A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color Sets the color of an outline
outline-offset Specifies the space between an outline and the edge or border of an element
outline-style Sets the style of an outline
outline-width Sets the width of an outline