Guía 04: CSS - Reglas CSS y Modelo de caja

Guía 04: CSS - Reglas CSS y Modelo de caja#

Actividades previas#

Diseño#

  1. Escoge las tipografías con Google Fonts y combínalas con Fontjoy de acuerdo a tu gusto para el título de principal, para los títulos en las secciones y para todo el documento.

  2. Selecciona la combinación de colores de acuerdo con la guía de Happy Hues, Huemint, Coolors o ColorMagic.

Ambiente de desarrollo#

  1. Acceda a su proyecto curriculum en Codespaces o en su máquina local.

  2. Cree y utilice la(s) rama(s) de desarrollo.

  3. Haga clic en el ícono de Live Preview en la barra de estado de VSCode para iniciar el servidor local.

Actividades en clases#

Archivos y estructura#

  1. Cree la carpeta stylesheets dentro del directorio de tu proyecto.

  2. Cree el documento CSS style.css dentro de la carpeta stylesheets de tu proyecto.

  3. Referencie el documento style.css en el documento index.html dentro de la etiqueta <head>. Valide su respuesta con la guía para referenciar una hoja de estilo externa.

  4. Revise la documentación de CSS spec­i­fi­ca­tions.

Reglas CSS - I#

  1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para generar las reglas CSS en el documento stylesheets/style.css, con:

    1. El selector CSS para todos los elementos, aplique la propiedad CSS font-family con el valor CSS “Segoe UI”, Tahoma, Geneva, Verdana, sans-serif.

      Prompt sugerido

      Agrega el selector CSS para todos los elementos que aplique la propiedad CSS font-family con el valor CSS “Segoe UI”, Tahoma, Geneva, Verdana, sans-serif.

    2. El selector solo para el título principal con las propiedades CSS que centren el texto horizontalmente y en negritas.

    Ver la solución
    * {

    /* Familia de fuentes */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

h1 {

    /* Alineación del texto */
    text-align: center;

    /* Grosor de la fuente negrita */
    font-weight: bold;

}

  2. Compruebe la vista previa del resultado en el navegador.

  3. Revise la documentación de CSS - MDN con el selector universal, el selector por elemento y las Propiedades y Valores CSS.

  4. Utilice el inspector del navegador para verificar que las reglas CSS se aplican correctamente a los elementos HTML.

    Nota

    Para utilizar una fuente de Google Fonts, primero debes incluirla en tu proyecto. Puedes hacerlo agregando un enlace a la fuente en el archivo HTML o importándola directamente en tu archivo CSS, de acuerdo a la guía de Google Fonts

Reglas CSS - II#

  1. Modifique el archivo index.html:

    1. A la etiqueta <img>, agregue el atributo id con el valor photo.

    2. A las etiquetas <h2>, agregue el atributo class con el valor subtitle.

  2. Utilice un cliente de IAG, en el contexto de su currículum vitae, para generar las reglas CSS en el documento stylesheets/style.css, con:

    1. El selector por id con el valor photo cuyo ancho es 8vw y el alto es automático.

    2. El selector por clase con el valor subtitle cuyo color del texto es rgb(151 156 165 / 0.89); y el texto en mayúsculas.

    Ver la solución
    * { ... }

h1 { ... }

#photo {

    /* Ancho del elemento */
    width: 8vw;

    /* Alto del elemento */
    height: auto;
}

.subtitle {

    /* Color del texto en rgba */
    color: rgb(151 156 165 / 0.89);

    /* Transformación del texto a mayúsculas */
    text-transform: uppercase;
}

  3. Compruebe la vista previa del resultado en el navegador.

  4. Revise la documentación de CSS - MDN con el selector por clase, por identificador y las Propiedades y Valores CSS.

Reglas CSS - III#

  1. Utilice un cliente de IAG para generar las reglas CSS en el documento stylesheets/style.css:

    1. Añada el selector para etiqueta descendiente <p> dentro de la etiqueta <footer> alinee el texto a la derecha y en itálica.

    2. Agregue el selector para la etiqueta hija inmediata <ul> dentro de la etiqueta <nav>, elimine la viñeta.

    Ver la solución
    ...

.subtitle { ... }

footer p {

    /* Alineación del texto a la derecha */
    text-align: right;

    /* Estilo de fuente itálica */
    font-style: italic;

}

nav > ul {

    /* Eliminar los estilos de lista predeterminados */
    list-style: none;

}

  2. Compruebe la vista previa del resultado en el navegador.

  3. Revise la documentación de CSS - MDN con los selectores descendiente, de hijo inmediato y las Propiedades y Valores CSS.

  4. Consulta a tu cliente de IAG la justificación para el uso de cada tipo de selector.

    Prompt sugerido

    Justifica el uso de los selectores CSS de acuerdo con la especificidad.

Modelo de caja#

  1. Utilice un cliente de IAG para generar las reglas CSS en el documento stylesheets/style.css:

    1. Añada el selector por elemento para las etiquetas <section> con el borde tiene un grosor de 0.2 puntos, es sólido (sin trazos o estilos especiales) y su color es un tono gris azulado claro (#cedddd).

    2. Para la regla CSS anterior, agrega un margen de 4 píxeles en la parte superior, 2 píxeles en los lados derecho e izquierdo, y 8 píxeles en la parte inferior.

    3. Para la regla CSS anterior, entre el borde y el contenido agrega una separación vertical de 1.5% y una separación horizontal 0.8%.

    4. Para la regla CSS anterior, agrega la propiedad CSS que modifique por separado el margen inferior con 1.2 veces el tamaño de la letra del elemento raíz.

    Ver la solución
    ...

nav > ul { ... }

section {

    /* borde de grosor 0.2 en puntos, estilo sólido y color hexadecimal #cedddd  */
    border: 0.2pt solid #cedddd;

    /* margen (espacio externo) superior, derecho, abajo e izquierda */
    margin: 4px 2px 8px 2px;

    /* relleno (espacio interno) de
    1.5% en la parte superior e inferior y
    0.8% a los lados derecho e izquierdo. */

    padding: 1.5% 0.8%;

    /* Margen inferior ajustado */
    margin-bottom: 1.2rem;

}

  2. Compruebe la vista previa del resultado en el navegador.

  3. Revise la documentación de Modelo de Caja de CSS con las propiedades CSS de borde, margen y relleno.

Efectos CSS#

  1. Utilice el servicio de Border Radius para generar un borde redondeado de 5 píxeles para el borde de la etiqueta <section>.

  2. Utilice el servicio de Box Shadows para crear una sombra con desplazamiento de 3 píxeles en ambas direcciones, un desenfoque de 1 píxel y sin expansión, utilizando un color gris claro (235, 234, 234) semitransparente (0.6).

    Ver la solución
    ...

section {

   ...

   /* borde redondeado con un radio de 5 píxeles */
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;

   /* sombra a un elemento */
   -webkit-box-shadow: 3px 3px 1px 0px rgba(235, 234, 234, 0.60);
   -moz-box-shadow: 3px 3px 1px 0px rgba(235, 234, 234, 0.60);
   box-shadow: 3px 3px 1px 0px rgba(235, 234, 234, 0.60);
}

  3. Compruebe la vista previa del resultado en el navegador.

  4. Revise la documentación de Border Radius y Box Shadow.

Nota

Las propiedades -webkit-border- y -moz-box- son prefijos específicos de navegadores que se utilizaban en versiones antiguas de navegadores para implementar características experimentales o no estandarizadas de CSS.

Pueden aparecer en código legado o para garantizar compatibilidad con navegadores muy antiguos.

Versionamiento#

  1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio curriculum.

  2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

  3. Compruebe el resultado en el navegador.

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Animaciones CSS Transiciones CSS
Contenido