W3.CSS Màu sắc
Bảng màu mặc định được sử dụng trong W3.CSS được lấy cảm hứng từ Màu thiết kế vật liệu (màu được sử dụng trong tiếp thị, biển báo và ghi chú dán).
Tô màu các phần tử HTML
Các lớp w3- color và w3-text- color có thể được sử dụng để tô màu cho bất kỳ phần tử HTML nào:
Hộp đựng:
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Nút:
Chữ:
Đường viền:
màu đỏ
Màu xanh lá
Màu xanh lam
Màu vàng
xám
Màu đen
Những cái bàn:
Tên | Điểm |
---|---|
Jill Smith | 50 |
Eve Jackson | 94 |
Adam Johnson | 67 |
Thẻ:
Ô tô là phương tiện giao thông có bánh, có động cơ tự chạy. Hầu hết các định nghĩa của thuật ngữ chỉ rõ rằng ô tô được thiết kế để chạy chủ yếu trên đường, có chỗ ngồi cho một đến tám người, thường có bốn bánh. (Wikipedia)
Màu nền
Các lớp w3- color đặt màu nền cho bất kỳ phần tử HTML nào:
London
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
London
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
London
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Thí dụ
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Các màu xám và xám có thể hoán đổi cho nhau trong tất cả các lớp W3.CSS.
Màu văn bản
Các lớp w3-text- color đặt màu văn bản của bất kỳ phần tử HTML nào:
London
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
London
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Thí dụ
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Màu di chuột
Các lớp w3-hover- color xác định màu di chuột nền cho bất kỳ phần tử HTML nào:
London
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Thí dụ
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Các lớp w3-hover-text- color xác định màu di chuột của văn bản cho bất kỳ phần tử HTML nào:
London
Luân Đôn là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Thí dụ
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Thư viện màu
Ngoài các màu W3.CSS tiêu chuẩn, W3.CSS cũng có thể sử dụng các màu từ nhiều thư viện màu khác nhau:
Màu sắc Windows:
Nhấp vào đây để tìm hiểu thêm về các màu Windows
Màu sắc thời trang:
vàng
Spruce
Peony
Cảng Tawny
Bấm vào đây để tìm hiểu thêm về màu sắc thời trang
Màu sắc đường cao tốc:
Nhấp vào đây để tìm hiểu thêm về thư viện màu
Bạn sẽ tìm hiểu thêm nhiều điều về màu sắc trong các chương sau của hướng dẫn này.