..
Copyright (c) 2025 Allan Avendaño Sudario
Licensed under Creative Commons Attribution-ShareAlike 4.0 International License
SPDX-License-Identifier: CC-BY-SA-4.0
========================================================
Guía 04: CSS - Reglas CSS y Modelo de caja
========================================================
.. topic:: Objetivo específico
:class: objetivo
Aplicar reglas CSS en la personalización de efectos visuales mediante el desarrollo de un currículum vitae digital para la presentación de información profesional de manera organizada y accesible en línea.
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 :term:`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 ``. Valide su respuesta con la guía para :download:`referenciar una hoja de estilo externa <./pdfs/guia04-referenciacss.pdf>`.
4. :material-round:`note_alt;1.5em;sd-text-success` Revise la documentación de `CSS specifications `_.
Reglas CSS - I
--------------
1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para generar las :term:`reglas CSS` en el documento *stylesheets/style.css*, con:
a) El :term:`selector CSS` para todos los elementos, aplique la :term:`propiedad CSS` **font-family** con el :term:`valor CSS` **'Segoe UI', Tahoma, Geneva, Verdana, sans-serif**.
.. admonition:: 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.
b) El selector solo para el título principal con las propiedades CSS que centren el texto horizontalmente y en negritas.
.. dropdown:: Ver la solución
:color: success
.. code-block:: text
:emphasize-lines: 1-6,8-16
* {
/* 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. :material-round:`note_alt;1.5em;sd-text-success` Revise la documentación de `CSS - MDN `_ con el selector universal, el selector por elemento y las `Propiedades y Valores CSS `_.
4. Utilice el :term:`inspector del navegador` para verificar que las reglas CSS se aplican correctamente a los elementos HTML.
.. note ::
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*:
a) A la etiqueta ``, agregue el atributo **id** con el valor **photo**.
b) A las etiquetas `
`, 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:
a) El selector por id con el valor **photo** cuyo ancho es `8vw` y el alto es `automático`.
b) 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.
.. dropdown:: Ver la solución
:color: success
.. code-block:: text
:emphasize-lines: 5-12,14-21
* { ... }
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. :material-round:`note_alt;1.5em;sd-text-success` 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*:
a) Añada el selector para etiqueta descendiente `