TEXTOS em CSS
Estilização de textos
Estilização de textos
Observe a seguir um trecho de documento HTML com algumas informações inseridas em CSS... veja.
<!DOCTYPE html>
<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>
Para que possamos fazer juntos este projeto modelo, copie o código HTML acima em um editor de código de sua preferência e salve em uma pasta no seu computador com o nome “liga-justica.html”. Em seguida, acrescente tag <style> dentro da seção <head> conforme mostra o exemplo a seguir.
<head>
<title>Liga da Justiça</title>
<style type="text/css">
</style>
</head>
Executando o código “liga-justica.html” em um navegador web para visualizar o resultado...
Propriedade: font-family
A propriedade font-family é utilizada para definir uma lista de fontes e sua prioridade para apresentação de um elemento HTML em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser utilizada a segunda, e assim por diante, até ser encontrada uma fonte instalada.
Vamos acrescentar então no nosso projeto a propriedade font-family conforme mostra o código a seguir.
<title>Liga da Justiça</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
</style>
Aplicando a propriedade font-family na tag <body> faremos com que todos os textos da nossa página utilizem o mesmo tipo de fonte que, no exemplo em questão, será a fonte Arial. Se o usuário não possuir a fonte Arial instalada no seu computador, será utilizada a fonte Verdana e, se ambas estiverem indisponíveis, será utilizada uma fonte qualquer da família “sans-serif”.
Vamos aplicar agora uma estilização na tag <p>.
<title>Liga da Justiça</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
p {
font-family: "Times New Roman";
}
</style>
Perceba que na estilização da tag <p> foi utilizado apenas a fonte “Times New Roman”, e nela foi necessário utilizar aspas (“”). Isso é necessário para fontes com nomes compostos que contenham espaços entre os nomes.
Até o momento, a nossa página da Liga da Justiça está com fonte “Times New Roman” na tag <p> e fonte “Arial” no restante dos textos.
Propriedade: color
A propriedade color é utilizada para definir a cor de um elemento. Como já dito anteriormente, existem várias formas de definir cores em uma regra CSS, mas a partir de agora utilizaremos a notação hexadecimal por ser a mais comumente utilizada pelos desenvolvedores web.
Exemplo:
<title>Liga da Justiça</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
p {
font-family: "Times New Roman";
}
h1 {
color: #FF0000;
}
</style>
Aplicando a propriedade color na tag <h1> com o valor #FF0000, faremos com a que cor do título da nossa página fique na cor vermelha. Faça os testes em um navegador.
Propriedade: font-size
A propriedade font-size é utilizada para definir o tamanho da fonte de um elemento. Como também já dito anteriormente, existem várias unidades de medidas para definir o tamanho de uma fonte, mas neste curso utilizaremos a medida px (pixel) no nosso projeto. Observe no código a seguir:
<title>Liga da Justiça</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
p {
font-family: "Times New Roman";
}
h1 {
color: #FF0000;
}
h2 {
font-size: 22px;
color: #0000FF;
}
h5 {
font-size: 22px;
color: #0000FF;
}
</style>
No exemplo acima você pode observar que aplicando a propriedade font-size com valor 22px nas tags <h2> e <h5>, ambas passam a ter o mesmo tamanho da letra. Além disso, aplicamos também na propriedade color o valor #0000FF (azul) para melhor diferenciarmos dos demais textos.
É importante frisar que apesar do tamanho da letra das tags <h2> e <h5> serem iguais, a relevância do conteúdo para os mecanismos de busca não foi alterado.
Propriedade: font-style
A propriedade font-style é utilizada para definir um estilo para a fonte, que pode ser: normal ou italic. O estilo normal é o padrão do navegador, mas se você deseja que determinado elemento HTML da sua página fique em itálico, você pode utilizar a propriedade font-style como mostra o exemplo a seguir :
h2{
font-size: 22px;
color: #0000FF;
font-style: italic;
}
Dessa forma, estaremos diferenciando as tags <h2> e <h5> que até o momento estavam com o mesmo font-size e color.
Propriedade: font-weight
A propriedade font-weight é utilizada para definir outro tipo de estilo para uma fonte. Podendo os valores serem normal ou bold. O estilo normal é o padrão do navegador, mas se você deseja que determinado elemento HTML de sua página fique em negrito você pode utilizar a propriedade font-weight como mostra o exemplo a seguir:
p{
font-family: "Times New Roman";
font-weight: bold;
}
Propriedade: text-indent
A propriedade text-indent é utilizada para definir um recuo na primeira linha de um parágrafo. No exemplo a seguir temos um recuo de 50px que será aplicado em todos os textos marcados com a tag <p>:
p{
font-family: "Times New Roman";
font-weight: bold;
text-indent: 50px;
}
Propriedade: text-align
A propriedade text-align é utilizada para definir o alinhamento de um elemento. Podendo ele ser alinhado à esquerda (left), à direita (right), centralizado (center), ou justificado (justify), que é quando o texto contido em uma linha se estende tocando as margens esquerda e direita, tal como você vê em jornais e revistas. Vamos testar alguns exemplos em nossa página:
p{
font-family: "Times New Roman";
font-weight: bold;
text-indent: 50px;
text-align: justify;
}
h1{
color: #FF0000;
text-align: center;
}
h2{
font-size: 22px;
color: #0000FF;
font-style: italic;
text-align: right;
}
Observe que acrescentamos a propriedade text-align nas tags <p>, <h1> e <h2>, colocando diferentes valores em cada um deles. Na tag <h1> definimos o valor centerpara centralizar o texto no navegador; na tag <p> definimos o valor justify para justificar o texto; e na tag <h2> definimos o valor right para alinhar o texto à direita. Observe na imagem a seguir o comportamento de cada um desses elementos que receberam a propriedade text-align.
Código HTML +CSS Continuando...
<!DOCTYPE html>
<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:
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>.
Pronto!Pronto!
fonte:cursocss hiperbytes
Nenhum comentário:
Postar um comentário