Texto em CSS
Conheça os fundamentos da estilização de texto com CSS: decoração de texto, cor do texto, alinhamento e muito mais. Veja os exemplos.
Aqui analisamos as propriedades que podem ajudar a aplicar estilo ao seu texto
- Cor do texto
- Alinhamento do texto
- Decoração do texto
- Transformação do texto
- Sombra do texto
- Indentação do texto
- Espaçamento entre letras
- Altura da linha
- Espaçamento entre palavras
Cor do texto
A propriedade color é utilizada para definir a cor do texto. Para especificar a cor, pode utilizar o nome de uma cor (red), um valor HEX (#ff0000) ou um valor RGB (rgb (255,0,0) ).
Exemplo da propriedade color:.
Exemplo de utilização da propriedade CSS color:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="color:#ff0000">This is some paragraph in red.</p>
</body>
</html>Resultado
Alinhamento do texto
A propriedade de alinhamento é utilizada para alinhar o texto dentro de um elemento à esquerda, à direita, ao centro, etc.
O alinhamento do texto tem quatro valores:
- Left (text-align: left) - alinha o texto à esquerda
- Right (text-align: right) - alinha o texto à direita
- Center (text-align: center) - coloca o texto no centro da página
- Justify (text-align: justify) - estica a linha de texto para alinhar tanto a extremidade esquerda como a direita (como nas revistas e nos jornais)
Por predefinição, os browsers alinham o texto à esquerda; se for necessário alinhar o texto à direita ou colocá-lo ao centro, devemos utilizar o valor correspondente.
Exemplo da propriedade text-align:
Exemplo de utilização da propriedade CSS text-align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is some paragraph</p>
<p style="text-align:center">Some paragraph with value center.</p>
<p style="text-align:right">Some paragraph with value right.</p>
<p style="text-align:justify">Some paragraph with value justify.</p>
</body>
</html>Decoração do texto
A decoração do texto é utilizada para definir a decoração do texto. Em CSS3, é uma forma abreviada (shorthand) das propriedades CSS text-decoration-line, CSS text-decoration-color e CSS text-decoration-style.
A propriedade decoration é utilizada para especificar as decorações de linha adicionadas ao texto. Os seguintes valores são válidos para a propriedade text-decoration.
- Overline (text-decoration:overline) - cada linha de texto tem uma linha por cima
- Underline (text-decoration:underline) - cada linha de texto é sublinhada
- Line-through (text-decoration:line-through) - cada linha de texto tem uma linha a atravessá-la
- None (text-decoration:none) - não é aplicada qualquer decoração ao texto
Exemplo da propriedade text-decoration:
Exemplo de utilização da propriedade CSS text-decoration:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a style="text-decoration:none">This is link without underline</a>
<h1 style="text-decoration:overline">Heading with value overline.</h1>
<p style="text-decoration:line-through">Some paragraph with value line-through.</p>
<a style="text-decoration:underline">Some hyperlink with value underline.</a>
</body>
</html>Resultado
Transformação do texto
A propriedade transform é utilizada para controlar a capitalização do texto. Isto significa que pode definir o seu texto para maiúsculas, minúsculas ou com a inicial maiúscula (title case).
A propriedade transform tem os seguintes valores:
- Uppercase (text-transform: uppercase) - converte todos os caracteres em maiúsculas
- Lowercase (text-transform: lowercase) - converte todos os caracteres em minúsculas
- Capitalize (text-transform: capitalize) - converte em maiúscula o primeiro caractere de cada palavra
Exemplo da propriedade text-transform:
Exemplo de utilização da propriedade CSS text-transform:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="text-transform:uppercase">Paragraph with uppercase.</p>
<p style="text-transform:lowercase">Paragraph with lowercase.</p>
<p style="text-transform:capitalize">Paragraph with capitalize.</p>
</body>
</html>Resultado
Sombra do texto
Utilizamos a propriedade text-shadow quando queremos dar sombra ao nosso texto.
A propriedade shadow é utilizada para aplicar vários efeitos de sombra ao texto. Aceita uma lista de valores. Cada item da lista pode ter dois ou mais valores separados por vírgula.
A sintaxe da propriedade text-shadow pode ter o seguinte aspeto
Exemplo da propriedade CSS text-shadow
text-shadow: h-shadow v-shadow blur colorAqui pode ver alguns exemplos de sombra de texto.
Indentação do texto
A propriedade text-indent é utilizada para especificar o comprimento do espaço vazio da primeira linha num bloco de texto. Os valores abaixo são válidos para esta propriedade:
- Length, que especifica a indentação em px, pt, cm, em, etc. O valor predefinido é 0. São permitidos valores negativos.
- Percentage, que especifica a indentação em percentagem da largura do bloco contentor.
- Each-line, em que a indentação afeta a primeira linha bem como cada linha após uma quebra de linha forçada, mas não afeta as linhas após uma quebra de linha automática (soft wrap).
- Hanging, que inverte as linhas que são indentadas. A primeira linha não é indentada.
- Initial, que faz com que a propriedade utilize o seu valor predefinido.
- Inherit, que herda a propriedade do seu elemento pai.
Exemplo da propriedade text-indent:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-indent: 100px;
line-height: 24px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Text Indentation Example</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Espaçamento entre letras
A propriedade CSS letter-spacing permite definir os espaços entre as letras/caracteres de um texto. Os seguintes valores são suportados por esta propriedade:
- Normal, o que significa que não haverá espaços adicionais entre os caracteres. É o valor predefinido desta propriedade.
- Length, que define um espaço adicional entre os caracteres. São permitidos valores negativos.
- Initial, que faz com que a propriedade utilize o seu valor predefinido.
- Inherit, que herda a propriedade do seu elemento pai.
Exemplo da propriedade letter-spacing:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-indent: 100px;
line-height: 24px;
font-size: 16px;
letter-spacing: 5px;
}
h3 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<h2>Example of letter-spacing property</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h3>
Here is some text with letter-spacing property.
</h3>
</body>
</html>Altura da linha
A propriedade line-height define a altura da linha. É utilizada para definir o entrelinhamento das linhas de um texto. Se o valor de line-height for superior ao valor de font-size de um elemento, a diferença será o entrelinhamento do texto. Eis os valores suportados por esta propriedade:
- Normal, que define uma altura de linha normal. É o valor predefinido desta propriedade.
- Length, que define uma altura de linha fixa em px, cm, etc.
- Number, que define um número que é multiplicado pelo tamanho de letra atual para definir a altura da linha.
- %, que define uma altura de linha em percentagem do tamanho de letra atual.
- Initial, que faz com que a propriedade utilize o seu valor predefinido.
- Inherit, que herda a propriedade do seu elemento pai.
Exemplo da propriedade line-height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
line-height: 30px;
}
h3 {
line-height: 1;
}
</style>
</head>
<body>
<h2>Example of line-height property</h2>
<p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
<h3>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</h3>
</body>
</html>Espaçamento entre palavras
Com a ajuda da propriedade CSS word-spacing, podemos alterar o espaço entre as palavras de um texto, e não entre os caracteres individuais. Suporta os valores abaixo:
- Normal, que especifica um espaçamento normal entre palavras. É o valor predefinido desta propriedade.
- Length, que especifica um espaçamento adicional entre palavras. Pode ser especificado em px, pt, cm, em, etc. São válidos valores negativos.
- Initial, que faz com que a propriedade utilize o seu valor predefinido.
- Inherit, que herda a propriedade do seu elemento pai.
Exemplo da propriedade word-spacing:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
word-spacing: 1em;
}
h3 {
word-spacing: -3px;
}
span {
display: block;
word-spacing: 3rem;
}
</style>
</head>
<body>
<h2>Example of word-spacing property</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h3>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</h3>
<span>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</span>
</body>
</html>