CSS - Texto
Este capítulo ensina como manipular texto usando propriedades CSS. Você pode definir as seguintes propriedades de texto de um elemento -
o color propriedade é usada para definir a cor de um texto.
o direction propriedade é usada para definir a direção do texto.
o letter-spacing propriedade é usada para adicionar ou subtrair espaço entre as letras que compõem uma palavra.
o word-spacing propriedade é usada para adicionar ou subtrair espaço entre as palavras de uma frase.
o text-indent propriedade é usada para indentar o texto de um parágrafo.
o text-align propriedade é usada para alinhar o texto de um documento.
o text-decoration propriedade é usada para sublinhar, sobrelinhamento e tachado.
o text-transform propriedade é usada para colocar o texto em maiúsculas ou converter o texto em letras maiúsculas ou minúsculas.
o white-space propriedade é usada para controlar o fluxo e a formatação do texto.
o text-shadow propriedade é usada para definir a sombra do texto em torno de um texto.
Defina a cor do texto
O exemplo a seguir demonstra como definir a cor do texto. O valor possível pode ser qualquer nome de cor em qualquer formato válido.
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Definir a direção do texto
O exemplo a seguir demonstra como definir a direção de um texto. Os valores possíveis são ltr ou rtl .
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Defina o espaço entre os personagens
O exemplo a seguir demonstra como definir o espaço entre os caracteres. Os valores possíveis são normais ou um número que especifica o espaço. .
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Defina o espaço entre as palavras
O exemplo a seguir demonstra como definir o espaço entre as palavras. Os valores possíveis são normais ou um número que especifica o espaço .
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Definir o recuo do texto
O exemplo a seguir demonstra como indentar a primeira linha de um parágrafo. Os valores possíveis são % ou um número que especifica o espaço de recuo .
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Defina o alinhamento do texto
O exemplo a seguir demonstra como alinhar um texto. Os valores possíveis são esquerda, direita, centro, justificar .
<html>
<head>
</head>
<body>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Decorando o Texto
O exemplo a seguir demonstra como decorar um texto. Os valores possíveis são none, underline, overline, line-through, blink .
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Definir os casos de texto
O exemplo a seguir demonstra como definir os casos para um texto. Os valores possíveis são nenhum, maiúscula, maiúscula, minúscula .
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Defina o espaço em branco entre o texto
O exemplo a seguir demonstra como o espaço em branco dentro de um elemento é tratado. Os valores possíveis são normal, pre, nowrap .
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Definir a sombra do texto
O exemplo a seguir demonstra como definir a sombra ao redor de um texto. Isso pode não ser compatível com todos os navegadores.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>Isso produzirá o seguinte resultado -