Giao diện người dùng CSS
Giao diện người dùng CSS
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính giao diện người dùng CSS sau:
resizeoutline-offset
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Thay đổi kích thước CSS
Thuộc resizetính chỉ định nếu (và cách thức) một phần tử nên được người dùng thay đổi kích thước.
Phần tử div này có thể thay đổi kích thước bởi người dùng!
Để thay đổi kích thước: Nhấp và kéo góc dưới cùng bên phải của phần tử div này.
Ví dụ sau cho phép người dùng chỉ thay đổi kích thước chiều rộng của phần tử <div>:
Thí dụ
div
{
resize: horizontal;
overflow: auto;
}
Ví dụ sau cho phép người dùng chỉ thay đổi kích thước chiều cao của phần tử <div>:
Thí dụ
div
{
resize: vertical;
overflow: auto;
}
Ví dụ sau cho phép người dùng thay đổi kích thước cả chiều cao và chiều rộng của phần tử <div>:
Thí dụ
div
{
resize: both;
overflow: auto;
}
Trong nhiều trình duyệt, <textareosystem có thể thay đổi kích thước theo mặc định. Ở đây, chúng tôi đã sử dụng thuộc tính thay đổi kích thước để vô hiệu hóa khả năng thay đổi kích thước:
Thí dụ
textarea {
resize: none;
}
Phần bù CSS Outline
Thuộc outline-offsettính thêm khoảng cách giữa đường viền và cạnh hoặc đường viền của một phần tử.
Lưu ý: Đường viền khác với đường viền! Không giống như đường viền, đường viền được vẽ bên ngoài đường viền của phần tử và có thể chồng lên nội dung khác. Ngoài ra, đường viền KHÔNG phải là một phần của các kích thước của phần tử; tổng chiều rộng và chiều cao của phần tử không bị ảnh hưởng bởi chiều rộng của đường viền.
Ví dụ sau sử dụng thuộc outline-offsettính để thêm khoảng cách giữa đường viền và đường viền:
Thí dụ
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;
}
Thuộc tính giao diện người dùng CSS
Bảng sau liệt kê tất cả các thuộc tính giao diện người dùng:
| 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 |