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

A U G U S T

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>
S A L E

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.

Londen Dieretuin

Voorbeeld

<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>

Padtekens

Falcon Ridge Parkway

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 VAN
NOOD:
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>
49,99 _

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 WATER
ASEM 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:

STOP

Voorbeeld

<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:

STOP

Voorbeeld

<span class="w3-tag w3-spin w3-large">
STOP
</span>