Ediciones ENI Editorial | líder en informática
Los estilos para el texto
La aplicación de los estilos
En este capítulo, vamos a recorrer las principales propiedades CSS que permiten aplicar formato a los textos. Podremos aplicar estos estilos a elementos HTML muy diferentes. Para aplicar estilos a una selección de texto, vamos a utilizar elementos HTML de tipo inline, como <span>, <a>, <code>, etc. Para una aplicación a todo el texto de un elemento HTML, vamos a utilizar elementos de tipo block, como <p>, <h1> a <h6>, <blockquote>, etc. También puede aplicar estos estilos a los textos ubicados en las listas, tablas y formularios.
Los estilos que vamos a estudiar aplican un color y decoraciones al texto, cambian las mayúsculas/minúsculas de los caracteres, etc.
El color del texto
La propiedad color es la que permite modificar el color del texto. Vaya al capítulo Definir los estilos CSS, en la sección La notación de los colores, para revisar las notaciones usadas para los colores.
En este ejemplo muy sencillo, aplicamos dos colores, con dos notaciones diferentes, a dos elementos <span>:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
.azul {
color: blue;
}
.azul-oscuro {
color: rgb(10,21,252);
}
</style>
</head>
<body>
<p>Aenean lacinia <span class="azul">bibendum nulla</span> sed
consectetur. Curabitur <span class="azul-oscuro">blandit tempus
</span> porttitor.</p>
</body>
</html> Las declaraciones
1. El módulo CSS
Las declaraciones de texto forman parte de los módulos Text Decoration Module Level 3, que está en Candidate Recommendation a fecha 13 de agosto de 2019: https://www.w3.org/TR/css-text-decor-3/
2. Las líneas para el texto
Las declaraciones permiten aplicar una línea encima, debajo o sobre el texto, y podemos agregar un color y un tipo a estas líneas.
A continuación se muestran las tres propiedades que se pueden utilizar:
-
text-decoration-line para definir la posición de la línea. Los valores posibles son: none, underline, overline, line-through, underline overline y underline line-through.
-
text-decoration-color para elegir el color de la línea.
-
text-decoration-style para aplicar un tipo de línea (de puntos, de rayas, etc.) esta propiedad puede utilizar los siguientes valores: solid, double, dotted, dashed y wavy.
También puede utilizar la sintaxis abreviada: text-decoration.
Los valores se indican en este orden: text-decoration-line text-decoration-style text-decoration-color. Los valores simplemente se separan con un espacio.
A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style> ...El formato del texto
1. El módulo CSS
Todo el formato del texto que vamos a ver en este apartado forma parte del módulo Text Module Level 3, que está en W3C Candidate Recommendation Draft desde el 16 de marzo de 2021: https://www.w3.org/TR/css-text-3/.
2. El cambio entre mayúsculas/minúsculas
La propiedad text-transform permite cambiar las mayúsculas/minúsculas de los caracteres. Este cambio se hace sea cual sea la escritura inicial del texto. Esta propiedad acepta varios valores:
-
capitalize para pasar las primeras letras de cada palabra a mayúsculas.
-
uppercase para transformar todos los caracteres a mayúsculas.
-
lowercase para pasar todos los caracteres a minúsculas.
-
none para eliminar cualquier cambio de mayúsculas/minúsculas ya aplicado.
A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
.mayusculas {
text-transform: uppercase;
}
.mayusculas-palabras {
text-transform: capitalize;
}
</style>
</head>
<body>
<p>Aenean lacinia <span class="mayusculas">bibendum nulla
</span> sed consectetur. <span class="mayusculas-palabras">Curabitur
blandit tempus porttitor</span>.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
3. Los espacios entre los caracteres y las palabras
La propiedad letter-spacing permite modificar el espacio entre los caracteres, y la propiedad word-spacing lo aplica a nivel de las palabras. Puede utilizar valores positivos para espaciar las letras o las palabras o utilizar valores negativos para acercarlas. Observe que solo puede utilizar valores absolutos.
A continuación se muestran algunos sencillos ejemplos:
<!doctype html>
<html lang="es"> ...Otras propiedades para el texto
1. El interlineado
La altura del interlineado forma parte de la definición de las CSS 2.1 (https://www.w3.org/TR/CSS21/visudet.html#propdef-line-height). Esta propiedad se puede integrar en la sintaxis abreviada de font: https://www.w3.org/TR/css-fonts-3/#font-prop, en el módulo Fonts Module Level 3. A continuación se muestra la sintaxis del acceso directo: font: font-style font-variant font-weight font-size/line-height font-family.
Esta propiedad line-height acepta numerosos valores:
-
valor numérico sin unidad: esto define el valor multiplicador del tamaño de los caracteres utilizado en el texto.
-
valor numérico fijo en px, por ejemplo: esto indica un interlineado fijo.
-
valor numérico expresado en em, por ejemplo: esto determina el interlineado proporcional al tamaño de los caracteres utilizado en el texto.
A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
.interlineado-fijo {
line-height: 14px;
}
.interlineado-multi { ...El módulo CSS 4 para dar formato al texto
Ya se está preparando la próxima versión de los CSS para dar formato al texto. El módulo CSS Text Module Level 4 se encuentra en estado Working Draft desde el 13 de noviembre de 2019: https://www.w3.org/TR/css-text-4/.
