LabEx
EntrarÚnete

Fundamentos del Estilado con CSS

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos los fundamentos de la programación CSS. Aprenderás cómo usar CSS para dar estilo a las páginas web y crear diseños visualmente atractivos. Al final de este laboratorio, tendrás una comprensión sólida de la sintaxis, los selectores y las propiedades de CSS, y serás capaz de aplicarlos a tus propios proyectos.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Imagen de ancho completo

Puedes escribir el código en index.html y style.css..

Crea una imagen de ancho completo.

  • Utiliza left: 50% y right: 50% para posicionar la imagen en el centro del elemento padre.
  • Utiliza margin-left: -50vw y margin-right: -50vw para compensar la imagen en ambos lados con respecto al tamaño de la ventana de visualización.
  • Utiliza width: 100vw y max-width: 100vw para dimensionar la imagen con respecto a la ventana de visualización.
<main>
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
    eu, faucibus interdum felis.
  </p>
  <p>
    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
  </p>
  <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
  </p>
</main>

main {
  margin: 0 auto;
  max-width: 640px;
}

img {
  height: auto;
  max-width: 100%;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

Resumen

¡Felicitaciones! Has completado el laboratorio de Imagen de ancho completo. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.