La etiqueta FIELDSET originalmente está diseñada para agrupar elementos dentro de un formulario, de esta forma varios INPUT se pueden organizar dentro de un campo de un formulario. Por ejemplo este código:
<form>Se convierte en esto:
<fieldset>
<legend>Datos personales:</legend>
Nombre: <input type="text" size="30" /><br />
Dirección: <input type="text" size="30" /><br />
Teléfono: <input type="text" size="30" />
</fieldset>
</form>
Pero no, no haremos formularios pues para ello necesitaríamos un servidor y algo de PHP para enviar y almacenar los datos. Pero sí podemos darle otro uso a la etiqueta FIELDSET, por ejemplo, para destacar un texto, mostrar una descripción, o incluso para poner los ingredientes de una receta. Por ejemplo:
El código que hemos usado es este:
<fieldset>
<legend>Título</legend>
... Aquí va el texto ...
</fieldset>
Organizado pero muy simple ¿verdad? No hay problema, se puede personalizar un poco.
Ahí, el código que usamos es este:
<fieldset style="border:6px groove #ccc; background:#F8ECE0;">
<legend style="font-weight:bold; color:#61380B;">Título</legend>
... Aquí va el texto ...
</fieldset>
Los primeros estilos en negrita son para el contenedor general, ahí le hemos puesto un borde de 6px y un color de fondo. Los segundos estilos en negrita corresponden al título del campo.
Pero sería muy tedioso tener que escribir los estilos siempre que lo vayamos a usar, así que podemos definir esos estilos directo en la plantilla.
Para ello entramos en Diseño | Edición de HTML y antes de ]]></b:skin> pegamos lo siguiente:
fieldset {Eso hará que todos los fieldset que uses tengan ese diseño que has elegido.
border:6px groove #ccc; /* Borde */
background:#F8ECE0; /* Color de fondo */
color:#000; /* Color del texto de todo el contenido */
}
legend {
text-align:left; /* Puedes cambiarlo por center o right */
font-weight:bold; /* Estilo de la fuente del título */
color:#61380B; /* Color del título */
}
Son estilos muy básicos, pero se pueden agregar otros tantos. Recuerda que fieldset es el contenedor, y legend el título de ese contenedor.
Jugando un poco con los estilos y aplicando CSS3 podemos obtener resultados aun más llamativos:
[+/-] Ver código
No hay comentarios:
Publicar un comentario