Dominando el Estilado con CSS: Eleva tu Diseño Web

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") subgraph Lab Skills css/selectors -.-> lab-35202{{"Fundamentos del Estilado con CSS"}} css/margin_and_padding -.-> lab-35202{{"Fundamentos del Estilado con CSS"}} css/width_and_height -.-> lab-35202{{"Fundamentos del Estilado con CSS"}} css/positioning -.-> lab-35202{{"Fundamentos del Estilado con CSS"}} css/mobile_first_design -.-> lab-35202{{"Fundamentos del Estilado con CSS"}} end

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.