Vamos agora escrever o código passo-a-passo. Tudo começa quando você determina o que vai editar. No caso do nosso exemplo abaixo, será o #exemplo. Depois de escrever isso, abra chaves.
#exemplo {
Na próxima linha você vai escrever (1) a propriedade a ser definida, seguida de (2) dois pontos e (3) a sua característica. No fim da linha coloque (4) ponto-e-vírgula.
#exemplo {
__color: yellow;
Nas próximas linhas a mesma coisa, até ter escrito todas as propriedades. Quando acabar, feche as chaves na última linha.
#exemplo {
__color: yellow;
__background-color: black;
__padding: 20px;
}Preste muita atenção, porque qualquer ponto esquecido no meio do caminho vai fazer com que o seu código não funcione. Agora que nós já sabemos como escrever, só falta aprendermos o que escrever. Existem muitas propriedades no CSS, e não é necessário decorar todas. Existem guias de CSS que podem ser consultados e o próprio Firebug pode nos ajudar com isso.
Mas antes de vermos quais são as propriedades, precisamos incorporar o nosso CSS ao documento. Existem três formas de se fazer isso:
1. Junto ao HTML
O CSS pode ser embutido no documento com a tag HTML style. Veja:
<style type="text/css">
#exemplo {
__margin: 10px;
}
</style>Isso pode ser feito em qualquer parte do documento, dentro das tags head ou body. Funciona inclusive se você colocar dentro do HTML de um post do Blogger.
No Blogger, todos os layouts já tem o CSS embutido no HTML dessa forma, mas utilizando a tag especial do Blogger b:skin. Se você tiver um blog, vá em Design › Editar HTML. Logo no início do código você poderá localizar o CSS. Ali você pode escrever o código, sem precisar abrir uma tag style.
No Tumblr, existe uma guia chamada Advanced na seção Customize onde você pode adicionar CSS ao código original do layout. Ali não é necessário utilizar a tag style.
2. Em um arquivo externo
Esse método é pra quem tem sites ou portais, daqueles hospedados em servidores e tal. É útil, porque você pode colocar uma mesma folha de estilo para várias páginas diferentes hospedadas. Ao modificar a folha, todas as páginas mudam.
O CSS será escrito no bloco de notas (ou editor de sua preferência) e salvo com a extensão css. Depois, hospede-o no seu servidor e linke-o nas páginas HTML com o seguinte código, dentro da tag head:
<link rel="stylesheet" type="text/css" href="style.css" />Ou ainda:
<link rel="stylesheet" type="text/css" href="http://caminho_onde_foi_hospedado.com/style.css" />3. Dentro do próprio elemento
Dessa forma não é necessário abrir ou fechar chaves, nós vamos utilizar só as propriedades e suas características. Como você vai colocar o estilo dentro da tag HTML do próprio elemento, também não é necessário indicá-la. Veja um exemplo:
<div style="background-color:yellow;margin:10px;">Aqui vai o conteúdo.</div>As propriedade CSS são colocadas entre as aspas do style. Qualquer elemento HTML pode ser modificado dessa forma, mas apenas utilize esse método quando for realmente necessário, pois ele suja demais o código e não é nem um pouco prático de editar.
Certo, escolha a melhor forma de embutir o CSS no seu documento e prepare isso. Na próxima lição, veremos finalmente como funcionam as propriedades.
(Próxima lição)
0 comentários:
Postar um comentário