-
Cómo utilizar CSS para envolver una imagen con una leyenda
-
Cascading Style Sheets se utilizan en la codificación de páginas web, sin depender de las tablas para hacer constantemente a través de los navegadores. Los beneficios de usar un CSS externo, son las páginas más rápido de carga, la capacidad de hacer un solo cambio a una hoja de estilo para la replicación de todo el sitio, y la reducción de desorden, por lo que su código simplificado más elegante y accesible. Hay dos elementos principales a considerar cuando se envuelve una imagen usando CSS, la definición de "imagen flotante" en la hoja de estilo, y el atributo "flotar" en el estilo de imagen en la página web de destino.Instrucciones
Envolviendo una leyenda para una imagen usando CSS
1
Crear una definición de la imagen que flota en la hoja de estilo.
En el documento CSS externo, crear una definición llamada 'floatLeft'. Su código se verá así:
img.floatLeft {
float: left;}
2
Añadir atributos a la definición de estilo de su clase.
Añadir el relleno alrededor de la imagen flotaba para crear un espacio entre los bordes de la imagen y el texto que se envuelve alrededor de ella.
img.floatLeft {
float: left;padding: 10px 25px 10px 25px;
}
Aquí, el relleno es de 10 píxeles a la parte superior y la parte inferior de la imagen; y 25 píxeles a la izquierda y a la derecha.
3
En su hoja de estilo, crear una definición de clase para el texto de la leyenda.
Agregar una definición llamada "CaptionText" a la hoja de estilos externa para controlar el aspecto del texto de la leyenda:
.captionText {
font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 14px;
color: # 666666;
}
Observe el uso de un período antes de que el primer carácter del nombre de la definición. Esto define la familia de la fuente, tamaño y color para el texto del título.
4
Colocar su imagen en su página web.
En su página Web, crear el siguiente código en el que desea que aparezca la imagen:
<Img class = "floatLeft">
Este código indica al navegador que la imagen seleccionada - 'yourImageName.jpg' - se ajusta a la clase 'floatLeft' como se define en la hoja de estilos externa.
5
Crear un título y diseñarlo con su definición del subtítulo.
Por último, añadir propiedades de estilo para el párrafo que contendrá su subtítulo mediante la especificación de una clase:
<Img class = "floatLeft">
<P class = "CaptionText"> El título va aquí ... </ p>
Consejos y advertencias
- No se olvide de cargar su hoja de estilos CSS a su servidor Web cada vez que realice un cambio.
- En caso de duda, utilice un servicio de validación de CSS para garantizar la funcionalidad de su código.
- No dé por sentado que todas las definiciones CSS trabajan de manera uniforme en todos los navegadores. Prueba de problemas multiplataforma / multi-navegador.
