Tham chiếu W3.CSS
Các lớp W3.CSS
| Lớp học |
Xác định |
|
| w3-container |
Vùng chứa HTML với phần đệm bên trái và bên phải 16px |
|
| |
Được sử dụng làm tiêu đề |
|
| |
Được sử dụng làm chân trang |
|
| bảng điều khiển w3 |
Vùng chứa HTML với phần đệm bên trái và bên phải 16px và lề trên và dưới 16px |
|
| |
Được sử dụng để hiển thị một ghi chú |
|
| |
Được sử dụng để hiển thị một báo giá |
|
| huy hiệu w3 |
Huy hiệu hình tròn |
|
| ngày w3 |
Thẻ hình chữ nhật |
|
| w3-ul |
Danh sách không có thứ tự |
|
| w3-display-container |
Vùng chứa cho các lớp w3-display- (cho phép định vị các phần tử bên trong vùng chứa) |
|
| khối w3 |
Lớp có thể được sử dụng để xác định chiều rộng đầy đủ cho bất kỳ phần tử nào |
|
| mã w3 |
Vùng chứa mã |
|
| w3-codepan |
Vùng chứa mã nội tuyến (dành cho các đoạn mã) |
|
| w3-nội dung |
Vùng chứa cho nội dung tập trung vào kích thước cố định |
|
| xe w3 |
Vùng chứa cho nội dung tập trung vào kích thước đáp ứng |
|
| w3-kéo dài |
Lớp loại bỏ lề phải và lề trái (đặc biệt hữu ích để kéo dài các hàng có đệm (w3-row-padding)) |
|
| Lớp học |
Xác định |
|
| bảng w3 |
Vùng chứa cho một bảng HTML |
|
| sọc w3 |
Bàn sọc |
|
| w3-border |
Bảng có viền |
|
| w3-giáp |
Đường viền |
|
| tập trung vào w3 |
Giữa bảng |
|
| w3-hoverable |
Bảng có thể lưu trữ |
|
| w3-table-all |
Tất cả các thuộc tính đã đặt |
|
| |
Có sọc w3, viền w3 và có viền w3 |
|
| |
Với đầu màu |
|
| |
Với w3-responsive |
|
| |
Với w3-tí hon |
|
| |
Với w3-small |
|
| |
Với w3-lớn |
|
| |
Với w3-xlarge |
|
| |
Với w3-xxlarge |
|
| |
Với w3-xxxlarge |
|
| |
Với màu sắc |
|
| |
Với w3-jumbo |
|
| w3-đáp ứng |
Tạo một bảng đáp ứng |
|
| Lớp học |
Xác định |
|
| thẻ w3 |
Giống như w3-card-2 |
|
| w3-card-2 |
Vùng chứa cho bất kỳ nội dung HTML nào (bóng có viền 2px) |
|
| w3-card-4 |
Vùng chứa cho bất kỳ nội dung HTML nào (bóng có viền 4px) |
|
| Lớp học |
Xác định |
|
| hàng w3 |
Vùng chứa cho một hàng nội dung đáp ứng linh hoạt |
|
| w3-row-padding |
Hàng trong đó tất cả các cột có phần đệm mặc định |
|
| xe w3 |
Vùng chứa cho nội dung tập trung vào kích thước đáp ứng |
|
| w3-kéo dài |
Lớp loại bỏ lề phải và lề trái |
|
| w3-một nửa |
Vùng chứa một nửa (1/2) cột màn hình |
|
| w3-thứ ba |
Vùng chứa cột màn hình thứ ba (1/3) |
|
| w3-twothird |
Vùng chứa cột màn hình hai phần ba (2/3) |
|
| w3-quý |
Vùng chứa cột màn hình 1/4 (1/4) |
|
| w3-baquarter |
Vùng chứa cột màn hình ba phần tư (3/4) |
|
| w3-col |
Vùng chứa cột cho bất kỳ nội dung HTML nào |
|
| w3-phần còn lại |
Chiếm phần còn lại của chiều rộng cột |
|
| |
|
|
| l1 - l12 |
Kích thước đáp ứng cho màn hình lớn |
|
| m1 - m12 |
Kích thước đáp ứng cho màn hình trung bình |
|
| s1 - s12 |
Kích thước đáp ứng cho màn hình nhỏ |
|
| |
|
|
| w3-ẩn-nhỏ |
Ẩn nội dung trên màn hình nhỏ (nhỏ hơn 601px) |
|
| w3-hide-medium |
Ẩn nội dung trên màn hình trung bình |
|
| w3-ẩn-lớn |
Ẩn nội dung trên màn hình lớn (lớn hơn 992px) |
|
| |
|
|
| w3-hình ảnh |
Hình ảnh đáp ứng |
|
| |
|
|
| w3-di động |
Thêm khả năng đáp ứng ưu tiên thiết bị di động cho bất kỳ phần tử nào.
Hiển thị các phần tử dưới dạng phần tử khối trên thiết bị di động. |
|
| Lớp học |
Xác định |
|
| w3-ô-hàng |
Vùng chứa để bố trí các cột (ô). |
|
| w3-ô |
Bố cục cột (ô). |
|
| w3-cell-top |
Căn chỉnh nội dung ở đầu cột (ô). |
|
| w3-ô-giữa |
Căn chỉnh nội dung ở giữa theo chiều dọc của cột (ô). |
|
| w3-cell-bottom |
Căn chỉnh nội dung ở cuối cột (ô). |
|
| Lớp học |
Xác định |
|
| w3-bar |
Thanh ngang |
|
| w3-bar-block |
Thanh dọc |
|
| w3-bar-item |
Cung cấp kiểu dáng chung cho các vật dụng dạng thanh |
|
| w3-sidebar |
Thanh bên |
|
| |
Một thanh bên có thể chứa tất cả các loại nội dung |
|
| |
Một thanh bên phủ lên nội dung chính |
|
| |
Một thanh bên bao phủ tất cả nội dung chính |
|
| |
Một thanh bên chuyển nội dung chính sang bên phải |
|
| |
Một thanh bên có nền lớp phủ |
|
| |
Một thanh bên ở phía bên phải |
|
| w3-sụp đổ |
Được sử dụng cùng với w3-sidebar để tạo điều hướng bên đáp ứng hoàn toàn tự động. Để lớp này hoạt động, nội dung trang phải nằm trong lớp "w3-main" |
|
| w3-main |
Vùng chứa cho nội dung trang khi sử dụng lớp w3-sập để điều hướng bên đáp ứng |
|
| |
Điều hướng bên phải phản hồi hoàn toàn tự động |
|
| w3-thả xuống-nhấp |
Phần tử thả xuống có thể nhấp |
|
| w3-dropdown-diver |
Phần tử thả xuống có thể lưu trữ |
|
| |
Phần tử thả xuống có thể di chuyển (được sử dụng trong w3-bar) |
|
| |
Phần tử thả xuống có thể di chuyển (được sử dụng trong w3-bar-block) |
|
| |
Phần tử thả xuống có thể di chuyển (được sử dụng trong w3-sidebar) |
|
| Lớp học |
Xác định |
|
| nút w3 |
Nút hình chữ nhật có màu nền xám khi di chuột |
|
| w3-btn |
Nút hình chữ nhật có bóng khi di chuột |
|
| vòng tròn w3 |
Có thể được sử dụng để tạo một nút tròn |
|
| w3-ripple |
Nút hình chữ nhật với hiệu ứng gợn sóng |
|
| |
Nút nổi hình tròn với hiệu ứng gợn sóng |
|
| w3-bar |
Có thể được sử dụng để nhóm các phần tử (như các nút) trong một thanh ngang |
|
| khối w3 |
Lớp có thể được sử dụng để xác định nút w3 chiều rộng đầy đủ |
|
| |
Chiều rộng đầy đủ w3-btn |
|
| |
Nút tròn có chiều rộng đầy đủ |
|
| Lớp học |
Xác định |
|
| w3-đầu vào |
Yếu tố đầu vào |
|
| |
Nhập biểu mẫu dưới dạng thẻ |
|
| |
Yếu tố đầu vào (nhãn trên cùng) |
|
| |
Yếu tố đầu vào (nhãn dưới cùng) |
|
| w3-kiểm tra |
Loại đầu vào hộp kiểm |
|
| đài w3 |
Loại đầu vào radio |
|
| w3-chọn |
Nhập phần tử chọn |
|
| w3-animate-input |
Hoạt ảnh chiều rộng của đầu vào thành 100% |
|
| Lớp học |
Xác định |
|
| w3-modal |
Vùng chứa phương thức |
|
| w3-modal-content |
Phần tử bật lên phương thức |
|
| w3-tooltip |
Phần tử chú giải công cụ |
|
| w3-text |
Văn bản chú giải công cụ |
|
| Lớp học |
Xác định |
|
| w3-animate-top |
Hoạt ảnh một phần tử từ -300px đến 0px trên cùng |
|
| w3-animate-left |
Hoạt ảnh một phần tử từ trái -300px sang 0px |
|
| w3-animate-bottom |
Hoạt ảnh một phần tử từ dưới cùng -300px đến 0px |
|
| w3-animate-right |
Hoạt ảnh một phần tử từ phải -300px sang 0px |
|
| w3-animate-opacity |
Hoạt ảnh độ mờ của một phần tử từ 0 đến 1 |
|
| w3-animate-zoom |
Hoạt ảnh một phần tử có kích thước từ 0 đến 100% |
|
| w3-animate-fade |
Hoạt ảnh độ mờ của một phần tử từ 0 đến 1 và 1 thành 0 (mờ dần trong VÀ ngoài) |
|
| w3-quay |
Quay một biểu tượng 360 độ |
|
| |
Quay 360 độ bất kỳ phần tử nào |
|
| w3-animate-input |
Hoạt ảnh chiều rộng của trường đầu vào thành 100% |
|
| Lớp học |
Xác định |
|
| w3-tí hon |
Chỉ định kích thước phông chữ là 10 pixel |
|
| w3-nhỏ |
Chỉ định kích thước phông chữ là 12 pixel |
|
| w3-lớn |
Chỉ định kích thước phông chữ là 18 pixel |
|
| w3-xlarge |
Chỉ định kích thước phông chữ là 24 pixel |
|
| w3-xxlarge |
Chỉ định kích thước phông chữ là 32 pixel |
|
| w3-xxxlarge |
Chỉ định kích thước phông chữ là 48 pixel |
|
| w3-jumbo |
Chỉ định kích thước phông chữ là 64 pixel |
|
| rộng w3 |
Chỉ định một văn bản rộng hơn |
|
| w3-serif |
Thay đổi phông chữ thành serif |
|
| w3-sans-serif |
Thay đổi phông chữ thành sans-serif |
|
| w3-thảo |
Thay đổi phông chữ thành chữ thảo |
|
| w3-monospace |
Thay đổi phông chữ thành monospace |
|
| Lớp học |
Xác định |
|
| trung tâm w3 |
Căn giữa nội dung |
|
| w3-left |
Làm nổi một phần tử sang trái (float: left) |
|
| w3-phải |
Làm nổi một phần tử sang bên phải (float: right) |
|
| w3-left-align |
Văn bản căn trái |
|
| w3-right-align |
Văn bản căn phải |
|
| w3-justify |
Văn bản căn phải và trái |
|
| khối w3 |
Lớp có thể được sử dụng để xác định chiều rộng đầy đủ cho bất kỳ phần tử nào |
|
| vòng tròn w3 |
Nội dung được khoanh |
|
| w3-ẩn |
Nội dung ẩn (hiển thị: không có) |
|
| w3-show |
Hiển thị nội dung (hiển thị: khối) |
|
| w3-show-block |
Bí danh của w3-show (display: block) |
|
| w3-show-inline-block |
Hiển thị nội dung dưới dạng khối nội tuyến (hiển thị: khối nội tuyến) |
|
| w3-top |
Nội dung cố định ở đầu trang |
|
| w3-bottom |
Nội dung cố định ở cuối trang |
|
| w3-display-container |
Vùng chứa cho các lớp w3-display- (vị trí: tương đối) |
|
| w3-display-topleft |
Hiển thị nội dung ở góc trên cùng bên trái của w3-display-container |
|
| w3-display-topright |
Hiển thị nội dung ở góc trên cùng bên phải của w3-display-container |
|
| w3-display-bottomleft |
Hiển thị nội dung ở góc dưới cùng bên trái của w3-display-container |
|
| w3-display-bottomright |
Hiển thị nội dung ở góc dưới cùng bên phải của w3-display-container |
|
| w3-display-left |
Hiển thị nội dung ở bên trái (giữa bên trái) của w3-display-container |
|
| w3-display-right |
Hiển thị nội dung ở bên phải (giữa bên phải) của w3-display-container |
|
| w3-display-middle |
Hiển thị nội dung ở giữa (giữa) của w3-display-container |
|
| w3-display-topmiddle |
Hiển thị nội dung ở giữa trên cùng của w3-display-container |
|
| w3-display-bottommiddle |
Hiển thị nội dung ở dưới cùng giữa của w3-display-container |
|
| w3-display-position |
Hiển thị nội dung ở một vị trí được chỉ định trong w3-display-container |
|
| w3-display-hover |
Hiển thị nội dung khi di chuột bên trong w3-display-container |
|
| Lớp học |
Xác định |
|
| w3-opacity |
Thêm độ mờ / trong suốt vào một phần tử (độ mờ: 0,6) |
|
| |
Thêm độ mờ / trong suốt vào văn bản |
|
| w3-opacity-off |
Tắt opacity / trong suốt (opacity: 1) |
|
| w3-opacity-min |
Thêm độ mờ / trong suốt vào một phần tử (độ mờ: 0,75) |
|
| w3-opacity-max |
Thêm độ mờ / độ trong suốt vào một phần tử (độ mờ: 0,25) |
|
| w3-grayscale-min |
Thêm hiệu ứng thang độ xám vào một phần tử (thang độ xám: 50%) |
|
| w3-grayscale |
Thêm hiệu ứng thang độ xám vào một phần tử (thang độ xám: 75%) |
|
| w3-grayscale-max |
Thêm hiệu ứng thang độ xám vào một phần tử (thang độ xám: 100%) |
|
| w3-sepia-min |
Thêm hiệu ứng nâu đỏ vào một phần tử (nâu đỏ: 50%) |
|
| w3-nâu đỏ |
Thêm hiệu ứng nâu đỏ vào một phần tử (nâu đỏ: 75%) |
|
| w3-nâu đỏ-max |
Thêm hiệu ứng nâu đỏ vào một phần tử (nâu đỏ: 100%) |
|
| w3-overlay |
Tạo hiệu ứng lớp phủ |
|
| Lớp học |
Xác định |
|
| w3-đỏ |
Nền màu đỏ |
|
| w3-màu hồng |
Nền màu hồng |
|
| w3-tím |
Nền màu tím |
|
| w3-tím đậm |
Nền màu tím đậm |
|
| w3-chàm |
Nền màu chàm |
|
| w3-xanh lam |
Nền màu xanh lam |
|
| w3-xanh nhạt |
Nền màu xanh nhạt |
|
| w3-lục lam |
Nền màu lục lam |
|
| w3-aqua |
Nền màu nước |
|
| w3-teal |
Màu nền xanh mòng két |
|
| w3-xanh lá cây |
Nền màu xanh lá cây |
|
| w3-xanh nhạt |
Nền màu xanh nhạt |
|
| w3-vôi |
Nền màu vôi |
|
| w3-cát |
Nền màu cát |
|
| w3-kaki |
Màu nền kaki |
|
| w3-vàng |
Nền màu vàng |
|
| w3-hổ phách |
Màu nền hổ phách |
|
| w3-cam |
Nền màu cam |
|
| w3-đậm-cam |
Nền màu cam đậm |
|
| w3-xanh-xám |
Nền màu xanh xám |
|
| w3-nâu |
Màu nền nâu |
|
| w3-xám nhạt |
Nền màu xám nhạt |
|
| w3-xám |
Nền màu xám |
|
| w3-xám đậm |
Màu nền xám đậm |
|
| w3-đen |
Nền màu đen |
|
| w3-đỏ nhạt |
Nền màu đỏ nhạt |
|
| w3-vàng nhạt |
Màu nền vàng nhạt |
|
| w3-xanh lá cây nhạt |
Nền màu xanh lá cây nhạt |
|
| w3-xanh lam nhạt |
Nền màu xanh lam nhạt |
|
| w3-trong suốt |
Màu nền trong suốt |
|
Các lớp màu di chuột
Các màu trên cũng có thể được sử dụng làm lớp di chuột:
| Lớp học |
Xác định |
|
| w3-hover-trắng |
Di chuột màu trắng |
|
| w3-hover-đen |
Di chuột màu đen |
|
| w3-hover-red |
Di chuột màu đỏ |
|
| w3-hover-blue |
Di chuột màu xanh lam |
|
| w3-hover-green |
Màu xanh lá cây khi di chuột |
|
| w3-hover-aqua |
Di chuột màu nước |
|
| w3-hover-cam |
Di chuột màu cam |
|
| w3-hover-xám |
Di chuột màu xám |
|
| w3-hover-màu xanh lá cây nhạt |
Di chuột màu xanh lục nhạt |
|
| Lớp học |
Xác định |
|
| w3-text-red |
Văn bản màu đỏ |
|
| w3-text-green |
Màu văn bản xanh lục |
|
| w3-text-blue |
Văn bản màu xanh lam |
|
| w3-text-yellow |
Màu văn bản màu vàng |
|
| w3-text-light-xám |
Text color light-grey |
|
| w3-text-grey |
Text color grey |
|
| w3-text-dark-grey |
Text color dark grey |
|
| w3-text-black |
Text color black |
|
| w3-text-white |
Text color white |
|
| w3-text-pink |
Text color pink |
|
| w3-text-purple |
Text color purple |
|
| w3-text-teal |
Text color teal |
|
| w3-text-light-green |
Text color light green |
|
| w3-text-lime |
Text color lime |
|
| w3-text-deep-purple |
Text color deep purple |
|
| w3-text-indigo |
Text color indigo |
|
| w3-text-light-blue |
Text color light blue |
|
| w3-text-blue-grey |
Text color blue grey |
|
| w3-text-cyan |
Text color cyan |
|
| w3-text-aqua |
Text color aqua |
|
| w3-text-amber |
Text color amber |
|
| w3-text-orange |
Text color orange |
|
| w3-text-deep-orange |
Text color deep orange |
|
| w3-text-sand |
Text color sand |
|
| w3-text-khaki |
Text color khaki |
|
| w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
|
| w3-hover-text-green |
Hover text color green |
|
| w3-hover-text-blue |
Hover text color blue |
|
| w3-hover-text-yellow |
Hover text color yellow |
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
|
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
| w3-hover-shadow |
Adds shadow to an element on hover |
|
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
| w3-hover-none |
Removes hover effects from an element |
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
|
| w3-round-small |
Element rounded (border-radius) 2px |
|
| w3-round-medium |
Element rounded (border-radius) 4px |
|
| w3-round-large |
Element rounded (border-radius) 8px |
|
| w3-round-xlarge |
Element rounded (border-radius) 16px |
|
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
| w3-padding-16 |
Padding 16px top and bottom |
|
| w3-padding-24 |
Padding 24px top and bottom |
|
| w3-padding-32 |
Padding 32px top and bottom |
|
| w3-padding-48 |
Padding 48px top and bottom |
|
| w3-padding-64 |
Padding 64px top and bottom |
|
| w3-padding-top-64 |
Padding 64px on top |
|
| w3-padding-top-48 |
Padding 48px on top |
|
| w3-padding-top-32 |
Padding 32px on top |
|
| w3-padding-top-24 |
Padding 24px on top |
|
| Class |
Defines |
|
| w3-margin |
Adds an 16px margin to an element |
|
| w3-margin-top |
Adds an 16px top margin to an element |
|
| w3-margin-right |
Adds an 16px right margin to an element |
|
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
| w3-margin-left |
Adds an 16px left margin to an element |
|
| w3-section |
Adds an 16px top and bottom margin to an element |
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
|
| w3-border-top |
Border top |
|
| w3-border-right |
Border right |
|
| w3-border-bottom |
Border bottom |
|
| w3-border-left |
Border left |
|
| w3-border-0 |
Removes all borders |
|
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
| w3-leftbar |
Adds a thick left border (bar) to an element |
|
| w3-rightbar |
Adds a thick right border (bar) to an element |
|
| w3-topbar |
Adds a thick top border (bar) to an element |
|
| w3-hover-border-color |
Hoverable border color |
|
