User Interface (UI) định nghĩa cách con người tương tác với hệ thống thông tin. Nói đơn giản, UI gồm các trang, màn hình, nút, biểu mẫu và yếu tố trực quan khác. Các yếu tố này cho phép người dùng tương tác với thiết bị. Mọi ứng dụng và website đều có một user interface.
Trong CSS, các thuộc tính user interface cho phép ta thay đổi các phần tử thành component UI chuẩn. Trong bài viết này, chúng ta sẽ thảo luận về hai thuộc tính quan trọng:
- resize
- outline-offset
. resize Property
Thuộc tính resize cho phép người dùng thay đổi kích thước một phần tử (thường là một box). Tuy nhiên, thuộc tính này không áp dụng cho các phần tử inline hoặc block có overflow visible. Để thuộc tính resize hoạt động, overflow cần được đặt thành "scroll", "auto", hoặc "hidden".
Syntax:
resize: horizontal | vertical | both;
Values:
- horizontal: Cho phép người dùng thay đổi kích thước chiều rộng của phần tử.
- vertical: Cho phép người dùng thay đổi kích thước chiều cao của phần tử.
- both: Cho phép người dùng thay đổi kích thước cả chiều cao và chiều rộng.
Example 1: Thay đổi kích thước theo chiều ngang
HTML<!DOCTYPE html>
<html>
<head>
<title>user interface Property</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body style="text-align: center;">
<div style="background: green;">
<h1 style="color: white;">GeeksforGeeks</h1>
<p style="color: white;"> resize: horizontal;</p>
</div>
</body>
</html>
Output:
Example 2: Thay đổi kích thước theo chiều dọc
<!DOCTYPE html>
<html>
<head>
<title>user interface Property</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body style = "text-align: center;">
<div style = "background: green;">
<h1 style = "color: white;">GeeksforGeeks</h1>
<p style = "color: white;"> resize: vertical;</p>
</div>
</body>
</html>
Output:
Example 3:
Thay đổi kích thước cả chiều ngang và chiều dọc
html<!DOCTYPE html>
<html>
<head>
<title>user interface Property</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body style = "text-align: center;">
<div style = "background: green;">
<h1 style = "color: white;">GeeksforGeeks</h1>
<p style = "color: white;"> resize: both;</p>
</div>
</body>
</html>
Output:
. outline-offset Property
Thuộc tính outline-offset trong CSS xác định khoảng cách giữa outline của phần tử và border. Khoảng trống giữa phần tử và outline là trong suốt.
Syntax:
outline-offset: length;
Note:
lengthlà giá trị xác định khoảng cách giữa phần tử và outline của nó.
Example:
html<!DOCTYPE html>
<html>
<head>
<title>user interface property</title>
<style>
div.ex1 {
margin: auto;
padding: 8px;
color: white;
width: 600px;
border: 1px solid black;
background-color: green;
outline: 4px solid red;
outline-offset: 15px;
}
</style>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">GeeksforGeeks</h1>
<br>
<div class="ex1">A computer science portal for geeks.</div>
</body>
</html>
Output:
Supported Browsers:
Các trình duyệt được hỗ trợ bởi thuộc tính outline-offset được liệt kê dưới đây:
- Apple Safari 3.1
- Google Chrome 4.0
- Firefox 3.5
- Opera 10.5
- Internet Explorer 15.0