A través de esta presentación, estas diapositivas, y este vídeo, te familiarizarás con los contenidos clave de esta unidad.
Introducción
A la hora de dar estilo a los enlaces, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en esta unidad.
Los estados de un enlace
Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes pseudoclases):
Link (no visitado): El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase :link.
Visited: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase :visited.
Hover: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase :hover.
Focus: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab del teclado o se le da el foco mediante programación usando HTMLElement.focus()); se le aplica un formato diferente con la pseudoclase :focus.
Active: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase :active.
Enlaces predeterminados
El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el código CSS simplemente amplía y centra el texto para que destaque más):
A medida que vayas observando los estilos predeterminados, te darás cuenta de algunas cosas:
Los enlaces están subrayados.
Los enlaces no visitados se ven de color azul.
Los enlaces visitados se ven de color morado.
Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.
Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción Acceso total por teclado: Todos los controles presionando Ctrl + F7 para que funcione).
Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).
Ejercicio propuesto: Enlaces más grandes y centrados
Crea una página web con al menos 5 párrafos, cada uno con un enlace diferente a cualquier sitio que te guste. También tienes que estilizar tu página de modo que los enlaces sean el doble del tamaño del resto del texto y estén alineados en el centro, tal como se muestra en el ejemplo anterior.
No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste.
A tener en cuenta…
Curiosamente, los estilos predeterminados son casi los mismos que utilizaban los primeros navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:
Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.
Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.
Los estilos por defecto se pueden cambiar usando las siguientes propiedades CSS:
cursor para cambiar el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).
outline para cambiar el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.
Aplicando formato a los enlaces
Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos que podemos aplicar a nuestros enlaces.
Para empezar, escribiremos nuestro conjunto de reglas vacío:
Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como LoVe Fears HAte.
Ahora vamos a añadir algo más de información para darles formato:
Analicemos el efecto que tendrá el código anterior:
Utilizamos los selectores a:link y a:visited para establecer un par de variaciones de color en los enlaces no visitados y visitados respectivamente, para que sean diferentes respecto a los colores por defecto.
Las dos reglas siguientes usan a:focus y a:hover para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado diferente para que el enlace destaque aún más.
Finalmente, a:active se usa para dar a los enlaces también un esquema de color diferente cuando hacemos clic sobre ellos, para dejar aún más claro que el navegador saltará a una nueva página.
Y para finalizar mostramos un ejemplo de código HTML en el que podemos aplicar el código CSS que hemos sugerido:
<p>
Dispones de varios navegadores, como <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> y <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.
</p>
Al utilizar el código HTML junto con el código CSS observamos el siguiente resultado:
Ejercicio propuesto: Aplicando estilos y subrayados
Crea una nueva página web con al menos 5 enlaces que apunten a tus sitios web preferidos. Debes cambiar los colores y subrayados por defecto para que cada posible estado (enlace, visitado, en foco, al pasar el ratón, activo) tenga un color diferente al predeterminado, y también otro subrayado, de forma similar a como hicimos en el ejemplo anterior, donde utilizamos por ejemplo el subrayado rojo ondulado.
Como has visto, puedes cambiar el color del texto utilizando la propiedad color, y el color de fondo utilizando la propiedad background. Puedes echar un vistazo a los diferentes colores aquí. Acerca de la decoración del texto, recuerda que se puede cambiar fácilmente con la propiedad text-decoration.
Incluyendo iconos en los enlaces
Una práctica común es incluir iconos en los enlaces. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos este ejemplo de icons8.com.
Podemos usar el mismo código HTML que en el ejemplo anterior:
<p>
Dispones de varios navegadores, como <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> y <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.
</p>
Y ajustaremos el código CSS para incluir el icono en todos los enlaces:
Si aplicamos el código CSS al HTML propuesto, obtendremos el siguiente resultado:
Utilizamos la propiedad abreviada background y establecemos la ruta a la imagen que queremos insertar, especificamos el valor no-repeat para que solo se inserte una copia, y luego especificamos la posición a la derecha del contenido de texto.
También usamos background-size para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo).
Finalmente, establecemos un área de relleno a la derecha (padding-right) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.
Ejercicio propuesto: Enlaces con iconos
Crea una nueva página web con al menos 5 enlaces que apunten a tus sitios web preferidos (puedes usar el código que escribiste anteriormente) e incluye un icono al final de cada uno. También cambia algunos otros estilos como el color del texto o la decoración del texto.
Dar aspecto de botón a un enlace
Las propiedades CSS que hemos utilizado hasta ahora en esta unidad también se pueden usar de otras maneras. Por ejemplo, los estados como hover se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.
Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias. Por ejemplo, el menú de navegación de un sitio web generalmente es una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones o pestañas que proporcionan al usuario acceso a otras partes de la página web. Vamos a ver cómo.
En primer lugar, partiremos del siguiente código HTML:
Y sobre ese código HTML aplicamos el siguiente código CSS:
/* Clase general para la barra de navegación */
.navbar {
font-size: 1.25rem;
font-family: sans-serif;
text-align: center;
background: yellow;
}
/* Selecciona sólo los elementos de lista (li) que se encuentran dentro de la barra de navegación */
ul.navbar li {
display: inline;
}
/* Selecciona sólo los enlaces (a) que se encuentran dentro de la barra de navegación */
ul.navbar a {
text-decoration: none;
display: inline-block;
padding: 1rem;
}
/* Selecciona sólo los enlaces que se encuentran dentro de la barra de navegación cuando el ratón pase por encima (a:hover) */
ul.navbar a:hover {
background: orange;
}
/* Selecciona sólo los enlaces que se encuentran dentro de la barra de navegación cuando hagamos click sobre ellos con el ratón (a:active) */
ul.navbar a:active {
color: white;
background: red;
}
Este código nos proporciona el siguiente resultado:
Expliquemos qué está pasando aquí, centrándonos en las partes más interesantes:
Una nueva clase para la lista:
Hemos creado la clase navbar para que solo los elementos dentro de esa clase tengan el estilo de una barra de navegación.
ul.navbar: Al poner esto antes de cualquier selector, las propiedades CSS entre llaves se aplicarán solo a los elementos dentro de una lista no ordenada con clase navbar.
Los estilos relacionados con el elemento <ul>:
Cambiamos la propiedad font-size para agrandar un poco el texto.
Cambiamos la propiedad font-family para que sea diferente al resto del texto.
Cambiamos la propiedad text-align para que los enlaces queden centrados.
Cambiamos la propiedad background a color amarillo.
Los elementos <li> normalmente se comportarán como elementos de bloque (se asientan en sus propias líneas). En este caso, queremos crear una lista horizontal de enlaces, por lo que configuramos la propiedad display, lo que hace que los elementos de la lista se encuentren en la misma línea uno tras otro (ahora se comportan como elementos en línea).
Los estilos relacionados con los elementos <a>:
Comenzamos desactivando los valores por defecto de text-decoration (no queremos que estropeen nuestro aspecto).
A continuación, configuramos la propiedad display en bloque en línea (esto permitirá dimensionarlos, como explicaremos en otra unidad).
Configuramos el valor del padding en 1rem para darle a los botones algo de espacio alrededor del texto (también explicaremos esto en otra unidad).
También cambiamos el color de los elementos cuando el puntero del ratón está sobre ellos y al hacer clic.
Ejercicio propuesto: Barra de navegación
Crea una página web con una barra de navegación con tu propio estilo. Puedes cambiar cualquier propiedad que desees (colores, decoración de texto, tamaño de fuente, familia de fuente, etc.). Después de eso, justo debajo inserta algunos otros enlaces. También puedes intentar usar algunas otras reglas de CSS para dar estilo a estos enlaces, como se muestra a continuación:
Test
Comprueba tus conocimientos con este test sobre estilos de enlaces de texto.
Utilizando una combinación de código HTML, CSS y JavaScript vamos a crear una página web de temática navideña con animaciones. Además, el usuario podrá interactuar haciendo clic en las imágenes.
HTML
Estructura Básica: El documento HTML comenzará con la declaración <!DOCTYPE html> y utilizará las etiquetas <html>, <head>, y <body> para estructurar el contenido.
Metadatos: Dentro de <head>, definiremos el conjunto de caracteres (charset) como ‘utf-8’, y estableceremos la configuración ‘viewport’ para asegurar una correcta visualización en dispositivos móviles.
Título: El título de la página será «Felicitación de Navidad».
Estilos y Fuentes: Enlazaremos hojas de estilo externas para los estilos CSS y para incluir la fuente «Mountains of Christmas». También incluiremos la librería ‘animate.css‘ para animaciones CSS.
Contenido del Cuerpo: Dentro de <body> colocaremos un encabezado <h1> con la frase «¡Feliz Navidad!» y una clase que aplique una animación. A continuación incluiremos un div con la clase ‘contenedor’ que agrupará tres imágenes con animaciones y eventos de clic asociados.
Elementos de Audio: Incluiremos tres elementos <audio> para reproducir sonidos para interactuar con las imágenes.
JavaScript: Enlazaremos un fichero externo llamado ‘script.js’ que contendrá todo el código JavaScript.
CSS
Estilos generales: Estableceremos estilos para html y body, incluyendo márgenes, padding, ancho, fuentes de letra, alineación del texto, color, color de fondo, tamaño de fuente y sombra de texto.
Distribución del contenido: Definiremos un layout de tipo flexbox, con un alineamiento central y una disposición en fila por defecto.
Media query: Cambiaremos la disposición a columna cuando el ancho de la pantalla sea menor de una resolución específica, lo que mejorará la visualización en dispositivos móviles.
Estilo de imágenes: Definiremos la anchura en píxeles, y el máximo ancho relativo a la vista y un filtro de sombra para todas las imágenes.
JavaScript
Desarrollaremos una función que se ejecute al hacer clic en las imágenes. Dicha función realizará tres acciones:
Vibración: Generaremos una breve vibración en dispositivos compatibles.
Reproducción de audio: Reproduciremos un archivo de audio asociado con la imagen en la que hagamos clic.
Cambio de imagen y animación: Actualizaremos cada imagen al hacer clic sobre ella y activaremos una nueva animación.
Imágenes y archivos de audio
A continuación mostramos todas las imágenes y los ficheros de audio que vamos a utilizar en nuestra felicitación. También puedes descargar un ZIP con todos los ficheros (incluido el código fuente).
Las imágenes iniciales
Los archivos de audio
Al hacer clic sobre las imágenes (utilizando JavaScript)
Utilizando código JavaScript cambiaremos las imágenes originales por estas otras, cada vez que hagamos clic en una de ellas:
Cómo colocar las imágenes y los audios, y cómo definir las animaciones
Mediante código HTML crearemos la estructura principal de la felicitación. Incluiremos imágenes y elementos de audio, y estableceremos animaciones para captar la atención del usuario.
Para definir las animaciones utilizaremos la librería animate.css. Para ello deberemos enlazarla primero desde nuestro fichero ‘index.html’:
Una vez enlazada la librería, ya podemos aplicar animaciones a cualquier elemento añadiendo las clases correspondientes, y opcionalmente, un posible retraso para comenzar la animación, que puede ir de 1 a 5 segundos:
La combinación de imágenes y audio, junto con las animaciones, proporcionarán finalmente un diseño interactivo para nuestra página de temática navideña:
<h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>: Este es un encabezado de nivel 1, utilizado generalmente para el título más importante en la página. Hemos añadido dos clases de CSS para definir la animación:
animate__animated: Esta clase indica que el elemento tendrá una animación aplicada.
animate__flip: Específica el tipo de animación, en este caso, un efecto de giro (‘flip’).
Div contenedor:
<div class="contenedor">: Este div actúa como un contenedor para agrupar los elementos relacionados. La clase ‘contenedor’ se usa para agrupos los elementos de imagen y audio.
Bloques con imágenes y audio:
Cada uno de los tres divs internos representa una sección con una imagen y un audio. Hemos añadido clases específicas para definir las animaciones y retrasos:
animate__animated: Establece que se va a definir una animación.
animate__lightSpeedInLeft, animate__backInDown, animate__lightSpeedInRight: Estas clases definen el tipo de animación. Cada div tiene una animación distinta que describe cómo entra la imagen en la pantalla.
animate__delay-1s, animate__delay-2s, animate__delay-3s: Estos retrasos (1s, 2s, 3s) controlan cuándo comienza la animación después de que se carga la página.
Dentro de cada div, hay un sub-div con un id único (img-trineo, img-campana, img-cantando) que contiene una imagen (<img>):
src: Indica la ruta del archivo de imagen.
alt: Proporciona un texto alternativo que describe la imagen. Es útil para accesibilidad y en situaciones donde la imagen pudiera no llegar a cargarse.
Después de cada imagen, colocamos un elemento <audio> con un id único para cada uno:
src: El archivo de audio a reproducir.
controls: Indica que se deben mostrar controles de reproducción (play, pause, volumen) en la interfaz de usuario.
Cómo conseguir una página más interactiva (utilizando JavaScript)
Mediante el atributo ‘onclick’ de las imágenes y el atributo ‘onplay’ de los elementos de audio podemos hacer que nuestra página web sea más interactiva. Si definimos y ejecutamos la correspondiente función JavaScript, podemos actualizar cada imagen sobre la que hagamos clic, y definir a su vez nuevas animaciones, e incluso reproducir al mismo tiempo el audio correspondiente:
Doctype e idioma: <!DOCTYPE html> indica al navegador que se trata de un documento HTML5. <html lang="es"> especifica que el contenido del documento está en español.
Etiqueta <head>: Contiene metadatos y enlaces a recursos externos.
charset="utf-8": asegura que se usen caracteres Unicode, adecuados para muchos idiomas y símbolos.
name="viewport" content="width=device-width": hace que el layout sea responsivo al ancho del dispositivo.
<link>: para enlazar hojas de estilo externas y la fuente «Mountains of Christmas».
animate.min.css: es una librería de animaciones CSS.
Etiqueta <body>: Define el contenido principal de la página.
<h1>: es el encabezado principal, decorado con animaciones de ‘animate.css’.
<div class="contenedor">: es un contenedor para las imágenes. Cada <div> hijo tiene un id único y contiene una <img>.
Cada imagen tiene clases para animaciones y un evento onclick que llama a la función JavaScript anima().
Los elementos <audio> están asociados a cada imagen para reproducir sonidos específicos.
margin: 0px; padding: 0px; elimina márgenes y rellenos por defecto.
width: 100%; establece el ancho del cuerpo y el HTML al 100% del viewport.
font-family, text-align, color, background-color, font-size, text-shadow aplican estilos de texto y fondo.
Clase .contenedor:
display: flex; activa Flexbox, un método de layout.
justify-content: center; centra los elementos hijos horizontalmente.
flex-direction: row; coloca los elementos hijos en una fila.
Media Query:
@media (max-width: 900px) aplica estilos cuando el ancho de la ventana es menor a 900px, cambiando flex-direction a column para alinear los elementos verticalmente.
Estilo de Imágenes:
width: 300px; establece un ancho fijo de las imágenes.
max-width: 100vw; establece la anchura máxima de las imágenes para asegurar que no se salen de la pantalla.
filter: drop-shadow(5px 5px 5px black); añade una sombra a las imágenes.
navigator.vibrate(50): hace que el dispositivo vibre durante 50 milisegundos, en el caso de móviles, tabletas, u otros dispositivos compatibles.
Control de Audio:
document.getElementById(audio-${dibujo}): selecciona el elemento de audio correspondiente al dibujo sobre el que hemos hecho clic.
.currentTime = 0: para que el audio comience a reproducirse desde el principio.
.play(): inicia la reproducción del audio.
Actualización de Imagen y Animación:
document.getElementById(img-${dibujo}).innerHTML = ...: actualiza el contenido HTML del div que contiene la imagen sobre la que hemos hecho clic. El nuevo contenido es una imagen con una animación específica.
onclick="anima('${dibujo}', '${animacion}')": asegura que al hacer clic en la nueva imagen, se vuelva a llamar a anima() con los mismos parámetros.
El resultado
Puedes comprobar aquí el resultado final al completar esta felicitación de Navidad. También puedes descargar aquí un fichero ZIP con todo el código fuente, imágenes y ficheros de audio.
A través de esta presentación, estas diapositivas, y este vídeo, te familiarizarás con los contenidos clave de esta unidad.
¿Por qué flexbox?
Durante mucho tiempo, las únicas herramientas fiables para crear diseños CSS con una alta compatibilidad entre navegadores, fueron los elementos flotantes y el posicionamiento. Cumplen su propósito, pero tienen una funcionalidad bastante limitada.
Con tales herramientas resulta difícil, si no imposible, lograr obtener un diseño de página sencillo y flexible que cumpla con unos requisitos como los siguientes:
Centrar verticalmente un bloque de contenido dentro de su elemento padre.
Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.
Hacer que todos los elementos en una distribución de columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.
Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de distribución de elementos dentro de la página.
Un ejemplo sencillo
En esta unidad te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. En el siguiente ejemplo verás que tenemos un elemento <header> con un encabezado de nivel superior en él, y un elemento <section> que contiene tres elementos <article>. Los usaremos para crear una distribución bastante habitual de tres columnas:
<header>
<h1>Comunidad Valenciana</h1>
</header>
<section>
<article>
<h2>Alicante</h2>
<p>El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.</p>
</article>
<article>
<h2>Valencia</h2>
<p>Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.</p>
</article>
<article>
<h2>Castellón</h2>
<p>La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.</p>
</article>
</section>
Usando el código del ejemplo anterior, crea una nueva página web con un contenido similar. Puedes utilizar el texto que quieras y los colores y fuentes que más te gusten.
Especificar qué elementos serán cajas flexibles
Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de display en el elemento padre de los elementos que deseas editar. En este caso, queremos distribuir los elementos <article>, por lo que lo activaremos la propiedad correspondiente en el elemento <section> (que se convierte en un contenedor flexible):
section {
display: flex;
}
Esto hace que el elemento <section> se convierta en contenedor flex, y sus hijos en elementos flexibles. Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra distribución en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este.
Para dejarlo un poco más claro, vamos a observar detenidamente el resultado. El elemento al que le hemos dado un valor de display de flex actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. También podemos usar un valor de display de inline-flex si queremos que los elementos secundarios de un elemento sean elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.
Ejercicio propuesto: Cajas flexibles
Añade al ejercicio anterior el código CSS necesario para que todo el contenido dentro del elemento <section> se muestre como cajas flexibles (display: flex) que se muestran de izquierda a derecha, todas ellas con la misma altura.
Como hemos explicado antes, solo tienes que añadir tres líneas de código y ¡solucionado! Dispondrás de cajas flexibles:
section {
display: flex;
}
El modelo flexible
Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:
El eje principal (main axis) es el eje en el que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio principal (main start) y final principal (main end).
El eje transversal (cross axis) es el eje perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio transversal (cross start) y extremo cruzado (cross end).
El elemento padre que tiene establecido display: flex (el elemento <section> en nuestro ejemplo) se llama contenedor flexible.
Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan elementos flexibles (son los elementos <article> de nuestro ejemplo).
¿Filas o columnas?
A los elementos flexbox les podemos aplicar una propiedad llamada flex-direction que especifica en qué dirección aparece el eje principal, o lo que es lo mismo, en qué dirección estarán dispuestos los elementos hijo de un elemento flexbox. Por defecto, está establecido en el valor row, por lo que se presentan en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).
Ejercicio propuesto: Distribución en una columna
Añade al ejercicio anterior el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna (flex-direction: column), de forma similar a la distribución que teníamos antes de aplicar el código CSS.
Bastará con utilizar unas pocas líneas de código CSS:
También puedes distribuir elementos flexibles en una dirección inversa utilizando los valores row-reverse y column-reverse.
Ejercicio propuesto: Distribución en fila en orden inverso
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en la misma fila, pero en orden inverso (flex-direction: row-reverse).
Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
Ejercicio propuesto: Distribución en columna en orden inverso
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna, pero en orden inverso (flex-direction: column-reverse).
Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
Un problema que surge cuando tienes una cantidad fija de ancho o alto es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y no se ajustan al diseño de nuestra página. Echa un vistazo al ejemplo de este enlace (donde vemos que los elementos hijo se pueden llegar a salir de su contenedor), o fíjate en el resultado que se observa a continuación, donde el ancho de cada columna es muy reducido:
Ejercicio propuesto: Establecer el tamaño de cada columna
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> tengan un ancho fijo de 200px.
Una forma de conseguir esto fácilmente es añadir una propiedad más (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño (flex:200px) para ser aplicada al elemento <article>:
section {
display: flex;
flex-wrap: wrap;
}
article {
...
flex: 200px;
}
Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:
Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.
Ejercicio propuesto: Establecer el número de columnas por fila
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en dos columnas.
Una forma de conseguir esto fácilmente es utilizar la propiedad correspondiente (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño especificando el porcentaje (flex:48%) para ser aplicada al elemento <article>:
section {
display: flex;
flex-wrap: wrap;
}
article {
...
flex: 48%;
}
Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:
Ejercicio propuesto: Orden inverso en cada fila
Partiendo del código anterior, cambia el valor de tu propiedad flex-direction a row-reverse. Ahora verás que todavía tienes tu distribución en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés:
Usando el código del último ejemplo anterior, añade tres ciudades más (para mostrar al menos 9 ciudades en total) y también inserta una imagen por cada una. Añade sombras al texto y a las cajas y también puedes cambiar los colores y el texto a tu gusto.
El resultado podría ser similar al siguiente (con ancho fijo o con porcentaje):
Alineación horizontal y vertical
También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo (puedes mirar el resultado aquí), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda. Si miramos el código HTML, observaremos que simplemente tenemos 5 botones dentro de un bloque <div>:
Si aplicamos algo de código CSS, por ejemplo, utilizando la propiedad align-items podremos controlar dónde se ubican los ejemplos flexibles del eje transversal:
Por defecto, el valor es stretch, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.
El valor center mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal.
También puedes tener valores como flex-start y flex-end, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta align-items para conocer todos los detalles al respecto.
Por otro lado, también podemos modificar el valor de la propiedad justify-content para controlar dónde se ubican los elementos flexibles sobre el eje principal:
El valor por defecto es flex-start, que coloca todos los elementos al comienzo del eje principal.
Puedes usar flex-end para que se coloquen al final.
center también es un valor de justify-content (para alinear contenido), que coloca los elementos flexibles sobre el centro del eje principal.
El valor space-around puede resultar muy útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.
Hay otro valor, space-between, que es muy similar a space-around, pero no deja espacio en los extremos.
Ejercicio propuesto: Alineación vertical y distribución uniforme
Partiendo del código anterior de los cinco botones, cambia el valor de las propiedades align-items y justify-content como se indica a continuación. Cambia además el tamaño del bloque <div>, la fuente del texto y añade también alguna sombra al elemento <div> y a los botones y actualiza el contenido del navegador para observar el resultado.
div {
display: flex;
align-items: center;
justify-content: space-around;
}
Test
Comprueba tus conocimientos con este test sobre los conceptos básicos de flexbox tratados en esta unidad.
A través de esta presentación, estas diapositivas, y este vídeo, te familiarizarás con los contenidos clave de esta unidad.
Introducción
Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear unos elementos con otros. En esta unidad echaremos un vistazo más de cerca al modelo de cajas en CSS con el que vas a poder crear diseños más complejos entendiendo cómo funciona y llegando a conocer la terminología relacionada.
¿Qué es el modelo de cajas CSS?
El modelo de cajas CSS define cómo funcionan las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página.
Partes de una caja
Al definir una caja de tipo bloque en CSS tenemos los siguientes elementos:
El contenido de la caja (o content box): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como width y height.
El relleno de la caja (o padding box): El relleno es el espacio en blanco alrededor del contenido. Es posible controlar su tamaño usando la propiedad padding y otras propiedades relacionadas.
El borde de la caja (o border box): El borde de la caja envuelve el contenido y el relleno. Es posible controlar su tamaño y estilo utilizando la propiedad border y otras propiedades relacionadas.
El margen de la caja (o margin box): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde, así como el espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad margin y otras propiedades relacionadas.
El diagrama siguiente muestra estas capas:
En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.
Observemos por ejemplo la caja que viene definida por el siguiente código CSS, que establece los valores para las propiedades width, height, margin, border, y padding:
El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.
El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.
Ejercicio propuesto: Jugando con el modelo de cajas
En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase definida en CSS que establece los valores de las propiedades width, height, margin, border y padding. Utilizando ese código, crea una página web con cinco cajas diferentes, cada una con diferentes estilos. Tienes que cambiar también el color del texto (puedes elegir los colores que más te gusten). Y finalmente añade algunas sombras al texto usando diferentes estilos y colores.
<div class="caja1">Esta es una caja de 250x200px con un borde rojo de 5px y un fondo gris claro, un relleno de 10px y un margen de 25px.</div>
<div class="caja2">Esta es una caja de 300x200px con un borde verde de 7px, fondo gris, color de texto blanco, relleno de 5px y margen de 0px.</div>
...
Y el resultado:
Márgenes, relleno y bordes
En el ejemplo anterior ya has visto cómo usar las propiedades margin, padding y border. Las propiedades que hemos usado en ese ejemplo son propiedades abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.
Vamos a explorar estas propiedades más detalladamente.
Margen
El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.
Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad margin, o cada lado individualmente usando las propiedades equivalentes sin abreviar:
Crea una página web con el ejemplo que tienes a continuación y cambia los valores de los márgenes para ver cómo se desplazan las cajas debido a que el margen crea o elimina espacio (si es un margen negativo) entre este elemento y el elemento contenedor. Finalmente, añade tres cajas más con cualquier estilo que desees dentro del mismo contenedor.
<div class="contenedor">
<div class="caja1">Esta es una caja con 50% de ancho y 10px desde la parte superior e izquierda dentro de un contenedor</div>
<div class="caja2">Esta es una caja con 50% de ancho y 10px desde la parte superior y 50px a la izquierda dentro de un contenedor</div>
<div class="caja3">Esta es una caja con 50% de ancho y 10px desde la parte superior y 100px a la izquierda dentro de un contenedor</div>
...
</div>
Relleno
El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.
Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad padding, o para cada lado uno de los lados usando las propiedades equivalentes:
Si cambias los valores para el relleno de las clases «.caja» del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja. También puedes cambiar el relleno en la clase «.contenedor», que ampliará el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y aumentará el espacio entre su borde y lo que esté dentro del elemento. Crea una página web con el siguiente código y añade tres cuadros más con diferentes rellenos y estilos.
<div class="caja1">
Esta es una caja sin relleno
</div>
<div class="caja2">
Esta es una caja con 25px de relleno
</div>
<div class="caja3">
Esta es una caja con 50px de relleno
</div>
...
Bordes
El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.
Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.
Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad border.
Para establecer las propiedades de cada lado de forma individual, puedes utilizar:
En el siguiente ejemplo hemos utilizado varios métodos abreviados y largos para diseñar los bordes. Crea una nueva página web con ese código y combina las diferentes propiedades para comprobar cómo funcionan. Finalmente, añade tres cajas más y configura los estilos de borde como más te guste.
Puedes echar un vistazo a las páginas de MDN (enlazadas arriba) para obtener información sobre los diferentes estilos de borde que puedes elegir. También puedes echar un vistazo a los diferentes colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
<div class="caja1">Esta es una caja con diferentes tipos de bordes</div>
<div class="caja2">Esta es otra caja con diferentes tipos de bordes</div>
<div class="caja1">
<div class="caja2">Esta es una caja con diferentes tipos de bordes dentro de otra caja</div>
</div>
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
Estas son cajas dentro de cajas
</div>
</div>
</div>
</div>
</div>
</div>
...
Test
Comprueba tus conocimientos con este test sobre el modelo de cajas.
A través de esta presentación, estas diapositivas, y este vídeo, te familiarizarás con los contenidos clave de esta unidad.
Introducción
En esta unidad repasaremos en detalle todos los fundamentos básicos del estilo de texto y fuentes, incluyendo la configuración del peso (o grueso) de la fuente, familia y estilo, la propiedad abreviada (shorthand) de fuente, alineación de texto y otros efectos, así como el espaciado entre líneas y letras.
¿Qué implica dar estilo al texto en CSS?
Las propiedades CSS utilizadas para dar estilo al texto generalmente se dividen en dos categorías, que veremos por separado en esta unidad:
Estilos de fuente: Propiedades que afectan a la fuente que se aplica al texto, influyendo qué tipografía se usa, qué tamaño tiene, si es negrita, cursiva, etc.
Estilos de diseño de texto: Propiedades que afectan al espaciado y otras características de diseño del texto, permitiendo manipular, por ejemplo, el espacio entre líneas y letras, y cómo se alinea el texto dentro del cuadro de contenido.
Debemos tener en cuenta que el texto dentro de un elemento se ve afectado como una sola entidad. No podemos seleccionar y dar estilo a subsecciones de texto a menos que las incluyamos dentro de otro elemento (<span> o <strong>, por ejemplo).
Color de la fuente
Pasemos directamente a ver las propiedades para estilizar fuentes. En esta sección aplicaremos diferentes propiedades CSS a la misma muestra HTML.
La propiedad color establece el color del contenido en primer plano de los elementos seleccionados (que generalmente es el texto, pero también puede incluir otras cosas, como un subrayado o una línea superior colocada en el texto usando la propiedad text-decoration):
p {
color: red;
}
Ejercicio propuesto
Crea una nueva página web compuesta por 2 archivos: un archivo HTML con el código de abajo, y otro con algún código CSS para cambiar los elementos <h1> y <p> a cualquier color que te guste. No olvides vincular el archivo CSS desde el archivo HTML y validar tu código.
<h1>Tommy el gato</h1>
<p>Bien recuerdo que fue hace como una comida...</p>
<p>Dijo Tommy el Gato mientras se tambaleaba hacia atrás para despejar cualquier materia extraña que pudiera haberse anidado en su poderosa garganta. Muchas ratas gordas de callejón habían encontrado su fin mientras miraban a quemarropa el cavernoso cañón de esta impresionante máquina merodeadora. Verdaderamente una maravilla de la naturaleza este depredador urbano — Tommy el gato tenía muchas historias que contar. Pero fue en una rara ocasión como esta que lo hizo.</p>
Familias de fuentes
Para establecer una fuente diferente en tu texto, puedes usar la propiedad font-family — esto te permite especificar una fuente (o lista de fuentes) para que el navegador la aplique a los elementos seleccionados. El navegador solo aplicará una fuente si está disponible en el ordenador o dispositivo desde donde se accede al sitio web; si no, simplemente usará una fuente predeterminada del navegador. Un ejemplo muy simple para utilizar la fuente «Arial» podría ser el siguiente:
p {
font-family: arial;
}
Esto haría que todos los párrafos de una página adopten la fuente Arial, que debería estar disponible en la mayoría de ordenadores o dispositivos que permiten utilizar un navegador web.
Fuentes predeterminadas
CSS define cinco nombres genéricos para fuentes: serif, sans-serif, monospace, cursive y fantasy. Estos son muy genéricos y el tipo de letra exacto utilizado al usar esos nombres depende de cada navegador y puede variar para cada sistema operativo en el que se estén ejecutando. El navegador intentará proporcionar al menos una fuente que parezca apropiada. Por un lado, los tipos serif, sans-serif y monospace son bastante predecibles y deberían proporcionar algo razonable. Por otro lado, cursive y fantasy son menos predecibles y recomendamos usarlos sólo si se ha comprobado el resultado previamente.
Los cinco nombres se definen de la siguiente manera (encontrarás abajo algunos ejemplos de cómo se ven):
serif: Fuentes que tienen remates (los adornos y otros pequeños detalles que ves al final de los trazos en algunas tipografías).
sans-serif: Fuentes que no tienen remates (sin serifa).
monospace: Fuentes donde cada carácter tiene el mismo ancho, típicamente usadas en listados de código.
cursive: Fuentes que pretenden emular la escritura a mano, con trazos fluidos y conectados.
fantasy: Fuentes que pretenden ser decorativas.
Ejercicio propuesto: Fuentes predeterminadas
Usando el código del ejercicio anterior, copia y pega los párrafos varias veces (5 en total) y define algunas clases para aplicar todas las fuentes predeterminadas (serif, sans-serif, monospace, cursive, fantasy). Debes establecer una fuente y color diferente cada vez. Tu código fuente y el resultado deberían parecerse a lo siguiente:
Código HTML:
<h1>Tommy el gato</h1>
<p class="serif">Bien recuerdo que fue hace como una comida...</p>
<p class="serif">Dijo Tommy el Gato mientras se tambaleaba hacia atrás para despejar cualquier materia extraña que pudiera haberse anidado en su poderosa garganta. Muchas ratas gordas de callejón habían encontrado su fin mientras miraban a quemarropa el cavernoso cañón de esta impresionante máquina merodeadora. Verdaderamente una maravilla de la naturaleza este depredador urbano — Tommy el gato tenía muchas historias que contar. Pero fue en una rara ocasión como esta que lo hizo.</p>
...
<p class="fantasy">Bien recuerdo que fue hace como una comida...</p>
<p class="fantasy">Dijo Tommy el Gato mientras se tambaleaba hacia atrás para despejar cualquier materia extraña que pudiera haberse anidado en su poderosa garganta. Muchas ratas gordas de callejón habían encontrado su fin mientras miraban a quemarropa el cavernoso cañón de esta impresionante máquina merodeadora. Verdaderamente una maravilla de la naturaleza este depredador urbano — Tommy el gato tenía muchas historias que contar. Pero fue en una rara ocasión como esta que lo hizo.</p>
Cuando nos referimos a la disponibilidad de fuentes, solo hay un cierto número de fuentes que están generalmente disponibles en todos los sistemas y, por lo tanto, se pueden usar sin mucha preocupación. Estas son las llamadas fuentes seguras para la web.
La mayoría de las veces, como desarrolladores web queremos tener un control más específico sobre las fuentes utilizadas para mostrar nuestro contenido de texto. El problema es encontrar una manera de saber qué fuente está disponible en el ordenador o dispositivo utilizado para ver nuestras páginas web. No hay forma de saber esto en todos los casos, pero las fuentes seguras para la web se sabe que están disponibles en casi todas las instancias de los sistemas operativos más usados (Windows, macOS, las distribuciones de Linux más comunes, Android e iOS).
La lista de fuentes seguras reales cambiará a medida que los sistemas operativos evolucionen, pero es razonable considerar las siguientes fuentes como seguras, al menos por ahora (muchas de ellas se popularizaron gracias a la iniciativa de Microsoft Core fonts for the Web a finales de los 90 y principios de los 2000):
Arial (sans-serif)
Courier New (monospace)
Georgia (serif)
Times New Roman (serif)
Trebuchet MS (sans-serif)
Verdana (sans-serif)
Entre varios recursos, el sitio web cssfontstack.com mantiene una lista de fuentes seguras disponibles en sistemas operativos Windows y macOS, lo que puede ayudarte a tomar la decisión sobre qué consideras seguro para tu uso.
Ejercicio propuesto: Fuentes seguras más habituales
Crea una nueva página web con un encabezado (<h1>) y otros seis párrafos (<p>) con cualquier contenido que te guste, y establece una fuente diferente para cada uno de ellos (Arial, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana). También puedes cambiar el color del texto.
Los nombres de fuentes que tienen más de una palabra (como Trebuchet MS) deben estar acotados por comillas, por ejemplo:
font-family: "Trebuchet MS";
Pilas de fuentes
Dado que no puedes garantizar la disponibilidad de las fuentes que quieres usar en tus páginas web (incluso una fuente web podría fallar por alguna razón), puedes suministrar una pila de fuentes para que el navegador tenga múltiples fuentes de donde elegir. Esto simplemente implica un valor de font-family que consiste en múltiples nombres de fuentes separados por comas, por ejemplo:
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
En tal caso, el navegador comienza al inicio de la lista y verifica si esa fuente está disponible en el ordenador o dispositivo correspondiente. Si es así, aplica esa fuente a los elementos seleccionados. Si no, pasa a la siguiente fuente, y así sucesivamente.
Es una buena idea proporcionar un nombre de fuente genérica adecuada al final de la pila para que, si ninguna de las fuentes listadas está disponible, el navegador pueda al menos proporcionar algo aproximadamente adecuado. En este punto conviene enfatizar que la fuente por defecto aplicada al texto de los párrafos de una página web suele ser de tipo serif, en muchos casos Times New Roman.
Ejercicio propuesto: Más fuentes seguras y pilas de fuentes
Crea una nueva página web con un encabezado y otros cinco párrafos con cualquier contenido que te guste, y establece una fuente diferente para cada uno de ellos, pero esta vez no puedes utilizar ninguna fuente usada anteriormente: debes seleccionar otras fuentes de cssfontstack.com. Además, en este ejercicio tienes que usar pilas de fuentes para asegurar que al menos una fuente esté siempre disponible, y también puedes cambiar el color. Finalmente, verifica tu página web usando varios navegadores desde varios dispositivos y sistemas operativos, para asegurarte de que todas las fuentes se muestran.
Si estás cambiando el color y la familia de fuentes usando pilas de fuentes, tu código CSS y HTML debería parecerse al siguiente:
Los servicios de fuentes online generalmente almacenan y sirven fuentes para ti, por lo que no tienes que preocuparte por la disponibilidad de la fuente, y generalmente solo necesitas insertar una línea o dos de código en tu sitio para hacer que todo funcione. Ejemplos incluyen Adobe Fonts y Cloud.typography. La mayoría de estos servicios son por suscripción, con la notable excepción de Google Fonts, un servicio gratuito muy útil, especialmente para trabajos de prueba rápida y creación de demos.
La mayoría de estos servicios son fáciles de usar, por lo que no los cubriremos en gran detalle. Echemos un vistazo rápido a Google Fonts, para que te hagas una idea. Estos son los pasos que tienes que seguir para usar una o varias de las fuentes que proporcionan:
Puedes usar los filtros para mostrar los tipos de fuentes que te gusten.
Para seleccionar una familia de fuentes, haz clic en ella.
Una vez que hayas seleccionado la fuente, presiona el botón Get font en la esquina superior derecha.
Presiona ahora el botón <> Get embed code en la esquina superior derecha.
Copia el código que se muestra dentro del cuadro etiquetado como Embed code in the <head> of your html. Esos son los enlaces a la fuente seleccionada.
Pega el código en el head de tu archivo HTML. Ponlo encima de los elementos <link> existentes que puedas tener en tu página web, para que la fuente se importe antes de que intentes usarla en tu propio CSS.
Luego necesitas seleccionar la fuente usando una declaración CSS dentro de tu CSS para aplicar la fuente personalizada a tu HTML, como por ejemplo: font-family: "Permanent Marker";
Ejercicio propuesto: Google fonts
Crea una página web con diez párrafos, cada uno usando una fuente de Google diferente.
Por ejemplo, para usar las fuentes de Google «Nerko One», «Permanent Marker» y «Rock Salt», tu código HTML debería parecerse al siguiente:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de fuentes de texto</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nerko+One&family=Permanent+Marker&family=Rock+Salt&display=swap">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Ejemplo de fuentes de texto</h1>
<p class="nerko">Este es un texto con la fuente Nerko One</p>
<p class="marker">Este es un texto con la fuente Permanent Marker</p>
<p class="rock">Este es un texto con la fuente Rock Salt</p>
</body>
</html>
Y el código CSS dentro de tu propio archivo styles.css podría ser el siguiente:
El tamaño de la fuente (establecido con la propiedad font-size) puede tomar valores medidos en varias unidades (como porcentajes), sin embargo, las unidades más comunes que se suelen utilizar para dimensionar texto son:
px (píxeles): El número de píxeles de alto que quieres que sea el texto (esta es una unidad absoluta).
em: 1 em es igual al tamaño de fuente establecido en el elemento padre del elemento actual que estamos estilizando (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento padre). Esto puede volverse complicado de calcular si tienes muchos elementos anidados con diferentes tamaños de fuente establecidos, pero es bastante natural una vez que te acostumbras, y puedes usar em para dimensionar todo, no solo texto. Puedes tener un sitio web completo dimensionado usando em, lo cual facilita el mantenimiento.
rem: Estos funcionan igual que em, excepto que 1 rem es igual al tamaño de fuente establecido en el elemento raíz del documento (es decir, <html>), no el elemento padre. Esto hace que resulte mucho más fácil calcular tus tamaños de fuente, aunque si quieres soportar navegadores realmente antiguos, podrías tener problemas (rem no es compatible con Internet Explorer 8 y versiones anteriores).
Tamaño absoluto (píxeles)
La forma más fácil de cambiar el tamaño de tu texto es estableciendo un número específico de píxeles. Sin embargo, esta podría no ser la mejor solución, ya que en caso de que quieras aumentar (o disminuir) el tamaño de todo el texto en tu sitio web, deberías cambiar cada valor manualmente (una vez por cada regla CSS). Así que, vamos a seguir adelante con un primer ejercicio usando píxeles, pero después de eso usaremos una forma más conveniente en otro ejercicio usando valores relativos.
Ejercicio propuesto: Tamaño absoluto con «px»
Crea una nueva página web con al menos 15 párrafos de algún texto que te guste, y establece el tamaño de la fuente para cada párrafo un poco más grande cada vez. Debes usar píxeles para establecer cada tamaño de fuente.
Tu código fuente y el resultado deberían parecerse al que se muestra a continuación (puedes elegir cualquier nombre de clase, colores y tamaños que te gusten):
<p class="ten">Este es un texto con tamaño de fuente de 10 px</p>
<p class="eleven">Este es un texto con tamaño de fuente de 11 px</p>
<p class="twelve">Este es un texto con tamaño de fuente de 12 px</p>
<p class="thirteen">Este es un texto con tamaño de fuente de 13 px</p>
...
Tamaño relativo («em» y «rem»)
El font-size de un elemento se hereda del elemento padre de ese elemento. Todo esto comienza con el elemento raíz de todo el documento (<html>), cuyo font-size está establecido en 16 px como estándar en todos los navegadores. Cualquier párrafo (u otro elemento que no tenga un tamaño diferente establecido por el navegador) dentro del elemento raíz tendrá un tamaño final de 16 px. Otros elementos pueden tener diferentes tamaños predeterminados, por ejemplo, un elemento <h1> tiene un tamaño de 2 em establecido por defecto, por lo que tendrá un tamaño final de 32 px.
Las cosas se vuelven más complicadas cuando empiezas a alterar el tamaño de fuente de elementos anidados. Por ejemplo, si tuvieras un elemento <article> en tu página, y establecieras su font-size a 1.5 em (lo que resultaría en un tamaño final de 24 px), y luego quisieras que los párrafos dentro de los elementos <article> tuvieran un tamaño de fuente calculado de 20 px, ¿qué valor em usarías?
<!-- El tamaño base para todo el documento es de 16px -->
<article> <!-- Si el font-size de este elemento es 1.5em -->
<p>My paragraph</p> <!-- ¿Cómo podríamos obtener un tamaño de fuente de 20px aquí? -->
</article>
Necesitarías establecer su valor em a 20/24, o 0.83333333 em. Las matemáticas pueden ser complicadas, así que necesitas tener cuidado sobre cómo estilizas las cosas. Es mejor usar rem donde puedas, para mantener las cosas simples, y evitar establecer el font-size de elementos contenedores donde sea posible.
Al dimensionar tu texto, suele ser una buena idea establecer el font-size base del documento a 10px, para que luego las matemáticas sean mucho más fáciles de calcular (los valores (r)em requeridos son entonces el tamaño de fuente en píxeles dividido por 10, no 16). Después de hacer eso, puedes dimensionar fácilmente los diferentes tipos de texto en tu documento a lo que quieras. También es una buena idea listar todos tus conjuntos de reglas de font-size en un área designada en tu hoja de estilos, para que sean fáciles de encontrar.
Ejercicio propuesto: Tamaño relativo con «rem»
Crea una nueva página web con al menos 15 párrafos de algún texto que te guste, y establece el tamaño de la fuente para cada párrafo un poco más grande cada vez. Esta vez, debes usar tamaño relativo para establecer cada tamaño de fuente (por ejemplo, con unidades «rem»). Cuando termines de escribir tu código, verifica los resultados usando tu navegador, y establece diferentes valores para el tamaño principal (dentro del elemento html) y verifica que el tamaño de todos los párrafos cambia en consecuencia.
Tu código fuente y resultado deberían parecerse a lo siguiente (puedes elegir cualquier nombre de clase, colores y tamaños que te gusten):
<p>This is a text with 1 rem font size</p>
<p class="eleven">This is a text with 1.1 rem font size</p>
<p class="twelve">This is a text with 1.2 rem font size</p>
<p class="thirteen">This is a text with 1.3 rem font size</p>
...
Estilo de fuente, peso, transformación y decoración
CSS proporciona cuatro propiedades comunes para alterar la apariencia visual del texto:
font-style: Se usa para activar y desactivar la cursiva en el texto. Los valores posibles son los siguientes (rara vez usarás esto, a menos que quieras desactivar algún estilo de cursiva por alguna razón):
normal: Establece el texto en la fuente normal (desactiva las cursivas existentes).
italic: Establece el texto para usar la versión cursiva de la fuente si está disponible; si no, simulará las cursivas con oblicua en su lugar.
oblique: Establece el texto para usar una versión simulada de la fuente cursiva, creada inclinando la versión normal.
font-weight: Establece qué tan grueso o delgado debe mostrarse el texto. Esto puede tomar valores de palabras clave normal, bold, lighter, bolder, o valores numéricos de 100 a 900.
text-transform: Te permite configurar tu fuente para que se transforme. Los valores incluyen:
none: Evita cualquier transformación.
uppercase: Transforma todo el texto a MAYÚSCULAS.
lowercase: Transforma todo el texto a minúsculas.
capitalize: Transforma todas las palabras para que la primera letra sea Mayúscula.
full-width: Transforma todos los glifos para que se escriban dentro de un cuadrado de ancho fijo, similar a una fuente monoespaciada, permitiendo alinear glifos latinos junto con glifos de idiomas asiáticos (como chino, japonés, coreano).
text-decoration: Establece o desactiva las decoraciones de texto. Se utiliza principalmente text-decoration: none; para eliminar el subrayado predeterminado de los enlaces al estilizarlos. También puedes usar underline (subrayado), overline (línea superior), y line-through (tachado). Ten en cuenta que text-decoration puede aceptar múltiples valores a la vez, por ejemplo text-decoration: underline overline. También ten en cuenta que text-decoration es una propiedad abreviada para text-decoration-line, text-decoration-style, y text-decoration-color. Puedes usar combinaciones de estos valores de propiedad para crear efectos interesantes, como por ejemplo:
p {
font-size: 1.5rem;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
text-decoration: underline red wavy;
}
Ejercicio propuesto: Estilo, peso, transformación y decoración
Crea un sitio web con al menos 15 párrafos para mostrar la mayoría de los valores que se pueden usar con las propiedades font-style, font-weight, font-transform y font-decoration.
Este es un ejemplo del resultado que deberías obtener (puedes elegir tus propias combinaciones):
Sombras de texto
Puedes aplicar sombras proyectadas a tu texto usando la propiedad text-shadow. Esto toma hasta cuatro valores, como se muestra en el ejemplo a continuación:
text-shadow: 4px 4px 5px red;
Las cuatro propiedades son las siguientes:
El desplazamiento horizontal de la sombra desde el texto original. Esto puede tomar la mayoría de las unidades de longitud y tamaño disponibles en CSS, pero usarás más comúnmente px. Los valores positivos mueven la sombra a la derecha, y los valores negativos a la izquierda. Este valor debe incluirse.
El desplazamiento vertical de la sombra desde el texto original; se comporta básicamente igual que el desplazamiento horizontal, excepto que mueve la sombra hacia arriba/abajo, no izquierda/derecha. Este valor debe incluirse.
El radio de difuminado. Un valor más alto significa que la sombra se dispersa más ampliamente. Si este valor no se incluye, por defecto es 0, lo que significa que no tendrá difuminado. Esto puede tomar la mayoría de las unidades de longitud y tamaño disponibles en CSS.
El color base de la sombra, que puede tomar cualquier unidad de color CSS. Si no se incluye, por defecto es currentColor, es decir, el color de la sombra se toma de la propiedad color del elemento.
También puedes aplicar múltiples sombras al mismo texto incluyendo múltiples valores de sombra separados por comas, por ejemplo:
text-shadow: 1px 1px 1px red,
2px 2px 1px red;
Ejercicio propuesto: Sombras simples
Crea un sitio web con al menos 15 párrafos con sombras, cada uno con diferentes desplazamientos y colores. También puedes cambiar cualquier otra propiedad que te guste, como la familia de fuentes. Deberías usar Google Fonts para asegurarte de que todo se muestra de la manera correcta para todos los sistemas operativos y navegadores.
Este es un ejemplo del resultado que deberías obtener (puedes elegir tus propias combinaciones):
Ejercicio propuesto: Sombras múltiples
Crea un sitio web con al menos 10 párrafos, cada uno con múltiples sombras y también diferentes desplazamientos y colores. También puedes cambiar cualquier otra propiedad que te guste, como la familia de fuentes y el tamaño de fuente. Deberías usar Google Fonts para asegurarte de que todo se muestra de la manera correcta para todos los sistemas operativos y navegadores.
Este es un ejemplo del resultado que deberías obtener (puedes elegir tus propias combinaciones):
Alineación de texto
La propiedad text-align se usa para controlar cómo se alinea el texto dentro de su cuadro de contenido contenedor. Los valores disponibles son los siguientes, y funcionan casi de la misma manera que lo hacen en una aplicación regular de procesador de textos:
left: Justifica el texto a la izquierda.
right: Justifica el texto a la derecha.
center: Centra el texto.
justify: Hace que el texto se expanda, variando los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho. Necesitas usar esto con cuidado, ya que a veces puede verse terrible, especialmente cuando se aplica a un párrafo con muchas palabras largas. Si vas a usar esto, también deberías pensar en usar algo más junto con ello, como hyphens, para romper algunas de las palabras más largas a través de las líneas.
Por ejemplo, puedes centrar algún texto simplemente usando el siguiente código CSS:
text-align: center;
Ejercicio propuesto: Tipos de alineación
Crea una página web con 4 encabezados y 4 párrafos, cada uno con un tipo de alineación diferente.
Puedes usar cualquier texto que te guste, pero teniendo en cuenta que debes insertar varias líneas para ver correctamente cómo se realiza la alineación:
Altura de línea
La propiedad line-height establece la altura de cada línea de texto. Esto puede ayudar a mejorar la legibilidad. A menudo se establece como un valor sin unidades (como 1.5), que actúa como un multiplicador del tamaño de la fuente.
p {
line-height: 1.5;
}
Ejercicio propuesto: Alturas de línea
Experimenta con diferentes alturas de línea en un párrafo de texto largo para ver cómo afecta a la legibilidad. Prueba valores como 0.8, 1, 1.5 y 2.
Espaciado entre letras y palabras
Las propiedades letter-spacing y word-spacing te permiten establecer el espaciado entre letras y palabras en tu texto. No usarás esto muy a menudo, pero podrías encontrar un uso para obtener una cierta apariencia, o para mejorar la legibilidad de una fuente particularmente densa. Pueden tomar la mayoría de las unidades de longitud y tamaño.
Así que como ejemplo, podríamos aplicar algo de word-spacing y letter-spacing así:
word-spacing: 4px;
letter-spacing: 4px;
Ejercicio propuesto: Espaciado
Crea una página web con al menos 2 encabezados y 2 párrafos, cada uno con diferente espaciado de palabras y letras (puedes elegir los valores que quieras).
Especificación de fuente abreviada
Muchas propiedades de fuente también se pueden establecer a través de la propiedad abreviada (shorthand) font. Estas son: font-style, font-variant, font-weight, font-stretch, font-size, line-height, y font-family.
Si quieres usar estas propiedades abreviadas, hay algunas cosas que debes tener en cuenta:
Debes especificar valores para estas propiedades en el siguiente orden: font-style, font-variant, font-weight, font-stretch, font-size, line-height, y font-family.
Si omites valores para cualquier propiedad, se usará el valor predeterminado (o heredado), excepto para font-size y font-family, que son obligatorios.
Se requiere una barra inclinada (/) entre font-size y line-height.
Un ejemplo completo podría ser el siguiente:
p {
font: italic bold 16px/1.5 "Courier New", monospace;
}
Ejercicio propuesto: Propiedades de fuente en una línea
Intenta reescribir el CSS de uno de tus ejercicios anteriores usando la propiedad abreviada font siempre que sea posible.
Otras propiedades que vale la pena mirar
En esta unidad queríamos cubrir sólo las propiedades más importantes. Una vez que te hayas acostumbrado a usar las anteriores, también deberías echar un vistazo a las siguientes propiedades:
Estilos de fuente:
font-variant: Cambia entre alternativas de versalitas y fuentes normales.
font-kerning: Activa y desactiva las opciones de interletraje de fuente.
font-variant-caps: Controla el uso de glifos de mayúsculas alternativos.
font-variant-east-asian: Controla el uso de glifos alternativos para escrituras de Asia Oriental, como japonés y chino.
font-variant-ligatures: Controla qué ligaduras y formas contextuales se utilizan en el texto.
font-variant-numeric: Controla el uso de glifos alternativos para números, fracciones y marcadores ordinales.
font-variant-position: Controla el uso de glifos alternativos de tamaños más pequeños posicionados como superíndice o subíndice.
font-size-adjust: Ajusta el tamaño visual de la fuente independientemente de su tamaño de fuente real.
font-stretch: Cambia entre posibles versiones estiradas alternativas de una fuente dada.
text-underline-position: Especifica la posición de los subrayados establecidos usando el valor underline de la propiedad text-decoration-line.
text-rendering: Intenta realizar alguna optimización de renderizado de texto.
Estilos de diseño de texto:
text-indent: Especifica cuánto espacio horizontal se debe dejar antes del comienzo de la primera línea del contenido de texto.
text-overflow: Define cómo se señala a los usuarios el contenido desbordado que no se muestra.
white-space: Define cómo se manejan los espacios en blanco y los saltos de línea asociados dentro del elemento.
word-break: Especifica si se deben partir las líneas dentro de las palabras.
direction: Define la dirección del texto (esto depende del idioma y generalmente es mejor dejar que HTML maneje esa parte ya que está ligada al contenido del texto).
hyphens: Activa y desactiva la separación silábica para los idiomas compatibles.
line-break: Suaviza o refuerza el salto de línea para idiomas asiáticos.
text-align-last: Define cómo se alinea la última línea de un bloque o una línea, justo antes de un salto de línea forzado.
A través de esta presentación, estas diapositivas, y este vídeo, te familiarizarás con los contenidos clave de esta unidad.
Introducción
En el módulo de Introducción al HTML, puedes encontrar los conceptos básicos para saber qué es HTML y cómo se usa para definir documentos que puedan se interpretados por un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Estos estilos vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al fichero HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito. Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así, con los mismos estilos por defecto. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, pudiendo establecer el diseño que cada uno desee.
¿Para qué sirve CSS?
Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.
Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: HTML es el más común, pero también existen otros como SVG o XML.
Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los navegadores, como por ejemplo Firefox, Chrome o Edge, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.
El código CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar también para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación.
Sintaxis de CSS
CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre con letras grandes de color rojo».
El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:
h1 {
color: blue;
font-size: 5em;
}
La regla se abre con un selector. Este selecciona el elemento HTML al que queremos aplicar nuestros estilos. En este caso, cambiaremos el diseño de los encabezados de nivel uno (<h1>).
Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.
Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las propiedades CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.
Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra:
Algunos valores se aprenden rápidamente, mientras que otros son difíciles de recordar. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o si deseas saber qué más se puede usar como valor. Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características) enumeradas en la referencia CSS del proyecto MDN. También puedes buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre alguna particularidad de CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».
Añadir CSS a un documento
Lo primero que debemos hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el código CSS desde el encabezado del documento. Para ello bastará con crear un archivo en la misma carpeta que el documento HTML y guardarlo como estilos.css. La extensión .css indicará que nuestro archivo contiene código CSS.
Para vincular estilos.css a index.html, bastará con añadir la siguiente línea en algún lugar dentro del <head> del documento HTML:
<link rel="stylesheet" href="estilos.css">
Este elemento <link> utiliza el atributo rel para indicarle al navegador que debe utilizar una hoja de estilo y especifica la ubicación de esa hoja de estilo con el valor del atributo href. Puedes probar si el código CSS funciona correctamente añadiendo una regla al fichero estilos.css. Para ello puedes usar cualquier editor de código para añadir lo siguiente al archivo CSS:
h1 {
color: blue;
}
Debes tener en cuenta que después de hacer cualquier cambio, deberás guardar los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser azul. Si esto es correcto, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no cambia el color del encabezado, verifica que hayas escrito todo correctamente.
Puedes continuar trabajando en estilos.css localmente o usar cualquier otro editor (como repl.it) para continuar con este tutorial.
Ejercicio propuesto: Enlazar ficheros y añadir estilos
Nuestro punto de partida en esta unidad es un documento HTML. Copia el código que tienes a continuación y guárdalo en un nuevo archivo HTML para trabajar en tu propio ordenador. Después de eso, crea un nuevo archivo CSS para configurar todos los títulos <h1> en color rojo y guárdalo con el nombre «estilos.css» en la misma carpeta que el documento HTML. Finalmente verifica los resultados usando un navegador y no olvides validar el código.
Recuerda que la parte más importante de este ejercicio es vincular tu archivo CSS colocando una sola línea dentro de la sección <head>. Después de eso, dentro de «estilos.css» solo necesitarás insertar tres líneas:
HTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Empezando con CSS</title>
<!-- Utilizaremos los estilos que tengamos dentro de 'estilos.css' -->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Yo soy un estilo de nivel 1</h1>
<p>Esto es un párrafo de texto.</p>
<p>Esto es un párrafo y también un enlace a <a href="https://google.com">Google</a>.</p>
<ul>
<li>Primer elemento de una lista</li>
<li>Segundo elemento de una lista</li>
<li>Tercer elemento de una lista</li>
</ul>
</body>
</html>
Fichero CSS (estilos.css):
h1 {
...
}
Ejercicio propuesto: Estilos de encabezados
Usando los archivos HTML y CSS del ejercicio anterior, añade algunos encabezados <h2> y cambia el color con el que aparecen utilizando CSS. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un selector de elementos: un selector que coincide directamente con el nombre de un elemento HTML. Para seleccionar todos los párrafos del documento, se usa el selector p. De esta forma, para hacer que el texto de todos los párrafos se muestren de color verde, bastará con utilizar el siguiente código:
p {
color: green;
}
Puedes utilizar múltiples selectores a la vez, separándolos con una coma. Por ejemplo, si queremos que el texto de todos los párrafos y de todos los elementos de cualquier lista sea verde, el código a utilizar sería el siguiente:
p, li {
color: green;
}
Ejercicio propuesto: Cambiar el color de varios elementos
Usando los archivos HTML y CSS del ejercicio anterior, cambia el color de los párrafos y elementos de la lista. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
CSS nos ofrece la capacidad de aplicar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <a> (anchor). Tiene diferentes estados dependiendo de si se ha visitado o no, si se pasa el ratón por encima, o si se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. Utilizando el código CSS que se muestra a continuación se deberían visualizar en color rosa los enlaces que no se han visitado y en verde los que sí.
También puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:
a:hover {
text-decoration: none;
}
En el ejemplo de arriba hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, es conveniente recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento.
Ejercicio propuesto: Aplicar estilos a los enlaces
Usando los archivos HTML y CSS del ejercicio anterior, inserta varios párrafos con algunos otros enlaces a tus páginas preferidas y cambia el color de todos los enlaces. También debes usar diferentes colores cuando se ha visitado el enlace y cuando el ratón está sobre el enlace. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como viene siendo habitual, verifica los resultados con tu navegador y no olvides validar el código.
Cambiar el comportamiento predeterminado de los elementos
Cuando visualizamos una página web, incluso con un código tan simple como el de nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se amontonaría y tendríamos que darle formato desde cero. Todos los navegadores modernos suelen mostrar el contenido HTML por defecto de la misma manera.
Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia. Un buen ejemplo es <ul>, que muestra una lista desordenada. Por defecto tiene viñetas, pero si decidimos que no las queremos, podemos eliminarlas fácilmente de este modo:
ul {
list-style-type: none;
}
Puedes consultar en MDN la propiedad list-style-type para ver qué valores admite. Echa un vistazo a la página de list-style-type y encontrarás un ejemplo interactivo en la parte superior donde podrás probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página). También descubrirás en esa página que además de eliminar las viñetas de la lista, también puedes cambiarlas.
Ejercicio propuesto: Cambiar las viñetas de una lista
Utilizando los archivos HTML y CSS del ejercicio anterior, intenta configurar el list-style-type con square. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Deberías obtener un resultado similar a este:
Ejercicio propuesto: Cambiar el estilo de una lista numerada
Usando los archivos HTML y CSS del ejercicio anterior, agregue una lista ordenada (<ol>) y configura el list-style-type con upper-roman. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Deberías obtener un resultado similar a este:
Utilizando clases
Hasta ahora, hemos utilizado selectores cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y establecer el estilo que se aplicará al utilizar dicha clase.
Puedes añadir un atributo de clase a cualquier elemento dentro de tu fichero HTML. Por ejemplo, podríamos utilizar el atributo «class» sobre elementos de tipo lista de la siguiente forma:
Después de escribir ese código HTML, en tu CSS, puedes diseñar las clases lista-roja-con-cuadrados y lista-roja-con-cuadrados creando un par de selectores que comiencen con un punto:
Para observar el resultado después de escribir nuevo código HTML y CSS, bastará con guardar los archivos y refrescar el contenido del navegador pulsando Ctrl+F5.
Ejercicio propuesto: Estilos diferentes para cada lista
Usando los archivos HTML y CSS del ejercicio anterior, añade varias listas para obtener algo similar al resultado que se muestra a continuación. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
En lo que respecta a las listas no ordenadas (<ul>) debes crear 4 clases diferentes, cada una de ellas con un valor diferente de la propiedad list-style-type (none, disc, circle, square). Para las listas ordenadas (<ol>) debes crear otras clases, cada una también con valores diferentes para la propiedad list-style-type (upper-roman, lower-greek, lower-alpha, upper-alpha).
Ejercicio propuesto: Usar CSS con encabezados, párrafos y texto general
Cambia el color, las viñetas y la numeración de diversas listas de los ejercicios de listas de la unidad 4 de HTML (https://fernandoruizrico.com/html-unidad-4/). No olvides validar tu código de nuevo.
