User Interface trong CSS | Giao diện người dùng trong CSS

Thuộc tính user interface trong CSS cho phép bạn thay đổi bất kỳ phần tử nào vào một trong các phần tử user interface chuẩn.

Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong User Interface trong CSS3:

Giá trị	Miêu tả
appearance	Cho phép người dùng làm cho các phần tử như là các phần tử UI
box-sizing	Cho phép người dùng cố định các phần tử trên một khu vực
icon	Được sử dụng để cung cấp Icon trên một khu vực
resize	Được sử dụng để resize kích cỡ của phần tử trên một khu vực
outline-offset	Được sử dụng để vẽ đằng sawu Outline
nav-down	Được sử dụng để di chuyển xuống khi người dùng nhấn nút mũi tên trỏ xuống trên bàn phím
nav-left	Được sử dụng để di chuyển sang trái khi người dùng nhấn nút mũi tên trỏ sang trái trên bàn phím
nav-right	Được sử dụng để di chuyển sang phải khi người dùng nhấn nút mũi tên trỏ sang phải trên bàn phím
nav-up	Được sử dụng để di chuyển lên khi người dùng nhấn nút mũi tên trỏ lên trên bàn phím

Quảng cáo

Ví dụ minh họa thuộc tính resize trong CSS

Thuộc tính resize có 3 giá trị thường được sử dụng là:

horizontal
vertical
both

Sử dụng giá trị both trong thuộc tính resize trong CSS3 UI như sau:

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>
   <body>
      <div>Hoc CSS co ban tai VietJack</div>
   </body>
</html>

Kết quả là:

Thuộc tính outline-offset trong CSS

Outline nghĩa là vẽ một đường bên ngoài đường viền bao quanh phần tử. Ví dụ sau minh họa cách sử dụng thuộc tính outline-offset trong CSS:

<html>
   <head>
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>
   <body>
      <div>Hoc CSS co ban tai VietJack</div>
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: