Lembre sempre de Iniciar o comando e Finaliza-lo, assim não correrá o risco de cometer algum erro durante a programação.
Antes de começarmos monte a Estrutura do HTML no Bloco de Notas
Esse não é o único comando utilizado para trabalhar com o layout da pagina em CSS, a muitos outros que também tem a mesma finalidade, mas utilizaremos este pois é fácil e simples de se Trabalhar e Entender.
O comando DIV separa e organiza cada parte do seu site, como o Cabeçalho ( Se localiza na Parte superior da pagina ), Colunas, etc. No exemplo acima estamos criando o Cabeçalho da Pagina onde formataremos em CSS.
Após salve e abra sua pagina
Perceba que não há diferença alguma, o que vemos aqui é o resultado do comando <H1>.
Não vemos a diferença pois falta a Formatação do Cabeçalho, Inicie o Comando <STYLE> Dentro do comando <HEAD> para começarmos a Formatação do cabeçalho.
Dentro do comando <STYLE> iremos formatar o cabeçalho do site.
Como na Aula passada nos iremos definir o comando a ser formatado, após abrir e fechar chaves, como no exemplo abaixo.
Lembre-se que os próximos comando usados para formatar o cabeçalho serão inseridos dentro das chaves.
vamos começar com um comando novo usado para inserir a Cor de Fundo, esse comando chama-se BACKGROUND
Lembre-se que se inicio acrescente os cores em Inglês para facilitar
Após iremos definir a largura do Cabeçalho usando o comando PADDING
O comando PADDING é usado para definir a largura do Cabeçalho, não se esqueça de acrescentar o PX após o numero.
Agora iremos começar a formatar a letra, para trabalhar com o texto você só precisa utilizar os mesmo comando da aula passada.
Por exemplo:
Definir a cor da letra usando o comando COLOR
Definir o Tamanho da letra usando o comando FONT-SIZE
Definir o Tipo da letra usando o comando FONT-FAMILY
Use programas com Word, Excel, PowerPoint ou programas semelhantes onde apareça o nome de cada tipo da letra, a Font acima foi escolhida usando o Microsoft Word.
Definir o Alinhamento do texto usando o comando TEXT-ALIGN
Após formatar o cabeçalho da Pagina, Dentro do comando <BODY> acrescente como no exemplo a baixo
Após dentro do comando <HEAD>, a baixo da formatação do comando HEADER
Acrescente como no exemplo abaixo
Agora os próximos comando de formatação serão Inseridos dentro das chaves
Defina a cor de fundo da coluna, após defina a Altura da Coluna usando o comando HEIGHT como no exemplo a baixo
Após defina a Largura da coluna usando o comando WIDTH
Após defina a Posição da coluna usando o comando FLOAT
Lembre-se que terá que digitar em inglês, neste caso se a coluna fica a Esquerda, no Centro ou a Direita (Left, Center ou Right )
Após mude a Cor da Letra, o Tamanho e o Tipo da Letra
Nenhum comentário:
Postar um comentário