CSS -Benutzeroberfläche
CSS-Benutzeroberfläche
In diesem Kapitel lernen Sie die folgenden Eigenschaften der CSS-Benutzeroberfläche kennen:
resizeoutline-offset
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
CSS-Größenänderung
Die resizeEigenschaft gibt an, ob (und wie) die Größe eines Elements vom Benutzer geändert werden soll.
Dieses div-Element kann vom Benutzer in der Größe verändert werden!
So ändern Sie die Größe: Klicken und ziehen Sie die untere rechte Ecke dieses div-Elements.
Im folgenden Beispiel kann der Benutzer nur die Breite eines <div>-Elements ändern:
Beispiel
div
{
resize: horizontal;
overflow: auto;
}
Das folgende Beispiel lässt den Benutzer nur die Höhe eines <div>-Elements skalieren:
Beispiel
div
{
resize: vertical;
overflow: auto;
}
Das folgende Beispiel lässt den Benutzer die Größe sowohl der Höhe als auch der Breite eines <div>-Elements ändern:
Beispiel
div
{
resize: both;
overflow: auto;
}
In vielen Browsern ist <textarea> standardmäßig in der Größe veränderbar. Hier haben wir die Eigenschaft resize verwendet, um die Größenänderung zu deaktivieren:
Beispiel
textarea {
resize: none;
}
CSS-Konturversatz
Die outline-offsetEigenschaft fügt einen Abstand zwischen einem Umriss und der Kante oder Umrandung eines Elements hinzu.
Hinweis: Kontur weicht von Rändern ab! Im Gegensatz zum Rahmen wird der Umriss außerhalb des Rahmens des Elements gezeichnet und kann anderen Inhalt überlappen. Außerdem ist der Umriss NICHT Teil der Abmessungen des Elements; Die Gesamtbreite und -höhe des Elements wird durch die Breite der Kontur nicht beeinflusst.
Im folgenden Beispiel wird die outline-offsetEigenschaft verwendet, um einen Abstand zwischen dem Rahmen und der Gliederung hinzuzufügen:
Beispiel
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
Eigenschaften der CSS-Benutzeroberfläche
Die folgende Tabelle listet alle Eigenschaften der Benutzeroberfläche auf:
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |