HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Etiquetas W3.CSS (Etiquetas y Letreros)

❮ Anterior Próximo ❯

Etiquetas: Hecho ¡Nuevo! ¡Más tarde!

Etiquetas como signos: Avenida Falcon Ridge ¡DETENER! ¡CUIDADO!

Clases de etiquetas W3.CSS

W3.CSS proporciona una clase para etiquetas, etiquetas y letreros:

Clase define
día w3 Etiqueta/etiqueta negra rectangular

Etiquetas, rótulos y letreros

En el mundo W3.CSS no existe una diferencia real entre una etiqueta, una etiqueta o un letrero.

Las etiquetas son rectangulares

La clase w3-tag crea una etiqueta rectangular (etiqueta o signo). El color predeterminado es negro:

Estado:Hecho

Ejemplo

<p>Status: <span class="w3-tag">Done</span></p>

Etiquetas de colores

Use una clase de color w3- para cambiar el color de una etiqueta:  

¡Nuevo!

¡Más tarde!

Ejemplo

<p><span class="w3-tag w3-blue">New!</span></p>
<p><span class="w3-tag w3-teal">More Later!</span></p>

Tamaños de etiqueta

De forma predeterminada, una etiqueta heredará el tamaño de su contenedor.

Las clases de tamaño w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) se pueden utilizar para modificar el tamaño de una etiqueta:

6 6 6

66 66 66

66 66

Es posible que desee agregar algo de relleno adicional a las etiquetas grandes:

Ejemplo

<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>

Etiquetas de letras

A tu GRAMO tu S T

Ejemplo

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

Ejemplo

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

Señales

Los letreros no son más que etiquetas grandes.

Zoológico de Londres

Ejemplo

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

Las señales de tráfico

Avenida Falcon Ridge

Ejemplo

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

Letreros Grandes

Las clases de tamaño w3 se pueden utilizar para mostrar carteles grandes:

EN CASO DE
EMERGENCIA:
¡CORRE COMO EL INFIERNO!

Ejemplo

<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

Ejemplo

<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>

Señales redondeadas

Las clases w3-round- size se pueden usar para agregar esquinas redondeadas a un letrero:

NO
RESPIRAR
BAJO EL AGUA

Ejemplo

<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>

Etiquetas giratorias

Use la propiedad de transformación CSS estándar para rotar un letrero:

DETENER

Ejemplo

<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>

Nota: transform:rotate() no funciona en IE 9 y versiones anteriores.

Etiquetas giratorias

La clase w3-spin se puede usar para dejar que un letrero gire 360 ​​grados:

DETENER

Ejemplo

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

❮ Anterior Próximo ❯