ubiquitour.com

Cómo el estilo de una imagen con CSS

Cómo el estilo de una imagen con CSS. Utilizar CSS para presentar imágenes de su sitio web de la mejor manera posible. En este artículo, usted aprenderá cómo colocar una imagen y si o no incluyen decoraciones tales como fronteras.

Instrucciones

Flotante y centrado

1 Inserte su imagen en la página con el método habitual. No se olvide de incluir texto alternativo adecuado para la imagen.

2 Para hacer que el texto envuelva a la imagen de la derecha, similar a la forma es en la foto de presentación de este artículo, utilice una regla CSS como este:

IMG {}Float: left;padding-right: 1em;}

La regla de flotador: izquierda hace que la imagen hacia el margen izquierdo. La regla de relleno derecha mantiene el texto de golpes de derecha contra el lado derecho de la imagen. Si un borde se agregó a esta imagen, relleno vendría entre la imagen y la frontera. Véase la sección 2 para trabajar con una imagen con un borde.

3 Para que el texto envuelva a la izquierda, la imagen en la margen derecha del flotador. Use una regla como esta:

IMG {}flotador: derecho;padding-left: 1em;}

4 Para centrar una imagen primero debe hacer el normalmente en línea elemento de la imagen en un elemento de nivel bloque.

IMG {}Mostrar: bloquear;}

5 A continuación, añadir márgenes a la izquierda y derecha de la imagen para centrarla. El valor apropiado para los márgenes derecho e izquierdos al centro nada es automático.

IMG {}Mostrar: bloquear;margen derecha: auto;margen izquierda: auto;}

Las fronteras y los márgenes

6 Las fronteras se pueden utilizar para crear un efecto de sombra o la aparición de un cuadro.

Para crear un borde grueso, marco-como usar el estilo de borde de la ranura, puede utilizarse una regla como esta:

IMG {}Float: left;ancho del borde: 1em;estilo de borde: surco;frontera-color: #000000;}

Otros estilos de borde son principio, inserción y canto sólido, punteado, punteada, doble. Ancho se puede expresar en pixeles, el ccsme o porcentajes.

7 Las fronteras pueden aplicarse selectivamente a la parte superior, derecho, inferior e izquierda de la imagen. Puede utilizar este conocimiento para crear un efecto como una sombra.

8 Con una frontera sólida en 2 tonos de gris en a la derecha y el borde inferior, obtendrá un efecto de sombra de la gota.

IMG {}Float: left;derecho-Border-style: solid;frontera-derecho-color: #CCCCCC;estilo de borde inferior: sólido;frontera-fondo-color: #999999;}

9 Margen está fuera de la frontera. Añadiendo un margen a la derecha y la parte inferior de la imagen impide que el texto chocar contra él.

IMG {}Float: left;derecho-Border-style: solid;ancho del borde derecho: 8px;frontera-derecho-color: #CCCCCC;estilo de borde inferior: sólido;ancho del borde inferior: 8px;frontera-fondo-color: #999999;margen derecha: 1em;margen inferior: 1em;}

Consejos y advertencias

  • Si tiene imágenes en más de una división (div) de una página, utilice los selectores descendientes estilo de forma individual. Posibles selectores: #content img, #sidebar img #feature img.