Thẻ W3.CSS (Nhãn và Dấu hiệu)
Thẻ: Làm xong Mới! Trễ hơn!
Các thẻ dưới dạng dấu hiệu: Đường công viên Falcon Ridge DỪNG LẠI! COI CHỪNG!
Các loại thẻ W3.CSS
W3.CSS cung cấp một lớp cho thẻ, nhãn và dấu hiệu:
| Lớp học | Xác định |
|---|---|
| ngày w3 | Thẻ / nhãn màu đen hình chữ nhật |
Thẻ, Nhãn và Dấu hiệu
Trong thế giới W3.CSS không có sự khác biệt thực sự giữa thẻ, nhãn hoặc dấu hiệu.
Thẻ có hình chữ nhật
Lớp w3-tag tạo ra một thẻ hình chữ nhật (nhãn hoặc dấu hiệu). Màu mặc định là đen:
Trạng thái:Làm xong
Thí dụ
<p>Status: <span
class="w3-tag">Done</span></p>
Thẻ màu
Sử dụng lớp w3- color để thay đổi màu của thẻ:
Mới!
Trễ hơn!
Thí dụ
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Kích thước thẻ
Theo mặc định, thẻ sẽ kế thừa kích thước của vùng chứa của nó.
Các lớp kích thước w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) có thể được sử dụng để sửa đổi kích thước của thẻ:
6 6 6
66 66 66
66 66
Bạn có thể muốn thêm một số đệm bổ sung vào các thẻ lớn:
Thí dụ
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Thẻ chữ cái
Thí dụ
<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span
class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>
Thí dụ
<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span
class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>
Dấu hiệu
Dấu hiệu không có gì khác ngoài các thẻ lớn.
Thí dụ
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Biển bao
Thí dụ
<div class="w3-tag w3-round w3-green" style="padding:3px">
<div
class="w3-tag w3-round w3-green w3-border w3-border-white">
Falcon
Ridge Parkway
</div>
</div>
Biển báo lớn
Các lớp kích thước w3 có thể được sử dụng để hiển thị các dấu hiệu lớn:
TRONG TRƯỜNG HỢPKHẨN CẤP:
CHẠY NHƯ ĐỊA NGỤC!
Thí dụ
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Thí dụ
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Dấu hiệu tròn
Các lớp kích thước tròn-w3 có thể được sử dụng để thêm các góc tròn vào một dấu hiệu:
KHÔNG ĐƯỢCVỆ SINH
DƯỚI NƯỚC
Thí dụ
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Xoay thẻ
Sử dụng thuộc tính biến đổi CSS chuẩn để xoay một dấu hiệu:
DỪNG LẠIThí dụ
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Lưu ý: biến đổi: xoay () không hoạt động trong IE 9 trở về trước.
Spinning Tags
Lớp w3-spin có thể được sử dụng để cho một biển báo quay 360 độ:
DỪNG LẠIThí dụ
<span class="w3-tag w3-spin w3-large">
STOP
</span>