CSS
Tutorial CSS: Propiedades de texto
CSS propiedades texto: definición y uso. Domina la definición y uso de propiedades de texto en CSS con ejemplos prácticos y detallados.
¿Qué son las propiedades de texto en CSS?
Las propiedades de texto en CSS se utilizan para controlar el aspecto y la disposición del texto en una página web. Estas propiedades permiten a los desarrolladores estilizar el texto para que se alinee con el diseño deseado, mejorar la legibilidad, crear efectos especiales y asegurar una experiencia de usuario coherente y atractiva. Las propiedades de texto se pueden aplicar a nivel de bloque o en línea, y afectan aspectos como el espaciado, tamaño, alineación, decoración, sombra, y transformación del texto.
Algunas de las propiedades de texto más comunes en CSS incluyen:
color: Establece el color del texto.
p {
color: #333333; /* Gris oscuro */
}
font-family: Define la fuente que se utilizará en el texto.
p {
font-family: 'Arial', sans-serif;
}
font-size: Especifica el tamaño del texto.
p {
font-size: 16px;
}
font-weight: Determina el grosor del texto (negrita).
p {
font-weight: bold;
}
line-height: Controla la altura de las líneas del texto, facilitando la legibilidad.
p {
line-height: 1.5;
}
text-transform: Cambia la capitalización del texto (mayúsculas, minúsculas, capitalización de cada palabra).
p {
text-transform: uppercase;
}
text-shadow: Aplica sombra al texto para darle un efecto visual.
p {
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
white-space: Controla cómo se maneja el espacio en blanco dentro de un bloque de texto.
p {
white-space: nowrap; /* Previene el salto de línea */
}
text-indent: Establece la indentación de la primera línea de texto.
p {
text-indent: 50px;
}
text-overflow: Maneja cómo se muestra el texto que se desborda del contenedor.
p {
text-overflow: ellipsis; /* Añade puntos suspensivos si el texto se desborda */
}
Estas propiedades, entre otras, permiten una gran flexibilidad y control sobre el estilo y la presentación del texto en una página web. El uso adecuado de estas propiedades puede mejorar significativamente la estética y la usabilidad del sitio web.
La propiedad text-align
La propiedad text-align en CSS se utiliza para definir la alineación del texto dentro de su contenedor. Esta propiedad es especialmente útil en elementos de bloque (como <div>, <p>, y <h1>) y se puede aplicar también a elementos en línea y en línea-bloque. text-align afecta solo el contenido del contenedor, no al contenedor en sí.
Los valores aceptados por text-align incluyen:
left: Alinea el texto a la izquierda del contenedor. Es el valor por defecto en la mayoría de los navegadores cuando el idioma del texto se lee de izquierda a derecha (LTR).
.left-aligned {
text-align: left;
}
right: Alinea el texto a la derecha del contenedor. Es útil especialmente en idiomas que se leen de derecha a izquierda (RTL).
.right-aligned {
text-align: right;
}
center: Centra el texto dentro del contenedor. Es especialmente útil para títulos o elementos donde se desea un enfoque más equilibrado.
.center-aligned {
text-align: center;
}
justify: Ajusta el texto para que se alinee tanto a la izquierda como a la derecha del contenedor, añadiendo espacio adicional entre palabras según sea necesario. Este valor garantiza que ambos bordes del texto sean rectos y equidistantes.
.justify-aligned {
text-align: justify;
}
startyend: Estos valores siguen el flujo de escritura del texto. En textos LTR,startequivale aleftyendaright; mientras que en textos RTL,startequivale arightyendaleft.
.start-aligned {
text-align: start;
}
.end-aligned {
text-align: end;
}
Ejemplos de uso:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
</style>
</head>
<body>
<p class="left">Este texto está alineado a la izquierda.</p>
<p class="right">Este texto está alineado a la derecha.</p>
<p class="center">Este texto está centrado.</p>
<p class="justify">Este texto está justificado. Notarás que los espacios entre palabras se ajustan para que ambos lados del texto estén alineados con los bordes del contenedor.</p>
</body>
</html>
Observaciones adicionales:
- El valor
justifypuede no ser adecuado para todos los tipos de contenido, ya que puede causar espacios irregulares entre palabras, afectando la legibilidad. - En contenedores flexibles o de grillas, como aquellos creados con CSS grid o Flexbox,
text-alignpuede tener un comportamiento diferente y es recomendable combinarlo con otras propiedades para lograr la disposición deseada. text-alignno afecta elementos en línea directa como<span>. Para alinear esos elementos, es mejor recurrir a la propiedadvertical-aligno ajustar los estilos del contenedor.
El uso de text-align es una herramienta eficaz para controlar la disposición del texto y mejorar la experiencia del usuario a través de un diseño cohesivo y organizado.
La propiedad text-decoration
text-decoration en CSS se utiliza para agregar decoraciones al texto, proporcionando efectos visuales que mejoran la presentación del contenido textual en la página web. La propiedad text-decoration ofrece varias opciones para subrayar, tachar, o aplicar una línea superior o parpadeante al texto.
Puedes aplicar text-decoration usando estos valores individuales o combinando varios de ellos:
none: Elimina cualquier decoración aplicada al texto.
p {
text-decoration: none;
}
underline: Subraya el texto.
p {
text-decoration: underline;
}
overline: Aplica una línea sobre el texto.
p {
text-decoration: overline;
}
line-through: Dibuja una línea a través del texto, simulando un tachado.
p {
text-decoration: line-through;
}
text-decoration también proporciona la posibilidad de definir el estilo y el color de la decoración mediante las propiedades text-decoration-style y text-decoration-color:
text-decoration-style
Establece el estilo de la decoración del texto. Los valores disponibles son:
solid: Línea continua (valor por defecto).
p {
text-decoration-style: solid;
}
double: Línea doble.
p {
text-decoration-style: double;
}
dotted: Línea punteada.
p {
text-decoration-style: dotted;
}
dashed: Línea discontinua o de guiones.
p {
text-decoration-style: dashed;
}
wavy: Línea ondulada.
p {
text-decoration-style: wavy;
}
text-decoration-color
Permite definir el color de la decoración del texto, independientemente del color del propio texto.
p {
text-decoration-color: red;
}
Ejemplos combinados
Para aplicar múltiples decoraciones y estilos, se puede utilizar una combinación de las propiedades mencionadas:
p {
text-decoration: underline wavy blue;
text-decoration-thickness: 2px;
}
Ejemplo práctico
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.underlined {
text-decoration: underline;
}
.overlined {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.underline-red-dashed {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: red;
}
.double-underline-blue {
text-decoration: underline double;
text-decoration-color: blue;
}
</style>
</head>
<body>
<p class="underlined">Este texto está subrayado.</p>
<p class="overlined">Este texto tiene una línea sobre él.</p>
<p class="line-through">Este texto está tachado.</p>
<p class="underline-red-dashed">Este texto está subrayado con una línea discontinua roja.</p>
<p class="double-underline-blue">Este texto está subrayado con una línea doble azul.</p>
</body>
</html>
Gracias a la propiedad text-decoration en CSS, los desarrolladores tienen la capacidad de aplicar diversas decoraciones a los textos, lo cual puede ser útil no solo para la estilización estética, sino también para mejorar la accesibilidad y la organización visual del contenido en una página web.
La propiedad letter-spacing y word-spacing
La propiedad letter-spacing en CSS se utiliza para ajustar el espacio entre caracteres en un bloque de texto. Esta propiedad es útil para mejorar la legibilidad y ajustar el diseño tipográfico de un sitio web. word-spacing por su parte, controla el espacio entre palabras en un bloque de texto. Al igual que letter-spacing, puede aplicarse para ajustar la legibilidad y el diseño estético.
Propiedad letter-spacing
La propiedad letter-spacing acepta valores de longitud (positivos o negativos) que determinan el espacio adicional (o reducción) entre los caracteres.
Ejemplos de uso:
/* Incrementa el espacio entre caracteres */
p {
letter-spacing: 2px;
}
/* Disminuye el espacio entre caracteres */
p.compact {
letter-spacing: -1px;
}
Uso en HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.expanded {
letter-spacing: 3px;
}
.compact {
letter-spacing: -0.5px;
}
</style>
</head>
<body>
<p class="expanded">Este texto tiene un espacio incrementado entre caracteres.</p>
<p class="compact">Este texto tiene un espacio reducido entre caracteres.</p>
</body>
</html>
Propiedad word-spacing
La propiedad word-spacing controla el espacio entre palabras. Acepta valores de longitud (positivos o negativos), permitiendo aumentar o reducir el espacio entre palabras de manera similar a letter-spacing.
Ejemplos de uso:
/* Incrementa el espacio entre palabras */
p {
word-spacing: 5px;
}
/* Disminuye el espacio entre palabras */
p.compact {
word-spacing: -2px;
}
Uso en HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.expanded {
word-spacing: 4px;
}
.compact {
word-spacing: -1px;
}
</style>
</head>
<body>
<p class="expanded">Este texto tiene un espacio incrementado entre palabras.</p>
<p class="compact">Este texto tiene un espacio reducido entre palabras.</p>
</body>
</html>
Consideraciones y mejores prácticas
- Legibilidad: Incrementar excesivamente los valores de
letter-spacingyword-spacingpuede afectar negativamente la legibilidad del texto. Es importante encontrar un equilibrio adecuado. - Rendimiento: Aplicar estas propiedades a textos largos o numerosos elementos puede impactar el rendimiento, ya que el navegador debe recalcular la disposición del texto.
- Compatibilidad: Ambas propiedades son ampliamente soportadas por los navegadores modernos. Sin embargo, siempre es una buena práctica verificar la compatibilidad cuando se aplican valores extremos o específicos.
CSS variables para espaciado:
Puede ser útil definir variables CSS (custom properties) para mantener la consistencia en el espaciado a través de los estilos.
:root {
--letter-spacing-expanded: 2px;
--letter-spacing-compact: -0.5px;
--word-spacing-expanded: 4px;
--word-spacing-compact: -1px;
}
p.expanded {
letter-spacing: var(--letter-spacing-expanded);
word-spacing: var(--word-spacing-expanded);
}
p.compact {
letter-spacing: var(--letter-spacing-compact);
word-spacing: var(--word-spacing-compact);
}
El uso de letter-spacing y word-spacing mejora el control sobre la disposición del texto, permitiendo ajustes precisos y consistentes en el diseño tipográfico de una página web.
Ejercicios de esta lección Propiedades de texto
Evalúa tus conocimientos de esta lección Propiedades de texto con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Modelo de caja
Propiedad 'display'
Modelo de caja
Propiedades de posicionamiento
Sombras en texto y cajas
Variables en CSS
Metodologías de escritura CSS: BEM, SMACSS, OOCSS
Grid en diseños de cuadrícula
Propiedades de texto
Animaciones y transiciones
Introducción a CSS
Selectores avanzados
Flexbox en diseños modernos
Sintaxis básica
Sintaxis
Página web completa con Bootstrap
Estilos de fuente
Sintaxis avanzada
Herencia y cascada
Selectores básicos
Diseño responsive con media queries
Pseudo-clases y pseudo-elementos
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Propiedades de texto
Propiedades de fondo
Selectores básicos
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja Y Posicionamiento
Propiedades De Posicionamiento
Modelo Caja Y Posicionamiento
Propiedad 'Display'
Modelo Caja Y Posicionamiento
Elementos 'Float' Y 'Clear'
Modelo Caja Y Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox Y Grid
Css Grid Para Crear Layouts Y Estructuras
Flexbox Y Grid
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
Introducción A Tailwind Css
Introducción Y Entorno
Instalación De Tailwind Css
Introducción Y Entorno
Fundamentos Del Sistema De Utility-first En Tailwind Css
Fundamentos
Fundamentos Del Diseño Responsive En Tailwind Css
Fundamentos
Tipografía Y Fuentes En Tailwind Css
Clases De Utilidad
Clases De Tamaño De Tailwind Css
Clases De Utilidad
Utilidades De Espaciado Y Alineación De Tailwind Css
Clases De Utilidad
Clases De Colores Y Fondo De Tailwind Css
Clases De Utilidad
Clases De Bordes De Tailwind Css
Clases De Utilidad
Hover, Focus Y Estado De Tailwind Css
Clases De Utilidad
Transiciones Y Animaciones De Tailwind Css
Clases De Utilidad
Contenedores Y Columnas En Tailwind Css
Layout
Flexbox En Tailwind Css
Layout
Grid En Tailwind Css
Layout
Conocimiento General De Tailwind Css - Evaluación Multirespuesta
Evaluación
Conocimiento General De Tailwind Css - Evaluación Código
Evaluación
Certificados de superación de CSS
Supera todos los ejercicios de programación del curso de CSS y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el uso de
color,font-family,font-sizeyfont-weight. - Aplicar
line-heightpara mejorar la legibilidad del texto. - Usar
text-transformpara manejar la capitalización del texto. - Crear sombras de texto con
text-shadow. - Controlar el manejo del espacio en blanco con
white-space. - Utilizar
text-indentytext-overflowpara estilos específicos. - Alinear texto con
text-aligny comprender sus distintos valores. - Aplicar decoraciones de texto usando
text-decorationy sus variantes (text-decoration-style,text-decoration-color). - Ajustar el espaciado entre caracteres y palabras con
letter-spacingyword-spacing.