La propiedad text-transform se utiliza para especificar letras mayúsculas y minúsculas en un texto. Se puede usar para convertir todo en letras mayúsculas o minúsculas, o poner en mayúscula la primera letra de cada palabra.
Ejm
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}Espaciado de texto CSS
En este capítulo aprenderás acerca de las siguientes propiedades:
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
La propiedad text-indent se usa para especificar la sangría de la primera línea de un texto.
Ejm
p {
text-indent: 50px;
}La propiedad letter-spacing se utiliza para especificar el espacio entre los caracteres de un texto. El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre caracteres.
Ejm
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}La propiedad line-height se usa para especificar el espacio entre líneas.
Ejm
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}La propiedad word-spacing se utiliza para especificar el espacio entre las palabras de un texto. El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre palabras.
Ejm
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}La propiedad white-space especifica cómo se maneja el espacio en blanco dentro de un elemento. Este ejemplo demuestra cómo deshabilitar el ajuste de texto dentro de un elemento.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Using white-space</h1>
<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>
<p>Try to remove the white-space property to see the difference!</p>
</body>
</html>text-shadow
La propiedad text-shadow agrega sombra al texto. En su uso más simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px).
Ejm
h1 {
text-shadow: 2px 2px;
}Ahora vamos a añadir un color a la sombra, veamos un ejm.
Ejm
h1 {
text-shadow: 2px 2px red;
}Luego, agregamos un efecto de desenfoque (5px) a la sombra:
h1 {
text-shadow: 2px 2px 5px red;
}Otro ejm
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}