Formatando texto com CSS
Dicas Blogger -
-
20/01/2011 -
Nenhum comentário(s)
Outra 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.
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. .......
Este artigo pertence ao Dicas Blogger.Todos os direitos reservados.
É proibido copiar, reproduzir e/ou distribuir os artigos deste blog. Verifique a licença.
... veja o post completo
Veja estes outros posts:
- O que fazer com um texto?
A matéria de capa do caderno Mais! deste domingo foi sobre o aumento de oficinas que ensinam técnicas literárias (reportagem bem legal do ERNANE GUIMARÃES NETO, que pode ser lida, por assinantes, AQUI). E o leitor Ricardo me chamou a atenção para a retranca em que três professores de oficinas dão...- Texto
Como fazer um bom texto?
Não há receita certa. Há quem tenha um jeito inato; outros vão melhorando com o tempo; alguns jamais conseguem.
Dá para aprimorar? Sim, disse meu colega MÁRIO MAGALHÃES no último dia da semana de palestras, ontem. E o mote principal foi: (1) leia bons...- Como criar botões com CSS
Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das páginas da web. Eu já ensinei algumas técnicas legais pra deixar seu blog do Blogger mais bonito e profissional e hoje vou explicar como criar botões (buttons)...- CSS e o futebol inglês
Essa é demais. O "Sun", venenoso tablóide britânico, diz que o CSS foi contratado pelo russo Roman Abramovich, o polêmico dono do Chelsea, para tocar na festa de aniversário de 16 anos de sua filha, Anna. A Anna é new rave: sua festa, no mês que vem, vai ser ...- CSS - Tabela com bordas e linhas visíveis
A tabela é um recurso fantástico do HTML, já que possui a capacidade de nos dar muitas informações uando pouco espaço.
Antigamente – antes do CSS – a tabela HTML era usada até para criar o layout de um site. Hoje, o uso ficou mais restrito à exibições de ítens em forma de planilha.
A tabela em...
AVISO: O blogolhada não se responsabiliza pelos posts constantes no site, sendo estes de responsabilidade única e exclusiva de cada autor. VISITE o site de origem e consulte informações com o autor para evitar possíveis transtornos.