Cómo aplicar estilo a una imagen con CSS

Cómo diseñar una imagen con CSS. Utilice CSS para presentar las imágenes de su sitio web de la mejor manera posible. En este artículo, aprenderá dónde colocar una imagen y si incluir o no decoraciones como bordes.

Flotación y centrado

Paso 1

Inserta tu imagen en la página con tu método habitual. No olvide incluir texto alternativo adecuado para la imagen.

Paso 2

Para que el texto se ajuste a la imagen de la derecha, de forma similar a como se muestra en la foto que presenta este artículo, utilice una regla CSS como esta:

img { flotador:izquierda; relleno derecho:1em;

La regla float:left hace que la imagen se mueva hacia el margen izquierdo. La regla de relleno a la derecha evita que el texto choque con el lado derecho de la imagen. Si se agregara un borde a esta imagen, el relleno se colocaría entre la imagen y el borde. Consulte la Sección 2 para trabajar con una imagen con un borde.

Paso 3

Para hacer que el texto se ajuste a la izquierda, haga flotar la imagen en el margen derecho. Usa una regla como esta:

img { flotador:derecha; relleno-izquierda:1em;

Paso 4

Para centrar una imagen, primero debe convertir el elemento de imagen normalmente en línea en un elemento de nivel de bloque.

img { pantalla:bloque;

Paso 5

A continuación, agregue márgenes a la izquierda y derecha de la imagen para centrarla. El valor adecuado para los márgenes izquierdo y derecho para centrar cualquier cosa es automático.

img { pantalla:bloque; margen derecho:automático; margen izquierdo:automático;

Bordes y Márgenes

Paso 1

Los bordes se pueden usar para crear un efecto de sombra paralela o la apariencia de un marco.

Para crear un borde grueso similar a un marco usando el estilo de borde de ranura, se puede usar una regla como esta:

img { flotador:izquierda; ancho de borde:1em; estilo de borde:ranura; color de borde:#000000;

Otros estilos de borde son sólido, punteado, discontinuo, doble, cresta, inserción y salida. El ancho se puede expresar en píxeles, ems o porcentajes.

Paso 2

Los bordes se pueden aplicar de forma selectiva en la parte superior, derecha, inferior e izquierda de la imagen. Puede utilizar este conocimiento para crear un efecto como una sombra paralela.

Paso 3

Usando un borde sólido en 2 tonos de gris solo en el borde derecho e inferior, obtienes un efecto de sombra paralela.

img { flotador:izquierda; estilo de borde derecho:sólido; borde-derecho-color:#CCCCCC; estilo de borde inferior:sólido; borde-fondo-color:#999999;

Paso 4

El margen está fuera de la frontera. Agregar un poco de margen a la derecha y en la parte inferior de la imagen evitará que el texto choque contra ella.

img { flotador:izquierda; estilo de borde derecho:sólido; borde-derecho-ancho:8px; borde-derecho-color:#CCCCCC; estilo de borde inferior:sólido; borde-inferior-ancho:8px; borde-fondo-color:#999999; margen derecho:1em; margen inferior:1em;

Consejo

Si tiene imágenes en más de una división (div) de una página, use selectores descendientes para diseñarlas individualmente. Posibles selectores:#imagen de contenido, #imagen de barra lateral, #imagen de función.