Cómo darle estilo a una imagen con CSS

Escrito por ehow contributor | Traducido por juan ignacio ceviño
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo darle estilo a una imagen con CSS
Aprende a realizar un ajuste de texto alrededor de una imagen flotante con CSS.

Usa el CSS para presentar imágenes de tu sitio web de la mejor manera posible. En este artículo, aprenderás dónde colocar una imagen y si deseas o no incluir elementos decorativos, como los bordes.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Conocimiento básico de HTML y CSS
  • Una página web con imágenes que necesiten ser arregladas
  • Nada nuevo se necesita para esta sección

Lista completaMinimizar

Instrucciones

    Flotando y centrando

  1. 1

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

  2. 2

    Para hacer tu ajuste de texto alrededor de la imagen de la derecha, parecido a la forma en que está en la foto que introduce el artículo, utiliza una regla CSS como esta:

    img { float: left; padding-right: 1em; }

    El flotado: la regla izquierda hace que la imagen se mueva hacia el margen izquierdo. La regla padding-derecha evita que el texto se mueva contra el lado derecho de la imagen. Si se añade un borde a la imagen, el relleno se interpondrá entre la imagen y el borde. Mira la Sección 2 para trabajar con una imagen con borde.

  3. 3

    Para hacer que el texto se ajuste a la izquierda, flota la imágen en el margen derecho. Usa una regla como la siguiente:

    img { float: right; padding-left: 1em; }

  4. 4

    Para centrar una imagen, primero debes convertir el elemento de delineado normal de la imagen, en un nive bloqueado.

    img { display: block; }

  5. 5

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

    img { display: block; margin-right: auto; margin-left: auto; }

    Bordes y márgenes

  1. 1

    Los bordes se pueden utilizar para crear un efecto de sombra o la apariencia de un marco. Para crear un marco grueso, usando el estilo de borde groove, se puede utilizar una regla como esta:

    img { float: left; border-width: 1em; border-style: groove; border-color: #000000; }

    Otros estilos de bordes pueden ser sólidos, con puntos, con guiones, con caballete doble, de inserción y de principio. La anchura puede expresarse en píxeles, EMS o en porcentajes.

  2. 2

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

  3. 3

    Si usas un borde sólido en 2 tonos de gris sólo en el borde derecho e inferior, obtendrás un efecto de sombra.

    img { float: left; border-right-style: solid; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-color: #999999; }

  4. 4

    El margen se hace afuera del borde. Añadir un margen a la derecha y en la parte inferior de la imagen, impide que el texto choque contra ella.

    img { float: left; border-right-style: solid; border-right-width: 8px; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 8px; border-bottom-color: #999999; margin-right: 1em; margin-bottom: 1em; }

Consejos y advertencias

  • Si tienes imágenes en más de una división (div) de una página, utilza los selectores de descendientes para darle estilo de manera individual. Selectores posibles: # content img, # sidebar img, # img característica.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles