Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Insertando imágenes con CSS

Este artículo asume que sabes al menos HTML básico; sabes qué es una etiqueta y cómo usar etiquetas simples como la etiqueta <img> o <p>. Si esto te confunde, debes leer mi tutorial para principiantes en diseño web . Es realmente fácil y parece que a la gente le gusta, ¡así que pruébalo!
Ok, asumo que todos saben qué son las imágenes, ya que todos hemos visto imágenes en páginas web. Las imágenes no se insertan técnicamente en una página web (para ser nerd precisa), sino que las imágenes están vinculadas a páginas web y normalmente usamos la etiqueta de imagen (<img>) para crear un espacio de retención (o una referencia a la imagen) para la imagen .
Cuando alguien carga una página web (yendo a la URL), es el navegador, en ese momento, el que obtiene la imagen del servidor web y la inserta en la página para que la vea. ¿Tiene sentido?
Esto es diferente a usar un programa como MS Word, por ejemplo, donde con Word, cuando inserta una imagen en un documento de Word, la imagen en realidad se convierte en "parte" del documento real. Cuando guarda un archivo de Word, todo lo que necesita para hacer un seguimiento es ese archivo de Word, y sabe que las imágenes que insertó estarán allí cuando lo abra de nuevo, sin importar dónde mueva el archivo.
Donde sea como con una página HTML, ya que solo hace referencia a las imágenes con la etiqueta de imagen, debe asegurarse de que las imágenes a las que se está vinculando permanezcan siempre en el mismo lugar en relación con la página web. Cuando la gente desordena esa ruta entre la página HTML y las imágenes a las que hace referencia, obtienes el ícono de enlace roto que a todos les encanta ver. Está viendo el ícono de enlace roto porque el navegador no puede encontrar la imagen a la que hace referencia en la etiqueta <img>.
Ok, si no sabías mucho sobre la mecánica de las imágenes que se cargan en las páginas web, ¡ahora sabes demasiado! Vayamos a algo práctico.

Usando CSS para insertar imágenes en sus páginas web

La siguiente parte es realmente fácil de entender, fácil de usar y puede ser muy poderosa. ¡Triple bono! Con CSS, todos los elementos de nivel de bloque y en línea (etiquetas) pueden tener imágenes de fondo insertadas en ellos. Las etiquetas de nivel de bloque son <p> y <div>.
Aunque puede insertar imágenes en cualquier tipo de etiqueta (a nivel de bloque o en línea), creo que es mejor en la mayoría de las situaciones usar etiquetas a nivel de bloque para este tipo de cosas. Pero en realidad no importa si usa etiquetas de nivel de bloque o etiquetas en línea porque puede convertir cualquier etiqueta en una etiqueta de nivel de bloque y viceversa; Con este simple código CSS, cambio cualquier etiqueta a nivel de bloque:
pantalla :  bloque ;
O al revés:
pantalla : en  línea ;
¿Y qué? ¿Recuerdas mi boletín donde hablé sobre la inserción de fondos con CSS? De la misma manera que puede insertar imágenes en los fondos de sus páginas web, puede hacerlo con cualquier otro elemento. Esto se combina con un poco de relleno adicional y tiene su imagen de titular donde lo desea.
Eche un vistazo a este código donde utilizo esta técnica:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
< html > 
< head > 
   < title > CSS ubicación de la imagen < / título > 
   < meta  http-equiv = "Content-Type"  content = "text / html; charset = iso-8859-1" >
 
   < style  type = "text / css"  media = "screen" >
   # headline1 {
      imagen de fondo: url (images / newsletter_headline1.gif);
      repetición de fondo: no repetición;
      posición de fondo: arriba a la izquierda;
      relleno superior: 68px;
      margen inferior: 50px;
   }
   # headline2 {
      imagen de fondo: url (images / newsletter_headline2.gif);
      repetición de fondo: no repetición;
      posición de fondo: arriba a la izquierda;
      relleno superior: 68px;
   }
< / style > 
< / head > 
< body > 
   < div  id = "headline1" > Algún texto ... < / div > 
   < div  id = "headline2" > Un poco más de texto .. < / div > 
< / body > 
< / html >
Para mantener este ejemplo fácil de seguir, inserté el código CSS en la propia página web. Por lo general, coloco mi código CSS en un archivo CSS separado y lo vinculo para poder reutilizarlo en muchas páginas.
En el código CSS anterior, notará que inserto una imagen de fondo para cada ID (encabezado1 y encabezado2) y aumente el relleno en la parte superior (relleno-arriba: 68 px) para empujar el texto hacia abajo y hacer espacio para las imágenes de fondo.
Esto puede parecer poco claro ahora, así que solo eche un vistazo a la página y luego abra el código fuente y revíselo usted mismo. Siéntase libre de tomar una copia y jugar con el número de relleno y ver cómo cambia las cosas. ¿Por qué agregué 68px al relleno? La imagen es de 68px de altura, pero podría poner cualquier número que me guste para obtener la ubicación que quiero. El relleno no afecta a la imagen de fondo; solo afecta el contenido dentro de la etiqueta / elemento. En este caso utilicé etiquetas <div>.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas