علامات W3.CSS (تسميات وعلامات)
العلامات: فعله جديد! أكثر في وقت لاحق!
العلامات كعلامات: فالكون ريدج باركواي توقف! احذر!
فئات علامة W3.CSS
يوفر W3.CSS فئة واحدة للعلامات والتسميات والعلامات:
| فصل | يعرّف |
|---|---|
| W3 يوم | علامة / ملصق أسود مستطيل |
العلامات والتسميات والعلامات
في عالم W3.CSS لا يوجد فرق حقيقي بين العلامة أو التسمية أو الإشارة.
العلامات مستطيلة
تنشئ فئة w3-tag علامة مستطيلة (علامة أو علامة). اللون الافتراضي هو الأسود:
حالة: فعله
مثال
<p>Status: <span
class="w3-tag">Done</span></p>
العلامات الملونة
استخدم فئة اللون w3- لتغيير لون العلامة:
جديد!
أكثر في وقت لاحق!
مثال
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
أحجام العلامات
بشكل افتراضي ، ترث العلامة حجم الحاوية الخاصة بها.
يمكن استخدام فئات الحجم w3 (w3-tiny ، w3-small ، w3-large ، w3-xlarge ، w3-xxlarge ، w3-xxxlarge ، w3-jumbo) لتعديل حجم العلامة:
6 6 6
66 66 66
66 66
قد ترغب في إضافة بعض المساحة المتروكة الإضافية إلى العلامات الكبيرة:
مثال
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
علامات الرسالة
مثال
<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>
مثال
<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>
علامات
العلامات ليست سوى علامات كبيرة.
مثال
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
إشارات الطريق
مثال
<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>
لافتات كبيرة
يمكن استخدام فئات w3- الحجم لعرض العلامات الكبيرة:
في حالةالطوارئ:
اركض مثل الجحيم!
مثال
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
مثال
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
علامات مدورة
يمكن استخدام فئات w3-round- size لإضافة زوايا دائرية إلى اللافتة:
لاتستنشق
تحت الماء
مثال
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
تدوير العلامات
استخدم خاصية تحويل CSS القياسية لتدوير إشارة:
توقفمثال
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
ملاحظة: التحويل: لا يعمل rotate () في IE 9 وما قبله.
غزل الكلمات
يمكن استخدام فئة w3-spin للسماح للإشارة بالدوران 360 درجة:
توقفمثال
<span class="w3-tag w3-spin w3-large">
STOP
</span>