W3.CSS Etiketleri (Etiketler ve İşaretler)
Etiketler: Tamamlandı Yeni! Daha sonra!
İşaret olarak etiketler: Falcon Ridge Park Yolu DUR! DİKKAT ETMEK!
W3.CSS Etiket Sınıfları
W3.CSS, etiketler, etiketler ve işaretler için bir sınıf sağlar:
| Sınıf | tanımlar |
|---|---|
| w3 gün | Dikdörtgen siyah etiket/etiket |
Etiketler, Etiketler ve İşaretler
W3.CSS dünyasında etiket, etiket veya işaret arasında gerçek bir fark yoktur.
Etiketler Dikdörtgen
w3-tag sınıfı , dikdörtgen bir etiket (etiket veya işaret) oluşturur. Varsayılan renk siyahtır:
Durum: Tamamlandı
Örnek
<p>Status: <span
class="w3-tag">Done</span></p>
Renkli Etiketler
Bir etiketin rengini değiştirmek için bir w3- color sınıfı kullanın:
Yeni!
Daha sonra!
Örnek
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Etiket Boyutları
Varsayılan olarak, bir etiket, kapsayıcısının boyutunu devralır.
w3 - boyut sınıfları (w3-tiny, w3-small, w3-large, w3- xlarge , w3-xxlarge, w3-xxxlarge, w3-jumbo) bir etiketin boyutunu değiştirmek için kullanılabilir:
6 6 6
66 66 66
66 66
Büyük etiketlere fazladan dolgu eklemek isteyebilirsiniz:
Örnek
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Harf Etiketleri
Örnek
<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>
Örnek
<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>
işaretler
İşaretler büyük etiketlerden başka bir şey değildir.
Örnek
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Yol işaretleri
Örnek
<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>
Büyük İşaretler
Büyük işaretleri görüntülemek için w3- boyut sınıfları kullanılabilir:
ACİL DURUMDA:
CENNET GİBİ KOŞUN!
Örnek
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Örnek
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Yuvarlak İşaretler
w3-yuvarlak boyut sınıfları , bir işarete yuvarlatılmış köşeler eklemek için kullanılabilir:
SU ALTINDANEFES ALMAYIN
Örnek
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Dönen Etiketler
Bir işareti döndürmek için standart CSS dönüştürme özelliğini kullanın:
DURÖrnek
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Not: transform:rotate(), IE 9 ve önceki sürümlerde çalışmaz.
İplik Etiketleri
w3-spin sınıfı , bir işaretin 360 derece dönmesine izin vermek için kullanılabilir:
DURÖrnek
<span class="w3-tag w3-spin w3-large">
STOP
</span>