AgitaGAMES


Bem Vindos ao AgitaGAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!






Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Gustavo

1 Lição 5: Textos em Qui 5 Dez 2013 - 17:26

avatar
Membro

Lição 5: Textos


Formatar e estilizar textos é um item chave para qualquer web designer. Nesta lição você será apresentado às interessantes oportunidades que as CSS proporcionam para adicionar layout aos textos. Serão discutidadas as propriedades listadas abaixo:




Indentação de texto [text-indent]


A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os textos marcados com <p>:






p {
text-indent: 30px;
}






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 <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. E, os textos normais em parágrafos são justificados:






th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}






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 <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha.






h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}






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 <p> e de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser usado.






h1 {
letter-spacing: 6px;
}

p {
letter-spacing: 3px;
}






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 <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras maiúsculas.


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.







h1 {
text-transform: uppercase;
}

li {
text-transform: capitalize;
}






Sumário


Nas três últimas lições aprendemos várias propriedades CSS, mas há muito mais ainda a aprender com CSS. Na próxima lição veremos os links.









Ver perfil do usuário http://www.zonetoony.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum