W3.CSS-etikette (etikette en tekens)
Merkers: Klaar Nuut! Meer later!
Merkers as tekens: Falcon Ridge Parkway STOP! PASSOP!
W3.CSS Tag Klasse
W3.CSS bied een klas vir etikette, etikette en tekens:
Klas | Definieer |
---|---|
w3 dag | Reghoekige swart etiket/etiket |
Merkers, etikette en tekens
In die W3.CSS-wêreld is daar geen werklike verskil tussen 'n merker, 'n etiket of 'n teken nie.
Merkers is reghoekig
Die w3-tag- klas skep 'n reghoekige merker (etiket of teken). Die verstekkleur is swart:
Status:Klaar
Voorbeeld
<p>Status: <span
class="w3-tag">Done</span></p>
Gekleurde etikette
Gebruik 'n w3- kleurklas om die kleur van 'n merker te verander :
Nuut!
Meer later!
Voorbeeld
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Tag Groottes
By verstek sal 'n merker die grootte van sy houer erf.
Die w3 - grootte klasse (w3-klein, w3-klein, w3-groot, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) kan gebruik word om die grootte van 'n merker te verander:
6 6 6
66 66 66
66 66
Jy wil dalk ekstra opvulling by groot etikette voeg:
Voorbeeld
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Letter Tags
Voorbeeld
<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>
Voorbeeld
<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>
Tekens
Tekens is niks anders as groot etikette nie.
Voorbeeld
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Padtekens
Voorbeeld
<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>
Groot Tekens
Die w3 -grootte klasse kan gebruik word om groot tekens te vertoon:
IN GEVAL VANNOOD:
HARDLOOP SOOS HEL!
Voorbeeld
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Voorbeeld
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Geronde tekens
Die w3-ronde- grootte klasse kan gebruik word om geronde hoeke by 'n teken te voeg:
MOENIE ONDER WATERASEM HAAL NIE
Voorbeeld
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Roterende etikette
Gebruik die standaard CSS-transformasie-eienskap om 'n teken te draai:
STOPVoorbeeld
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Let wel: transform:rotate() werk nie in IE 9 en vroeër nie.
Draaiende etikette
Die w3-spin- klas kan gebruik word om 'n teken 360 grade te laat draai:
STOPVoorbeeld
<span class="w3-tag w3-spin w3-large">
STOP
</span>