Interfejs użytkownika CSS
Interfejs użytkownika CSS
W tym rozdziale poznasz następujące właściwości interfejsu użytkownika CSS:
resizeoutline-offset
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Zmiana rozmiaru CSS
Właściwość resizeokreśla, czy (i jak) element powinien mieć możliwość zmiany rozmiaru przez użytkownika.
Ten element div może być zmieniany przez użytkownika!
Aby zmienić rozmiar: kliknij i przeciągnij prawy dolny róg tego elementu div.
Poniższy przykład umożliwia użytkownikowi zmianę rozmiaru tylko szerokości elementu <div>:
Przykład
div
{
resize: horizontal;
overflow: auto;
}
Poniższy przykład pozwala użytkownikowi zmienić rozmiar tylko wysokości elementu <div>:
Przykład
div
{
resize: vertical;
overflow: auto;
}
Poniższy przykład pozwala użytkownikowi zmienić zarówno wysokość, jak i szerokość elementu <div>:
Przykład
div
{
resize: both;
overflow: auto;
}
W wielu przeglądarkach domyślnie można zmieniać rozmiar <textarea>. Tutaj użyliśmy właściwości resize, aby wyłączyć możliwość zmiany rozmiaru:
Przykład
textarea {
resize: none;
}
Przesunięcie konturu CSS
Właściwość outline-offsetdodaje przestrzeń między konturem a krawędzią lub obramowaniem elementu.
Uwaga: kontur różni się od ramek! W przeciwieństwie do obramowania kontur jest rysowany poza obramowaniem elementu i może nakładać się na inną zawartość. Ponadto kontur NIE jest częścią wymiarów elementu; szerokość konturu nie ma wpływu na całkowitą szerokość i wysokość elementu.
W poniższym przykładzie użyto tej outline-offsetwłaściwości, aby dodać odstęp między obramowaniem a konturem:
Przykład
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;
}
Właściwości interfejsu użytkownika CSS
W poniższej tabeli wymieniono wszystkie właściwości interfejsu użytkownika:
| 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 |