Agora vamos tratar de tipografia do Blog. Tipo de fontes, tamanho, cores, estilos, etc.
Veja bem, tudo que está sendo feito aqui, pode ser feito off-line.
Sempre que crio um código CSS, primeiro crio off-line. Testo várias vezes, depois copio o código pronto para dentro do Blog.
Espero que tenham escolhido o tipo de fonte que queiram usar em seu Blog. Caso não, na Internet existem vários sites que oferecem fontes gratuitas para todos os gostos.
Eu escolhi a fonte Georgia (Adoro). Além de estar instalada em todos computadores, ela é elegante, remete a um texto sério, tem seu charme de vanguarda.
Iremos mexer no código CSS, para isso abra seu Bloco de Notas (Só trabalho com códigos com ele), e digite o seguinte:
Você acaba de criar uma página de teste para seus códigos off-line.
Para trabalharmos as fontes iremos escrever algo entre as tags body para fazermos testes de fontes. Escreva qualquer coisa que tenha acentos, maiúsculas, caracteres especiais entre outras coisas, para você ver como fica todos estes itens com o tipo de fonte que você escolheu. Eu escrevi:
<style>
body {
font-family: Georgia, Palatino, Palatino Linotype, serif; (definimos a fonte a ser usada)
color : #000; (definimos a cor padrão do texto do blog inteiro)
}
</style>
Agora que definimos a fonte padrão existem mais algumas coisas que precisam ser codificadas no body como: margens, paddings e outros. O código completo ficaria assim:
body {
background : url(http://endereçodoservidor/imagem do body.jpg) repeat-y 50% 0; (em azul substitua pela imagem fatiada para o Body do Blog)
margin:0;
font-family : Georgia, Palatino, Palatino Linotype, serif;
color : #000;
text-align: center;
}
A imagem que estipulei para o Body é está:
O body está configurado, agora outro elemento constante no blog são os links. Nesta etapa você já deve ter decidido que cor será os estados, link, visited e hover, então colocaria este código logo a seguir:
a:link {
color:#b30000;
text-decoration:none;
}
a:visited {
color:#999;
text-decoration:none;
}
a:hover {
color:#123974;
text-decoration:underline;
}
O arquivo testetemplates.html completo ficaria assim então:
<html>
color:#b30000;
text-decoration:none;
}
a:visited {
color:#999;
text-decoration:none;
}
a:hover {
color:#123974;
text-decoration:underline;
}
</style>
</head>
Agora salve o arquivo e abra em seu navegador. Confira se está tudo do seu agrado. Se estiver entre no seu blog na guia Editar HTML e cole no trecho que está a tag Body da CSS.
Como já havia dito este tutorial abrangerá todas partes do blog por isso será dividos em partes para que o leitor entenda cada uma. Caso haja dúvidas, não deixe de fazer suas perguntas nos comentários.
Até a próxima
Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email
Veja bem, tudo que está sendo feito aqui, pode ser feito off-line.
Sempre que crio um código CSS, primeiro crio off-line. Testo várias vezes, depois copio o código pronto para dentro do Blog.
Espero que tenham escolhido o tipo de fonte que queiram usar em seu Blog. Caso não, na Internet existem vários sites que oferecem fontes gratuitas para todos os gostos.
Eu escolhi a fonte Georgia (Adoro). Além de estar instalada em todos computadores, ela é elegante, remete a um texto sério, tem seu charme de vanguarda.
Iremos mexer no código CSS, para isso abra seu Bloco de Notas (Só trabalho com códigos com ele), e digite o seguinte:
<html>Salve este arquivo clicando em arquivo/salvar como salve como: testetemplate.html
<head>
<title></title>
</head>
<body>
</body>
</html>
Você acaba de criar uma página de teste para seus códigos off-line.
Para trabalharmos as fontes iremos escrever algo entre as tags body para fazermos testes de fontes. Escreva qualquer coisa que tenha acentos, maiúsculas, caracteres especiais entre outras coisas, para você ver como fica todos estes itens com o tipo de fonte que você escolheu. Eu escrevi:
Tipografia de Blog. Escolha de fontes com acentos. Fonte para cabeçalho e vários itens de página do blog.Feito isso vamos colocar o CSS em ação. Entre as tags <head></head> escreva o seguinte código:
<style>
body {
font-family: Georgia, Palatino, Palatino Linotype, serif; (definimos a fonte a ser usada)
color : #000; (definimos a cor padrão do texto do blog inteiro)
}
</style>
Agora que definimos a fonte padrão existem mais algumas coisas que precisam ser codificadas no body como: margens, paddings e outros. O código completo ficaria assim:
body {
background : url(http://endereçodoservidor/imagem do body.jpg) repeat-y 50% 0; (em azul substitua pela imagem fatiada para o Body do Blog)
margin:0;
font-family : Georgia, Palatino, Palatino Linotype, serif;
color : #000;
text-align: center;
}
A imagem que estipulei para o Body é está:
O body está configurado, agora outro elemento constante no blog são os links. Nesta etapa você já deve ter decidido que cor será os estados, link, visited e hover, então colocaria este código logo a seguir:
a:link {
color:#b30000;
text-decoration:none;
}
a:visited {
color:#999;
text-decoration:none;
}
a:hover {
color:#123974;
text-decoration:underline;
}
O arquivo testetemplates.html completo ficaria assim então:
<html>
<head>a:link {
<title></title>
<style>
body {
background : url(http://endereçodoservidor/imagem do body.jpg) repeat-y 50% 0; (em azul substitua pela imagem fatiada para o Body do Blog)
margin:0;
font-family : Georgia, Palatino, Palatino Linotype, serif;
color : #000;
text-align: center;
}
color:#b30000;
text-decoration:none;
}
a:visited {
color:#999;
text-decoration:none;
}
a:hover {
color:#123974;
text-decoration:underline;
}
</style>
</head>
<body>Veja que em verde criei um link para podermos ver eles em ação.
Tipografia de Blog. Escolha de fontes com acentos. Fonte para cabeçalho e vários itens de página do blog. <a href="link.html">Teste de estado de links</a>.
</body>
</html>
Agora salve o arquivo e abra em seu navegador. Confira se está tudo do seu agrado. Se estiver entre no seu blog na guia Editar HTML e cole no trecho que está a tag Body da CSS.
Como já havia dito este tutorial abrangerá todas partes do blog por isso será dividos em partes para que o leitor entenda cada uma. Caso haja dúvidas, não deixe de fazer suas perguntas nos comentários.
Até a próxima
Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email
Marcelo R. Souza
0 comentários:
Postar um comentário
Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:
<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>
Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa