11 de jul. de 2012
O que posso fazer com a CSS?
Você pode alterar quase todos os aspectos da aparência do seu blog
apenas alterando a folha de estilo do seu modelo. Listamos aqui algumas
das coisas mais comuns a se fazer. Caso deseje conhecer tutoriais e
exemplos mais a fundo, consulte Exemplos de CSS do W3 Schools e The W3C Introduction to CSS.
Nossos modelos-padrão possuem todas as informações CSS na parte superior, entre as tags
<style></style>. Você verá um grupo de linhas com esta aparência:
A linha destacada mostra o estilo aplicado em cada tag
<h3>
do seu blog. O que descreveremos aqui são algumas opções de como
estilizá-lo. Qualquer trecho do código abaixo pode ser inserido entre {
chaves } na folha de estilo.| Code | Exemplos | |
| Cores | ||
|---|---|---|
color:blue; | Este texto está em azul. | |
background:yellow; | Isso significa um plano de fundo amarelo. | |
| É possível inserir aqui os nomes de muitas cores comuns (como vermelho, verde, amarelo) ou utilizar códigos hexadecimais para uma quantidade maior de cores (por exemplo #0033AA). Para obter mais informações sobre cores, visite a página Web Color Reference. | ||
| Bordas | ||
border:solid 1px red; |
Isso significa uma borda vermelha.
| |
| Uma borda pode ser sólida, pontilhada ou tracejada. A largura aqui é especificada em pixels (px). As cores podem ser nomes ou códigos hexadecimais. Para fazer uma borda em apenas uma lateral, utilize borda superior, borda inferior, borda da direita ou borda da esquerda. | ||
| Fontes | ||
font-family:"Times New Roman",Serif; | Esta é uma fonte com serifas. | |
font-family:Verdana,Sans-Serif; | Esta é uma fonte sem serifas. | |
| Você pode especificar uma lista de opções de fontes. Se a primeira não estiver disponível no computador do seu leitor, será utilizada a próxima, e assim por diante. A indicação "Serif" utilizará qualquer fonte com serifas disponível. | ||
font-size:24px; | Este texto tem 24 pixels de tamanho. | |
| As unidades de medida podem ser pixels (px), pontos (pt), polegadas (in) ou porcentagem do tamanho padrão (%). | ||
font-weight:bold; | Texto em negrito. | |
| As opções são negrito e normal. | ||
text-decoration:underline; | Este texto está sublinhado. | |
| Os recursos de "decoração" do texto podem ser definidos como nenhum, sublinhado, sobrescrito ou tachado. Este é o tipo mais comumente utilizado para remover o sublinhado dos links. | ||
text-align:right; |
Este texto está alinhado à direita.
| |
| O alinhamento pode ser definido como alinhar à esquerda, alinhar à direita ou justificar. | ||
| Margens e Espaçamento | ||
margin:15px; |
Isso significa uma margem de 15 pixels.
| |
padding:15px; |
Isso significa um espaçamento de 15 pixels.
| |
| A margem e o espaçamento especificam a quantidade de
espaço em torno de alguma coisa. A diferença entre ambos é que a margem
está fora da borda e o espaçamento está dentro. (A borda aqui serve
apenas como ilustração.) Assim como acontece com a borda, você pode especificar uma lateral de cada vez com margem esquerda, espaçamento superior etc. Também é possível definir todas de uma só vez com margin:1px 2px 3px 4px;, onde a ordem é superior, à direita, inferior e à esquerda. | ||
Observações:
Você também pode utilizar estilos interparágrafos, caso queira formatar um trecho específico do texto em uma postagem só uma vez. Veja o formato que deve ser utilizado:
Você também pode utilizar estilos interparágrafos, caso queira formatar um trecho específico do texto em uma postagem só uma vez. Veja o formato que deve ser utilizado:
<span style="color:red;">Este texto ficará em vermelho.</span>
