CSS: Modelo de caja, texto y fuente

Modelo de caja (Box Model)

• Es un concepto fundamental en CSS que se utiliza para diseñar y organizar los elementos en una página web.

Texto y fuente (Text i Font)

• text-align: Especifica la alineación horizontal del texto dentro de un elemento.
• color: Utiliza esta propiedad para establecer el color del texto.
• direction: Se usa para especificar la dirección del texto.
• letter-spacing: Controla el espacio entre las letras.
• line-height: Define la altura de la línea en un texto.
• text-decoration: Permite añadir o quitar decoraciones como subrayado.
• text-indent: Especifica la sangría de la primera línea de un texto.
• text-shadow: Aplicar sombras al texto para hacerlo resaltar.
• text-transform: Controla la capitalización del texto (mayúsculas, minúsculas).
• text-overflow: Determina cómo se debe indicar el texto que excede el contenedor.
• font-family: Se usa para definir la familia tipográfica del texto.
• font-size: Establece el tamaño de la fuente.
• font-style: Permite aplicar estilos cursiva u oblicua al texto.
• font-variant: Controla la visualización de las fuentes OpenType.
• font-weight: Controla el grosor de la fuente (normal, negrita, etc.).

Icono (ICON)

• Font Awesome Icons, Bootstrap Icons y Google Icons son opciones populares para añadir iconos a una página web.
• Requieren la inclusión de un script o stylesheet en el HTML del documento.

Enlaces (LINKS)

• a:link: Se utiliza para dar estilo a los enlaces que no han sido visitados.
• a:visited: Estilo para los enlaces que ya han sido visitados.
• a:hover: Define el estilo cuando el ratón se sitúa sobre el enlace.
• a:active: Estilo del enlace en el momento en que se está pulsando.

Display

• display: block: Los elementos de bloque ocupan todo el ancho disponible y comienzan en una nueva línea. Ejemplos: <div>, <h1> a <h6>, <p>, <form>.
• display: inline: Los elementos en línea solo ocupan el espacio necesario y no fuerzan saltos de línea. Ejemplos: <span>, <a>, <img>.
• display: inline: Los elementos en línea solo ocupan el espacio necesario y no fuerzan saltos de línea. Ejemplos: <span>, <a>, <img>.
• visibility: hidden: Oculta el elemento, pero sigue ocupando espacio en el diseño.

Position y float

• position: static: Es el valor por defecto. El elemento se posiciona según el flujo normal del documento.
• position: relative: El elemento se posiciona en relación con su posición normal.
• position: fixed: El elemento se posiciona en relación con la ventana del navegador y no se mueve al hacer scroll.
• position: absolute: El elemento se posiciona en relación con su ancestro posicionado más cercano.
• position: sticky: El elemento se posiciona como relativo hasta que se alcanza una posición de desplazamiento específica, luego se fija.
• float: left: El elemento flota a la izquierda de su contenedor.
• float: right: El elemento flota a la derecha de su contenedor.
• float: none: El elemento no flota.
• float: inherit: El elemento hereda el valor float de su elemento padre.
• clear: none: Permite que el elemento flote en ambos lados.
• clear: left: No permite que elementos flotantes aparezcan a la izquierda del elemento.
• clear: right: No permite que elementos flotantes aparezcan a la derecha del elemento.
• clear: both: No permite elementos flotantes en ninguno de los lados.
• clear: inherit: Herencia del valor 'clear' del elemento padre.

Combinadores CSS (CSS COMBINATORS)

• Permiten seleccionar elementos basados en su relación con otros elementos en el HTML.
• Descendant Selector: div p selecciona todos los elementos <p> que son descendientes de un elemento <div>.
• Child Selector: div > p selecciona solo los elementos <p> que son hijos directos de un elemento <div>.

Pseudo-clases CSS (CSS PSEUDO-CLASS)

• Se utilizan para definir estados especiales de un elemento.
• La sintaxis general es selector:pseudo-class { property: value; }.
• :first-child: Selecciona el primer hijo de un elemento.
• :focus: Se aplica cuando un elemento tiene el foco (por ejemplo, un campo de formulario seleccionado).
• :read-only: Estilo para elementos que no son editables por el usuario.

Media Queries

• Son un mecanismo de CSS que permiten aplicar estilos específicos según el tipo de dispositivo y sus características.
• Permiten que el diseño de la página se adapte al dispositivo en el que se visualiza.
• Estructura básica: @media [media-type] ([media-features]) { /* CSS styles */ }.
• @media: Palabra clave que indica el inicio de una media query.
• [media-type]: Especifica el tipo de dispositivo al que se aplica la regla CSS.
• [media-features]: Describe las características del dispositivo para aplicar la regla CSS.

Tipos de Dispositivo

• all: Se aplica a todos los dispositivos.
• screen: Para pantallas de ordenador, tabletas y teléfonos.
• print: Para impresoras.
• speech: Para lectores de pantalla.

Características de los Dispositivos

• min-width, max-width: Define un rango de anchura de la pantalla en píxeles.
• min-height, max-height: Define un rango de altura de la pantalla en píxeles.
• aspect-ratio: Define la relación entre la anchura y la altura de la pantalla.
• orientation: Define la orientación de la pantalla (landscape u portrait).

Enfoques de Diseño Adaptable (Responsive Design)

• Mobile-first: Se aplican estilos por defecto para pantallas pequeñas y se modifican para pantallas más grandes usando min-width.
• Desktop-first: Se aplican estilos por defecto para pantallas grandes y se modifican para pantallas más pequeñas usando max-width.

¿Por qué es mejor Mobile-first?

• En dispositivos móviles, es más eficiente leer solo los estilos CSS destinados a ellos, descartando el resto del código.

Ejemplos de código

• Se proporciona un ejemplo de código que muestra cómo implementar un diseño adaptable utilizando media queries, donde se ajusta el número de columnas en una galería de imágenes según el ancho de la pantalla.

Ejercicio

• Crea una galería de imágenes que muestre una columna para pantallas de menos de 600px de ancho, dos columnas para pantallas entre 600px y 1000px, y tres columnas para pantallas de más de 1000px.