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ử ...

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/td>
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

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à:

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; 
            awidth: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>
   <body>
      <div>Hoc CSS co ban tai code24h</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&gt
      <style>
         div {
            margin: 20px;
            padding: 10px;
            awidth: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>
   <body>
      <div>Hoc CSS co ban tai code24h</div>
   </body>
</html>

Kết quả là:

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 code24h.com:

Bài liên quan

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ử ...

Trịnh Tiến Mạnh viết 12:41 ngày 14/08/2018

Kiểm thử giao diện người dùng - GUI

Kiểm thử giao diện người dùng (GUI): Kiểm thử giao diện người dùng là một kỹ thuật kiểm thử được sử dụng để xác định sự hiện diện của các khuyết tật trên một sản phẩm hoặc phần mềm được kiểm tra bằng cách sử dụng giao diện người dùng đồ họa [GUI]. Kiểm thử GUI là một kỹ thuật kiểm thử ...

Trịnh Tiến Mạnh viết 17:50 ngày 12/08/2018

75 tips để cải thiện giao diện người dùng

Trước hết, để nói về 1 giao diện người dùng tốt là giao diện có giá trị chuyển đổi cao và dễ sử dụng. Nói cách khác, giao diện người dùng tốt là phải đáp ứng được yêu cầu của 2 đối tượng là các doanh nghiệp và người dùng. Dưới đây là 1 số ý tưởng để cải thiện vấn đề này (đã được sử dụng thực tế và ...

Bùi Văn Nam viết 17:32 ngày 12/08/2018

Mobile Testing - Giao diện người dùng

Giả sử, chúng ta đang sử dụng một ứng dụng trên điện thoại di động, và điều thú vị là, bạn gặp phải các tình huống sau: Các nút hiển thị lệch nhau, không có trật tự Các đoạn văn bản bị cắt giữa chừng, hiển thị không đủ thông tin Lịch không hiển thị Quả thực, những điều này sẽ gây khó chịu ...

Bùi Văn Nam viết 15:46 ngày 12/08/2018

Hướng dẫn nhanh để bắt đầu với thiết kế giao diện người dùng (User Experience Design)

User Experience Design là gì? UX Design là quá trình nâng cao sự hài lòng của người dùng, thông qua cải thiện khả năng sử dụng và tiếp cận đến sự tương tác giữa người truy cập với các trang web hoặc sản phẩm... Trong khi UX không giới hạn các trang web hoặc ứng dụng, các nguyên tắc đằng sau ...

Tạ Quốc Bảo viết 14:32 ngày 12/08/2018
0