W3.CSS-Tags (Etiketten und Zeichen)
Stichworte: Fertig Neu! Später mehr!
Tags als Zeichen: Falcon-Ridge-Parkway HALT! ACHTUNG!
W3.CSS-Tag-Klassen
W3.CSS bietet eine Klasse für Tags, Beschriftungen und Zeichen:
| Klasse | Definiert |
|---|---|
| w3-tag | Rechteckiges schwarzes Schild/Etikett |
Tags, Etiketten und Schilder
In der Welt von W3.CSS gibt es keinen wirklichen Unterschied zwischen einem Tag, einem Label oder einem Zeichen.
Tags sind rechteckig
Die w3-tag- Klasse erstellt ein rechteckiges Tag (Etikett oder Schild). Die Standardfarbe ist schwarz:
Status: Fertig
Beispiel
<p>Status: <span
class="w3-tag">Done</span></p>
Farbige Etiketten
Verwenden Sie eine w3 -Farbklasse , um die Farbe eines Tags zu ändern:
Neu!
Später mehr!
Beispiel
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Tag-Größen
Standardmäßig erbt ein Tag die Größe seines Containers.
Die w3 - Größenklassen (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) können verwendet werden, um die Größe eines Tags zu ändern:
6 6 6
66 66 66
66 66
Möglicherweise möchten Sie großen Tags zusätzliche Polsterung hinzufügen:
Beispiel
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Buchstaben-Tags
Beispiel
<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>
Beispiel
<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>
Zeichen
Schilder sind nichts anderes als große Tags.
Beispiel
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Straßenschilder
Beispiel
<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>
Große Schilder
Die w3- Größenklassen können verwendet werden, um große Schilder anzuzeigen:
IMNOTFALL:
LAUF WIE HÖLLE!
Beispiel
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Beispiel
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Abgerundete Zeichen
Die w3-Round- Size - Klassen können verwendet werden, um einem Schild abgerundete Ecken hinzuzufügen:
ATMEN SIE NICHT
UNTER WASSER
Beispiel
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Rotierende Tags
Verwenden Sie die standardmäßige CSS-Transformationseigenschaft, um ein Schild zu drehen:
HALTBeispiel
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Hinweis: transform:rotate() funktioniert nicht in IE 9 und früher.
Spinning-Tags
Die Klasse w3-spin kann verwendet werden, um ein Zeichen um 360 Grad drehen zu lassen:
HALTBeispiel
<span class="w3-tag w3-spin w3-large">
STOP
</span>