Formatando texto com CSS

Formatando texto com CSS

6 10 99
Formatando texto com CSS 10 6 99
imageOutra coisa importante para melhorar um site, é a personalização dos textos. O CSS permite que façamos muitas coisas interessantes, como escolher o tipo de fonte, tamanho, cor, se maiúscula, normal ou minúscula e etc
As fontes
Uma fonte é um conjunto de grifos. A grosso modo, é a letra que usamos para escrever um texto. A propriedade “font” é o atalho para estilos de fontes no CSS:
  • font-style: aplica-se um estilo à fonte
  • font-weight: define a espessura da fonte
  • font-size: define o tamanho da fonte
  • font-family: define o tipo da fonte
Os atributos mais usados são:
  • font-style: italic ou normal
  • font-weight: bold ou normal
  • font-size: 30px;
  • font-family: arial, sans-serif; (veja outros exemplos, clicando aqui)
O texto
Define a aparência e a apresentação do conteúdo textual.
  • text-align: right; ( alinhado à direita)
  • text-align: center; (alinhado no centro)
  • text-align: justify; (justificado)
  • text-decoration: underline; (linha embaixo)
  • text-decoration: overline; (linha em cima)
  • text-decoration: line-through; (linha no centro do texto)
  • text-transform :uppercase; ( letras maiúsculas)
  • text-transform: capitalize; ( a primeira letra fica maiúscula)
  • text-transform:lowercase; (todas as letras minúsculas)
  • text-transform : none; ( não aplica estilos)
Cor do texto
A cor pode ser modificada usando as propriedades hexadecimais ou rgb.
  • color: #FF0000; ( cor vermelha, em hexadecimal)
  • color: rgb(255, 0, 0); ( cor vermelha, em RGB)
Veja aqui uma tabela de equivalência de cores para web.
Nos templates para o Blogger, geralmente usamos as variáveis, que permitem que façamos as edições das fontes e das cores através do painel  do designer do modelo.
image
Para cada tipo de fonte, tamanho e cor, é preciso ter uma variável correspondente.
#header h1 {
color:$blogTitleColor; font:$blogTitleFont;
font-variant:small-caps;
margin:0;
padding:10px 20px 0;
}
Variável que fica logo no começo do CSS:
<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#800040" value="#ffffff">
A variável é sempre precedida do símbolo “$”. Para criar variáveis, basta seguir o modelo acima. Como exemplo, vou criar uma variável para o título da barra lateral:
<Variable name="sidebarTitleColor" description="Sidebar Title Color"
type="color" default="#800040" value="#ffffff">
#sidebar h1 {
color:$sidebarTitleColor; font:$sidebarTitleFont; 
font-weight: bold;
margin:0;
padding:10px 20px 0;
}
Percebam que a grafia da variável tem que ser idêntica. A primeira parte deve ser colocada com as demais variáveis – que ficam logo no começo do CSS. Já a segunda parte, deve seguir a sequência de cascata dos seletores CSS.
2 Comments
Comments
  1. Vale lembrar que a composição do valor hexadecimal ( #AA00FF ) usada na formação das cores segue uma estrutura semelhante à do RGB, ou seja, os dois primeiro dígitos correspondem a intensidade do vermelho (R), os dois seguintes o verde (G) e os dois últimos o azul (B).

    Estou certo Juliana?

    ResponderExcluir
  2. Certíssimo :) É que eu não quis complicar ainda mais, o que já é complicado por natureza rs

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top