Este Curso de CSS é a continuação do Curso de HTML publicado aqui neste site. Tal como seu antecessor, este curso destina-se à qualquer pessoa que tenha interesse em aprender a criar websites utilizando-se das melhores técnicas recomendadas pela W3C (World Wide Web Consortium).
Esta é a quarta aula do Curso de Desenvolvimento Web com CSS. Caso ainda não tenha lido, recomendo que leia antes os artigos da aula 01 – Introdução às CSS (Folhas de Estilo) , da aula 02 – Estilo incorporado e cores em hexadecimal e da aula 03 – Estilização de textos – parte 1
Estilização de textos
Dando continuidade à aula anterior, utilizaremos um projeto modelo para testar as diferentes propriedades de estilização de textos da linguagem CSS. Segue abaixo o código HTML que estamos utilizando nos nossos exemplos.
<html> <head> <title>Liga da Justiça</title> </head> <body> <h1>Liga da Justiça</h1> <p>A Liga da Justiça é uma fictícia equipe de super-heróis publicadas pela editora americana DC Comics. A equipe é um conjunto de super-heróis e entre seus membros, destacam-se: Superman, Batman, Aquaman, Mulher Maravilha, Flash e Ciborgue.</p> <h2>Clark Kent (Superman)</h2> <h3>Bruce Wayne (Batman)</h3> <h4>Arthur Curry (Aquaman)</h4> <h5>diana prince (mulher maravilha)</h5> <h6>Barry Allen (Flash)</h6> <h6>Victor Stone (Ciborgue)</h6> </body> </html>
Propriedade: text-decoration
A propriedade text-decoration é utilizada para adicionar efeitos em elementos de texto. Você pode, por exemplo, sublinhar, riscar ou colocar uma linha sobre um texto qualquer.
No exemplo a seguir estamos sublinhando o texto da tag <h3> com o valor underline e riscando o texto da tag <h4> com o valor line-through, além de estilizar as duas tags com a cor #007722 (verde).
h3{ text-decoration: underline; color: #007722; } h4{ text-decoration: line-through; color: #007722; }
Ainda com relação à propriedade text-decoration, você tem também a opção de colocar uma linha acima do texto utilizando o valor overline.
Propriedade: letter-spacing
A propriedade letter-spacing é utilizada para definir o espaçamento entre letras. Vamos testar este recurso na tag <h3> através do seguinte código:
h3{ color: #007722; text-decoration: underline; letter-spacing: 15px; }
Propriedade: word-spacing
A propriedade word-spacing é utilizada para definir o espaçamento entre palavras. Vamos testar este recurso na tag <h4> através do seguinte código:
h4{ color: #007722; word-spacing: 18px; }
A imagem abaixo mostra o nosso projeto com todas as regras CSS que aprendemos até este momento. Observação: a propriedade “text-decoration: line-through” foi retirada do exemplo para melhor visualização da página.
Propriedade: line-height
A propriedade line-height é utilizada para definir o espaçamento (altura) entre linhas. Vamos testar este recurso na tag <p> colocando 30px de espaçamento.
p{ font-family: "Times New Roman"; font-weight: bold; text-indent: 50px; text-align: justify; line-height: 30px; }
Propriedade: text-transform
A propriedade text-transform é utilizada para a capitalização do texto, ou seja, serve para controlar a forma de exibição dos textos com letras maiúsculas ou minúsculas, independente da maneira como foi escrita no código HTML.
Para esta propriedade temos os valores uppercase, lowercase, capitalize e none.
- Uppercase – converte todas as letras em maiúsculas;
- Lowercase – converte todas as letras em minúsculas;
- Capitalize – converte a primeira letra de cada palavra em maiúscula;
- None – as letras são exibidas exatamente como foram escritas no HTML.
Para testarmos a propriedade text-transform vamos atribuir o valor uppercase na tag <h4> e o valor capitalize na tag <h5>.
h4{ color: #007722; word-spacing: 35px; text-transform: uppercase; } h5{ font-size: 22px; color: #0000FF; text-transform: capitalize; }
A imagem abaixo mostra o nosso projeto modelo com todas as regras CSS que aprendemos até este momento.
Propriedade: font
A propriedade font é utilizada para definir em um único local vários estilos para a fonte de um elemento. Ou seja, através dessa propriedade conseguimos resumir várias linhas de código CSS em apenas uma.
Supondo que para estilizar um parágrafo nós tenhamos a seguinte regra:
p{ font-style: italic; font-weight: bold; font-size: 22px; line-height: 30px; font-family: Arial, Verdana, sans-serif; }
Utilizando a propriedade font nós podemos colocar todas as características do parágrafo acima em uma única linha da seguinte forma:
p{ font: italic bold 14px/24px Arial, Verdana, sans-serif; }
A sintaxe geral para a propriedade font é: [style] [weight] [size] [/line-height] [family]. Sendo os valores size e family obrigatórios, os demais são facultativos e omitindo-os será adotado o valor padrão.
Altere no seu código do projeto modelo a regra CSS para a tag <p> conforme o exemplo utilizado acima com a propriedade font.
Para finalizar esta aula, vamos estilizar a tag <h6> com as seguintes propriedades abaixo:
h6{ font-size: 16px; color: #8A7B2C; text-transform: lowercase; }
Observe na imagem a seguir o que acontece no nosso projeto quando acrescentamos a regra CSS acima.
Os textos “barry allen (flash)” e “victor stone (ciborgue)” passaram a ter exatamente a mesma estilização devido a ambos os textos estarem marcados com a tag <h6>. Caso seja necessário realizar estilização diferente, nós precisaríamos alterar a tag de um deles ou, o que é mais comum, utilizar um recurso chamado classes para distinguir um <h6> do outro, mas isso nós aprenderemos mais adiante neste curso de CSS, Ok?
Vamos ver se você realmente está aprendendo a linguagem CSS realizando o exercício a seguir.
Exercício:
Crie um código CSS que estilize a página da “Liga da Justiça” deixando-a mais próxima possível da imagem a seguir:
Este artigo continua em: Aula 05: Estilo externo, seletor class e seletor id