CSS - intermediate - Lección nº 4
Formatear textos y enlaces.
¿De qué trata esta lección?
En esta lección aprenderemos algunos ajustes relacionados con los textos. En su mayoría se trata de ajustar párrafos en el marco de editores de texto, y se pueden usar en cada etiqueta que contenga texto. Usamos la sangría de la primera línea de bloques de texto, agregamos distancia entre las líneas y alineamos los textos. Usaremos selectores relacionados con enlaces, para dar formato a enlaces en diferentes estados.
Nuevas propiedades CSS en esta lección:
text-indent: podemos sangrar los textos marcados en la primera línea con un valor determinado. La medición del valor puede ser porcentaje (%), centímetros (cm), píxel (px) o puntos (pt).
line-height: con esta propiedad CSS podemos establecer la distancia entre dos filas del texto destinado al formato. La medición al valor puede ser porcentaje (%), cm, píxel (px) o puntos (pt).
text-align: podemos alinear el texto marcado para el formato entre los dos márgenes del navegador. Los valores posibles son: center, left, right, justify (alinear dos márgenes, distribuidos uniformemente).
text-transform: el texto se puede transformar en mayúsculas, minúsculas o cada palabra se puede escribir en mayúsculas con esta propiedad. Valores posibles: uppercase, lowercase, capitalize.
text-decoration: podemos agregar una línea debajo, arriba o a través del texto. Valores posibles: overline, line-through, underline. Se pueden usar más de estos ajustes a la vez, podemos también establecer el tipo de línea.
Nuevos selectores de CSS en esta lección:
:link – este selector se puede usar para marcar la configuración de vuelta a su estado original, a los enlaces que aún no se han visitado.
:visited – con este selector podemos agregar diferentes formatos a los enlaces que se refieren a las páginas que ya se han visitado.
:hover - este selector puede aplicarse no solo a los enlaces: lo usamos para dar formato a los enlaces por separado cuando movemos el cursor sobre ellos en la ventana del navegador.
:active - este selector se puede aplicar no solo a los enlaces. Los ajustes surten efecto cuando hacemos clic en el enlace o cuando estamos a punto de activarlo.
Ejemplo clásico para formateo de texto:
En el ejemplo anterior, el encabezado está centrado en la página y está subrayado.
Utilizamos un interlineado doble y un espaciado de 1 cm en las primeras líneas de los párrafos.
Ejemplo de links:
En el ejemplo anterior, hay un conjunto de colores diferente para cada selector que enumeramos. El en lace Learn HTML! se refiere a una página que ya fue visitada. El enlace Learn CSS! es rojo oscuro, porque el cursor está sobre él.
La imagen sobre el texto Learn HTML! es un enlace activo (el botón del mouse está abajo), por eso tiene color de fondo. El enlace Learn CSS! tiene un color claro, el color para los enlaces que aún no se han visitado (este es el color dado al selector :link)
En esta lección aprenderemos algunos ajustes relacionados con los textos. En su mayoría se trata de ajustar párrafos en el marco de editores de texto, y se pueden usar en cada etiqueta que contenga texto. Usamos la sangría de la primera línea de bloques de texto, agregamos distancia entre las líneas y alineamos los textos. Usaremos selectores relacionados con enlaces, para dar formato a enlaces en diferentes estados.
Nuevas propiedades CSS en esta lección:
text-indent: podemos sangrar los textos marcados en la primera línea con un valor determinado. La medición del valor puede ser porcentaje (%), centímetros (cm), píxel (px) o puntos (pt).
line-height: con esta propiedad CSS podemos establecer la distancia entre dos filas del texto destinado al formato. La medición al valor puede ser porcentaje (%), cm, píxel (px) o puntos (pt).
text-align: podemos alinear el texto marcado para el formato entre los dos márgenes del navegador. Los valores posibles son: center, left, right, justify (alinear dos márgenes, distribuidos uniformemente).
text-transform: el texto se puede transformar en mayúsculas, minúsculas o cada palabra se puede escribir en mayúsculas con esta propiedad. Valores posibles: uppercase, lowercase, capitalize.
text-decoration: podemos agregar una línea debajo, arriba o a través del texto. Valores posibles: overline, line-through, underline. Se pueden usar más de estos ajustes a la vez, podemos también establecer el tipo de línea.
Nuevos selectores de CSS en esta lección:
:link – este selector se puede usar para marcar la configuración de vuelta a su estado original, a los enlaces que aún no se han visitado.
:visited – con este selector podemos agregar diferentes formatos a los enlaces que se refieren a las páginas que ya se han visitado.
:hover - este selector puede aplicarse no solo a los enlaces: lo usamos para dar formato a los enlaces por separado cuando movemos el cursor sobre ellos en la ventana del navegador.
:active - este selector se puede aplicar no solo a los enlaces. Los ajustes surten efecto cuando hacemos clic en el enlace o cuando estamos a punto de activarlo.
Ejemplo clásico para formateo de texto:
En el ejemplo anterior, el encabezado está centrado en la página y está subrayado.
Utilizamos un interlineado doble y un espaciado de 1 cm en las primeras líneas de los párrafos.
Ejemplo de links:
En el ejemplo anterior, hay un conjunto de colores diferente para cada selector que enumeramos. El en lace Learn HTML! se refiere a una página que ya fue visitada. El enlace Learn CSS! es rojo oscuro, porque el cursor está sobre él.
La imagen sobre el texto Learn HTML! es un enlace activo (el botón del mouse está abajo), por eso tiene color de fondo. El enlace Learn CSS! tiene un color claro, el color para los enlaces que aún no se han visitado (este es el color dado al selector :link)
Ejercicios
1. en el archivo style.css, agrega configuración de los párrafos: una sangría para las primeras líneas de 50px, la distancia entre las líneas debe ser del 150% y la alineación justificada.
Ver el resultado
2. agrega la siguiente configuración a cada celda en las tablas de la página web: tamaño de fuente de 17px, alineación a la derecha, la altura de la línea debe ser del 130%. Usa el archivo style.css.
Ver el resultado
3. aplica una altura de línea del 150% a cada lista (ordenada o no ordenada) en la página web. Usa el archivo style.css.
Ver el resultado
4. aplica cambios a los enlaces: usa diferentes colores para los enlaces visitados y los que aún no se han visitado. Deben cambiar de color cuando el cursor está sobre ellos y cuando hacemos clic en ellos. El subrayado debe desaparecer cuando el cursor está sobre ellos.
Ver el resultado
Cuestionario
1. ¿Qué valor no puede pertenecer a la propiedad text-align?
2. Como resultado de las siguientes declaraciones HTML / CSS, ¿cómo aparece el texto?
<p style="text-transform: capitalize;"> some tEXT</p>
<p style="text-transform: capitalize;"> some tEXT</p>
3. ¿Qué sucede si aplicamos la siguiente configuración a los encabezados de una página web?
h1 {
h1:hover{
h1 {
text-decoration: underline;
}h1:hover{
text-decoration: overline;
}4. ¿Qué selector necesitamos si queremos mostrar los enlaces que se refieren a sitios que ya abrimos con un color diferente?
Información suplementaria
Puedes leer más sobre el tema de la lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/css/css_text.asp,
https://www.w3schools.com/css/css_link.asp,
https://www.w3schools.com/cssref/css3_pr_text-decoration-style.asp,
https://www.w3schools.com/cssref/css_units.asp.
https://www.w3schools.com/css/css_text.asp,
https://www.w3schools.com/css/css_link.asp,
https://www.w3schools.com/cssref/css3_pr_text-decoration-style.asp,
https://www.w3schools.com/cssref/css_units.asp.
