Теги W3.CSS (этикетки и знаки)
Теги: Сделанный Новый! Подробнее позже!
Метки как знаки: Фалкон-Ридж-Паркуэй ОСТАНАВЛИВАТЬСЯ! ОСТОРОЖНО!
Классы тегов W3.CSS
W3.CSS предоставляет один класс для тегов, меток и знаков:
| Класс | Определяет |
|---|---|
| w3 день | Прямоугольная черная бирка/этикетка |
Теги, этикетки и знаки
В мире W3.CSS нет реальной разницы между тегом, меткой или знаком.
Метки прямоугольные
Класс w3-tag создает прямоугольный тег (метку или знак). Цвет по умолчанию черный:
Статус:Сделанный
Пример
<p>Status: <span
class="w3-tag">Done</span></p>
Цветные метки
Используйте класс w3- color , чтобы изменить цвет тега:
Новый!
Подробнее позже!
Пример
<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>
Примечание: transform:rotate() не работает в IE 9 и более ранних версиях.
Вращающиеся теги
Класс w3-spin позволяет знаку вращаться на 360 градусов:
ОСТАНАВЛИВАТЬСЯПример
<span class="w3-tag w3-spin w3-large">
STOP
</span>