A cor da fonte pode ser definida através de color. Espera-se um valor de cor.
p {
color: red;
}Como valor, você pode indicar nomes de cores ou um valor hexadecimal de cor.
Definir a direção da escrita
A propriedade direction pode forçar a direção da escrita nos elementos. É útil a direção reversa da escrita em relação a idiomas que são escritos da direita para a esquerda.
Também é possível determinar em qual lado conteúdos excessivamente grandes serão cortados.
• ltr – da esquerda para a direita
• rtl – da direita para a esquerda
O exemplo a seguir mostra como utilizar a propriedade.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Neste caso, foram definidas duas classes.
<p class="normal">Texto escrito da esquerda para a direita. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Texto escrito da direita para a esquerda. 1 2 3 4 5 6 7 8 9 0</p>
O resultado no navegador será o seguinte:
Alinhar horizontalmente textos
A propriedade text-align define o alinhamento horizontal de parágrafos de texto e outros textos de fluxo contidos em elementos de bloco. A configuração padrão é um alinhamento à esquerda.
• left – alinhamento à esquerda
• right – alinhamento à direita
• center – centralizado
• justify – justificado
Um exemplo:
<p style="text-align:right;">
Bem-vindo
</p>
O resultado será assim:
Alinhar verticalmente
A propriedade vertical-align determina o alinhamento vertical de texto dentro de uma linha em relação à altura da linha. A especificação sempre se refere ao elemento pai, que deve ser um elemento inline. Além disso, o texto dentro de tabelas também pode ser alinhado.
Os seguintes valores estão disponíveis:
• sub – subscrito
• super – sobrescrito
• baseline – alinhado à linha de base
• top – alinhamento no topo do elemento pai
• bottom – alinhado na parte inferior do elemento pai
• middle – centralizado entre o topo e a parte inferior do elemento pai
• text-top – no topo do texto
• text-bottom – na parte inferior do texto
• Especificação de comprimento – um valor positivo ou negativo desloca o elemento acima ou abaixo da linha de base.
• Especificação de porcentagem – um valor positivo ou negativo desloca o elemento acima ou abaixo da linha de base.
Um exemplo:
.baseline {
vertical-align: baseline;
}
Observe que os valores de vertical-align são interpretados de forma muito desigual pelos diferentes navegadores. Portanto, é altamente recomendável testar os resultados antes de disponibilizar as páginas online.
Definir a decoração do texto
text-decoration é usado para atribuir propriedades adicionais a textos ou hiperlinks.
• none – sem decoração de texto
• underline – sublinhado
• overline – sobrelinhado
• line-through – tachado
• blink – piscando
Também aqui segue um exemplo:
a:link {
text-decoration: none;
}
Com isso, os hiperlinks da página não terão mais um sublinhado.
Também é possível determinar explicitamente o espaçamento entre as palavras.
<span style="word-spacing:0.5em">Bem-vindo ao PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">Bem-vindo ao PSD-Tutorials.de!</span>
Um valor numérico é esperado. No entanto, especificações em porcentagem não são possíveis.
Similar a word-spacing, temos letter-spacing. No entanto, com letter-spacing, você determina o espaçamento entre as letras de um texto. Aqui também são permitidos valores numéricos, mas não em porcentagem.
<span style="letter-spacing:0.1em">Exemplo de texto com espaçamento de caracteres de 0.1em</span><br> <span style="letter-spacing:0.3em">Exemplo de texto com espaçamento de caracteres de 0.3em</span><br>
Com a propriedade text-transform, você pode determinar se o texto deve ser em maiúsculas ou minúsculas. E isso independentemente da notação real no código-fonte. Também é possível forçar o uso de versalete.
• lowercase – minúsculo
• uppercase – maiúsculo
• capitalize – iniciais maiúsculas
• none – nenhuma transformação de texto
Exemplo:
.klein {
text-transform: lowercase;
}No navegador, o resultado é o seguinte:
Espaços e quebras de linha
Com a propriedade white-space, é definido como os espaços e quebras de linha presentes no código fonte serão exibidos no navegador.
• normal – uma quebra de linha automática é inserida. Além disso, vários espaços em branco são agrupados em um único espaço.
• pre – quebras de linha são exibidas conforme estão no código fonte.
• nowrap – nenhuma quebra de linha automática ocorre.
• pre-line – vários espaços em branco são agrupados em um único espaço. Além disso, ocorre uma quebra de linha se a caixa de exibição não for grande o suficiente.
• pre-wrap – ocorre uma quebra de linha se a caixa de exibição não for grande o suficiente.
Segue um exemplo:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>No navegador, a aparência é a seguinte:
Implementando sombras
Através da propriedade text-shadow, é possível adicionar uma sombra ao texto. Deve-se observar que essa propriedade é suportada apenas em navegadores relativamente recentes. Os navegadores que não conseguem interpretar text-shadow exibirão o texto sem sombra.text-shadow é utilizado da seguinte forma:
text-shadow: hV vV blur #xxxxxx;
E os valores significam:
• hV – Deslocamento horizontal
• vV – Deslocamento vertical
• blur – Desfoque
• #xxxxxx – Cor da sombra
O exemplo a seguir mostra uma aplicação típica de text-shadow.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
A classe definida acima é então aplicada a um cabeçalho de primeiro nível.
<h1 class="schatten">PSD-Tutorials.de</h1>
E aqui está o resultado:
Como já mencionado, você pode usar text-shadow sem problemas, já que a falta de interpretação pelos navegadores não tem efeitos negativos. O texto será exibido sem sombra.
