Jose Hamizaki
Designer Grafico
Dom 27 Jan 2013, 7:44 am | |
p {
text-indent: 30px;
}
Exemplo
Alinhamento de textos [text-align]
A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centred). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.
No exemplo a seguir o texto contido na célula de cabeçalho
- Código:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Exemplo
Decoração de textos [text-decoration]
A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Você pode por rexemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos
são sublinhados, os cabeçalhos levam um linha em cima e os cabeçalhos são cortados por uma linha.
- Código:
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Exemplo
Espaço entre letras [letter-spacing]
O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo
são cortados por uma linha.
- Código:
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Exemplo
Espaço entre letras [letter-spacing]
O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
e de 6px entre as letras do texto de um cabeçalho
o código a seguir deverá ser usado.
- Código:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Exemplo
Transformação de textos [text-transform]
A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no código HTML.
Como exemplo tomamos a palavra "cabeçalho" que pode ser apresentada ao usuário como "CABEÇALHO" ou "Cabeçalho". São quatro os valores possíveis para text-transform:
capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe".
uppercase
Converte todas as letras para maiúscula. Por exemplo: "john doe" transforma-se para"JOHN DOE".
lowercase
Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se para"john doe".
none
Sem trasformações - o texto é apresentado como foi escrito no código HTML.
Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os textos no código foram escritos com todas as letras em minúsculas.
- Código:
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Exemplo">
[F]lames
Dom 27 Jan 2013, 8:34 am | |
Olá,
Este tutorial estará sendo movido, pois o mesmo está sendo aceito.
Até mais.
Este tutorial estará sendo movido, pois o mesmo está sendo aceito.
Até mais.
Tutorial aceito e movido para "Outros tutoriais, e recursos" |
Você não está conectado. Conecte-se ou registre-se
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Login
|
Destaque do Fórum
- Muito Obrigado
- Parabens para o Membro destaque do fórum, pela sua ótima competencia em nosso fórum, um agradecimento dos Usuários e de toda a equipe a você !! Muito Obrigado !!
Quer um Widget igual a este ?
peça o seu aqui >>>
peça o seu aqui >>>