Gliederung

Wir haben uns zuvor die Rahmeneigenschaften angesehen, mit denen Sie einen Rahmen um ein Element ziehen können. Mit den Eigenschaften outline können Sie einen zusätzlichen Rahmen für zusätzliche visuelle Aufmerksamkeit für Ihr Element festlegen. Gliederung ist genauso einfach anzuwenden wie eine Umrandung. Schauen Sie sich dieses Beispiel an, um den Beweis zu erbringen:

<style type="text/css">
.box {
	background-color: #eee;
	outline: 3px solid LightCoral;
	border: 3px solid LightBlue;
	padding: 5px 10px;
}
</style>

<div class="box">Hello, world!</div>

Unterschiede zwischen Rand und Umriss

In unserem ersten Beispiel sehen die Eigenschaften border und outline zwar identisch aus, es gibt jedoch einige wichtige Unterschiede:

· Sie können nicht wie beim Rahmen für die vier Seiten eines Elements eine andere Umrissbreite, einen anderen Stil und eine andere Farbe anwenden. Die angegebenen Werte werden für alle vier Seiten des Elements verwendet.

· Der Umriss ist nicht Teil der Elementbemaßungen, so wie der Rand. Dies bedeutet, dass sich die Abmessungen des Elements nicht ändern, egal wie dick der Umriss ist, den Sie auf das Element anwenden. Dies bedeutet auch, dass der Browser nicht den erforderlichen Platz für Ihre Gliederung reserviert - Sie müssen sicherstellen, dass er darauf passt, ohne andere Elemente zu überlappen.

Kurze-Eigenschaft

Die outline-Eigenschaft ist eine Kurzform (ein Thema, auf das wir bereits in den vorherigen Kapiteln näher eingegangen sind), die sich in outline-breite, outline-stil und Eigenschaften für Konturfarbe niederschlägt . Das bedeutet natürlich, dass Sie die Eigenschaften alleine verwenden können, wenn Sie:

<style type="text/css">
.box {
	background-color: #eee;
	border: 3px solid LightBlue;
	padding: 5px 10px;
	outline-width: 3px;
	outline-style: solid;
	outline-color: LightCoral;
}
</style>

<div class="box">Hello, world!</div>

Es ist nur eine andere Möglichkeit, das Gleiche zu tun, was wir im ersten Beispiel getan haben.

Umrissfarbe

Nur eine einfache alte Farbeigenschaft, bei der Sie die Farbe für den Umriss auf verschiedene Arten definieren können, wie es bei allen farbbezogenen Eigenschaften in CSS der Fall ist. In diesem Tutorial finden Sie an anderer Stelle eine vollständige exemplarische Vorgehensweise für alle Optionen, die Sie beim Definieren einer Farbe in CSS haben.

Umriss breite

Funktioniert ähnlich wie Ränder und Abstände - kann entweder ein absoluter Wert sein, wie in diesem Beispiel ein relativer Wert, oder einer der vordefinierten Werte für die Konturbreite: Dünn, Mittel oder Dick. Wenn Sie die vordefinierten Werte verwenden, liegt es am Browser, diese zu interpretieren, wodurch Sie im Grunde weniger Kontrolle darüber haben, wie Ihre Arbeit auf allen verschiedenen Geräten und Browsern aussieht.

Umriss Stil

Bisher haben wir nur den festen Umrissstil verwendet, aber genau wie für Rahmen stehen einige zur Auswahl: hidden,dotted, dashed, solid, double, groove, ridge, inset und outset. Mal sehen, wie sie aussehen:

<style type="text/css">
.box {
	outline-color: CornflowerBlue;
	outline-width: 4px;
	margin: 10px;
	float: left;
	border: 2px solid LightCoral;
	padding: 5px 10px;
}
</style>

<div class="box" style="outline-style: dashed;">Dashed</div>
<div class="box" style="outline-style: dotted;">Dotted</div>
<div class="box" style="outline-style: double;">Double</div>
<div class="box" style="outline-style: groove;">Groove</div>
<div class="box" style="outline-style: inset;">Inset</div>
<div class="box" style="outline-style: outset;">Outset</div>
<div class="box" style="outline-style: ridge;">Ridge</div>
<div class="box" style="outline-style: solid;">Solid</div>

Konturversatz

Eine coole Sache bei Konturen ist, dass Sie mit der outline-offset -Eigenschaft einen Abstand zwischen der Kontur und der Grenze erstellen können, wenn Sie möchten. Es nimmt eine CSS-Längeneinheit an und der leere Raum zwischen dem Rand (falls vorhanden) und der Kontur ist transparent und nimmt dabei die Hintergrundfarbe des übergeordneten Elements an. Hier ist ein Beispiel:

<style type="text/css">
.box {
	background-color: #eee;
	outline: 3px solid LightCoral;
	outline-offset: 3px;
	border: 3px solid LightBlue;
	padding: 5px 10px;
}
</style>

<div class="box">Hello, world!</div>

Bitte beachten Sie jedoch, dass die Unterstützung für diese Eigenschaft derzeit etwas begrenzt ist. Zum Beispiel wird es von keiner Version von Internet Explorer unterstützt, aber die Unterstützung wird wahrscheinlich in einer kommenden Version hinzugefügt.

Zusammenfassung

Mit den Gliederungseigenschaften können Sie einen (zusätzlichen) Rahmen um ein Element zeichnen, der insbesondere für zusätzliche visuelle Aufmerksamkeit verwendet wird. Die Gliederung funktioniert ähnlich wie die Umrandung, jedoch mit ein paar Ausnahmen: Sie müssen für alle vier Seiten die gleiche Breite, den gleichen Stil und die gleiche Farbe verwenden. Und der von der Gliederung belegte Raum wird nicht als Teil des Elements reserviert.