W3.CSS Tagi (etykiety i znaki)
Tagi: Gotowe Nowy! Więcej później!
Tagi jako znaki: Falcon Ridge Parkway ZATRZYMAĆ! UWAŻAJ!
W3.CSS Klasy tagów
W3.CSS udostępnia jedną klasę dla tagów, etykiet i znaków:
| Klasa | Definiuje |
|---|---|
| w3 dzień | Prostokątna czarna etykieta/etykieta |
Tagi, etykiety i znaki
W świecie W3.CSS nie ma prawdziwej różnicy między tagiem, etykietą lub znakiem.
Tagi są prostokątne
Klasa w3-tag tworzy prostokątny znacznik (etykietę lub znak). Domyślny kolor to czarny:
Status:Gotowe
Przykład
<p>Status: <span
class="w3-tag">Done</span></p>
Kolorowe Tagi
Użyj klasy w3 color , aby zmienić kolor tagu:
Nowy!
Więcej później!
Przykład
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Rozmiary tagów
Domyślnie tag dziedziczy rozmiar swojego kontenera.
Klasy rozmiarów w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) mogą być użyte do modyfikacji rozmiaru tagu:
6 6 6
66 66 66
66 66
Możesz chcieć dodać dodatkowe wypełnienie do dużych tagów:
Przykład
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Tagi listowe
Przykład
<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>
Przykład
<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>
Oznaki
Znaki to nic innego jak duże znaczniki.
Przykład
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Znaki drogowe
Przykład
<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>
Duże znaki
Klasy rozmiarów w3 mogą być używane do wyświetlania dużych znaków:
WNAGŁYCH WYPADKACH:
BIEGAJ JAK PIEKŁO!
Przykład
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Przykład
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Zaokrąglone znaki
Klasy wielkości w3 round- size mogą być użyte do dodania zaokrąglonych rogów do znaku:
NIEODDYCHAJ
POD WODĄ
Przykład
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Obracanie tagów
Użyj standardowej właściwości transformacji CSS, aby obrócić znak:
ZATRZYMAĆPrzykład
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Uwaga: transform:rotate() nie działa w IE 9 i wcześniejszych.
Wirujące Tagi
Klasa w3-spin może być użyta, aby znak obracał się o 360 stopni:
ZATRZYMAĆPrzykład
<span class="w3-tag w3-spin w3-large">
STOP
</span>