Trong bài viết này, Ứng dụng free sẽ cùng các bạn tìm hiểu về Làm Việc Với Thành Phần Mở Rộng Của CSS3

Giới thiệu CSS3 Media Queries

• Đối với tất cả các trình duyệt/ thiết bị giao tiếp với máy chủ lưu trữ website và tự được định dạng với user agent String
• CSS3 media queries: 
  • Hình thức nhận biết thiết bị
  • Kiểm tra khả năng của người dùng truy cập vào trang web
  • Nhận biết (phát hiện) được: Chiều cao, chiều rộng của trình duyệt, thiết bị, thiết bị định hướng (phong cảnh/ chân dung) độ phân giải
• Sử dụng CSS3 media queries để cung cấp layout phù hợp với cho layout mobile

• Quy định chiều rộng của trang được hiển thị trên thiết bị

• Điều hướng trên thiết bị di động:
  • Nên thiết kế vị trí điều hướng đơn giản hơn khi hiển thị trên trình duyệt mát tính
  • Gợi ý:
    • Nên có, nên để gần đầu màn hình để dễ truy cập
    • Lặp lại điều hướng ở phía dưới trang
    • Với thiết bị cảm ứng, sử dụng kích thước lớn cho link của điều hướng
    • Tránh điều hướng từ hình ảnh, nên dựa trên danh sách chuyển hướng dạng CSS

Ví dụ:

CSS3 Layout

• Layout nhiều cột sử dụng CSS3:
  • CSS3 cung cấp các thuộc tính để thuận tiện cho việc thiết kế layout dạng nhiều cột
    • Column-count: Quy định cụ thể số lượng các cột một phần tử được chia thành
    • Column-width: Quy định cụ thể chiều rộng của các cột
    • Column-gap: Quy định khoảng cách giữa các cột
    • Column-rule: Là thuộc tính viết tắt, cho phép thiết lặp tất cả các thuộc tính chiều rộng, style, màu sắc giữa các cột
• Cách thiết lập:

• Thiết lập layout dạng hộp Flexible ( hộp linh hoạt):
  • Là dạng bố cục mới trong CSS3
  • Đại diện cho một trong bốn dạng layout đang được hỗ trợ bởi CSS2.1

CSS3 User Interface (Giao Diện Người Dùng)

• CSS3 cung cấp một số tính năng về phía người dùng
  • Thay đổi kích thước thành phần trên trang
  • Thay đổi kích thước hộp
  • Phác thảo 
• Các thuộc tính quy định:
  • Resize
  • box-sizing
  • outline-ofset

• CSS3 resize
  • Quy định một thành phần có thể hay không thể thay đổi kích thước bởi người dùng

• CSS3 box-sizing
  • Cho xác định yếu tố phù hợp với một khu vực

• CSS3 Outline Offset
  • Quy định một đường biên, bao phía bên ngoài đường biên mặc định
  • Hai cách tạo đường outline:
    • Không mất không gian
    • Không phải dạng hình chữ nhật

KẾT LUẬN: Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để Ứng dụng free   giải đáp thắc mắc nhé! Cảm ơn các bạn đã theo dõi bài viết.

30/09/2022 Blog Tin Học