CSS Überblick Eigenschaften
Ein Entwurf ist eine Linie, um ein Element gezogen - außerhalb der Grenze. Dies kann verwendet werden ein Element zu machen "stand out" .
Die CSS - outline Eigenschaften geben Sie den Stil, Farbe und Breite eines Umrisses.
Dieses Element hat einen dünnen schwarzen Rand und eine doppelte Kontur, die 10px breit und grün ist.
CSS Outline
Ein outline ist eine Linie, die sich um Elemente (außerhalb der Grenzen) gezogen wird , das Element zu machen "stand out" .
Allerdings ist der outline ist Eigentum unterscheidet sich von der Eigenschaft border - Der outline ist nicht ein Teil eines Elements Dimensionen; Die gesamte Breite und Höhe des Elements ist durch die Breite des Umrisses nicht betroffen.
Outline Stil
Die outline-style - Eigenschaft gibt den Stil der Kontur.
Die outline-style Eigenschaft kann einen der folgenden Werte haben:
-
dotted- Definiert einen gepunkteten Umriss -
dashed- Definiert eine gestrichelte Kontur -
solid- Definiert einen festen Umriss -
double- Legt eine doppelte Kontur -
groove- Definiert eine 3D - gerillten Kontur. Die Wirkung ist abhängig von der Kontur-Farbwert -
ridge- Definiert eine 3D geriffelte Kontur. Die Wirkung ist abhängig von der Kontur-Farbwert -
inset- Definiert eine 3D - Einsatz Kontur. Die Wirkung ist abhängig von der Kontur-Farbwert -
outset- Definiert eine 3D Anfang Kontur. Die Wirkung ist abhängig von der Kontur-Farbwert -
none- Legt keinen Umriss -
hidden- Legt eine versteckte Kontur
Das folgende Beispiel stellt zunächst einen dünnen schwarzen Rand um jedes <p> Element, dann zeigt es die verschiedenen outline-style - Werte:
Beispiel
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Ergebnis:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Versuch es selber "  | Hinweis: Keiner der anderen CSS - Umriss unten beschriebenen Eigenschaften wird keine Wirkung , wenn der outline-style Eigenschaft festgelegt ist! |
|---|
Umrissfarbe
Die outline-color - Eigenschaft wird verwendet , um die Farbe der Kontur zu setzen.
Die Farbe kann durch eingestellt werden:
- Name - einen Farbnamen angeben, wie "red"
- RGB - geben Sie einen RGB - Wert, wie "rgb(255,0,0)"
- Hex - geben Sie einen Hex - Wert, wie "#ff0000"
- umkehren - führt eine Farbumkehr (die sicherstellt, dass der Umriss sichtbar ist, unabhängig von der Farbe Hintergrund)
Beispiel
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Ergebnis:
A colored outline.
Skizzieren Breite
Die outline-width - Eigenschaft gibt die Breite der Kontur.
Die Breite kann als eine bestimmte Größe (in eingestellt werden px, pt, cm, em dünn, mittel oder dick, etc.) oder durch die Verwendung einer der drei vordefinierten Werten.
Beispiel
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Ergebnis:
A thick outline.
A thinner outline.
Outline - Stenografie Eigenschaft
Um den Code zu verkürzen, ist es auch möglich, alle einzelnen Umriss Eigenschaften in einer Eigenschaft angeben.
Der outline Eigenschaft ist eine zusammenfassende Eigenschaft für die folgenden einzelnen Umriss Eigenschaften:
-
outline-width -
outline-style(erforderlich) -
outline-color
Beispiel
p {
border: 1px solid black;
outline: 5px dotted red;
}Ergebnis:
An outline.
Testen Sie sich mit Übungen!
Alle CSS-Umriss Eigenschaften
| Eigentum | Beschreibung |
|---|---|
| outline | Legt die alle Umriss Eigenschaften in einer Erklärung |
| outline-color | Setzt die Farbe eines Umrisses |
| outline-offset | Gibt den Raum zwischen einem Umriss und dem Rand oder Rand eines Elements |
| outline-style | Legt den Stil eines Umrisses |
| outline-width | Legt die Breite eines Umrisses |