Crie a folha de estilo CSS
Da mesma forma que criamos um arquivo de texto separado para o HTML, você criará um arquivo de texto para o CSS. Se você precisar de recursos visuais para este processo, consulte o primeiro tutorial. Aqui estão as etapas para criar sua folha de estilo CSS no Bloco de notas:
- Escolher Arquivo> Novo no bloco de notas para obter uma janela vazia
- Salve o arquivo como CSS clicando em Arquivo
- Navegue até a pasta my_website em seu disco rígido
- Mudar o "Salvar como tipo:" para "Todos os arquivos"
- Nomeie seu arquivo "styles.css"(deixe de fora as aspas) e clique em Salve
Vincule a folha de estilo CSS ao seu HTML
Assim que você tiver um folha de estilos para o seu site, você precisará associá-lo à própria página da web. Para fazer isso, você usa a tag do link. Coloque a seguinte tag de link em qualquer lugar dentro de.
Corrija as margens da página
Quando você está escrevendo XHTML para navegadores diferentes, uma coisa que você aprenderá é que todos parecem ter margens e regras diferentes para a exibição das coisas. A melhor maneira de garantir que seu site tenha a mesma aparência na maioria dos navegadores é não permitir que itens como margens sejam padronizados de acordo com a escolha do navegador.
Preferimos iniciar as páginas no canto superior esquerdo, sem preenchimento ou margem extra ao redor do texto. Mesmo se formos preencher o conteúdo, definimos as margens como zero para começarmos com a mesma folha em branco. Para fazer isso, adicione o seguinte ao seu documento styles.css:
html, body {
margem: 0px;
preenchimento: 0px;
borda: 0px;
esquerda: 0px;
topo: 0px;
}
Mudando a fonte na página
A fonte geralmente é a primeira coisa que você deseja alterar em uma página da web. O padrão fonte em uma página da web pode ser feio e, na verdade, depende do próprio navegador da web, portanto, se você não definir a fonte, não sabe como será a aparência da sua página.
Normalmente, você mudaria a fonte nos parágrafos ou, às vezes, no próprio documento inteiro. Para este site, definiremos a fonte no nível do cabeçalho e do parágrafo. Adicione o seguinte ao seu documento styles.css:
p, li {
fonte: 1em Arial, Helvetica, sans-serif;
}
h1 {
fonte: 2em Arial, Helvetica, sans-serif;
}
h2 {
fonte: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
fonte: 1,25em Arial, Helvetica, sans-serif;
}
Começamos com 1em como o tamanho base para parágrafos e itens de lista e então usamos isso para definir o tamanho dos meus títulos. Não esperamos usar um título mais profundo do que h4, mas se você pretende fazer isso, também deverá estilizá-lo.
Tornando seus links mais interessantes
As cores padrão para links são azul e roxo para links não visitados e visitados, respectivamente. Embora seja padrão, pode não se adequar ao esquema de cores de suas páginas, então vamos alterá-lo. No seu arquivo styles.css, adicione o seguinte:
a: link {
família da fonte: Arial, Helvetica, sans-serif;
cor: # FF9900;
decoração de texto: sublinhado;
}
a: visitou {
cor: # FFCC66;
}
a: hover {
plano de fundo: #FFFFCC;
intensidade da fonte: Negrito;
}
Configuramos três estilos de link, o link a: como padrão, a: visitado para quando for visitado, mudamos a cor e a: hover. Com a: hover, o link obtém uma cor de fundo e entra em negrito para enfatizar que é um link a ser clicado.
Estilizando a seção de navegação
Já que colocamos a seção de navegação (id = "nav") primeiro no HTML, vamos estilizá-la primeiro. Precisamos indicar quão largo deve ser e colocar uma margem mais larga no lado direito para que o texto principal não esbarre nele. nós também colocamos uma borda ao seu redor.
Adicione o seguinte CSS ao seu documento styles.css:
#nav {
largura: 225px;
margem direita: 15px;
borda: meio sólido # 000000;
}
#nav li {
estilo de lista: nenhum;
}
.footer {
tamanho da fonte: .75em;
limpar ambos;
largura: 100%;
alinhamento de texto: centro;
}
A propriedade list-style configura a lista dentro da seção de navegação para não ter marcadores ou números, e o .footer define a seção de direitos autorais para ser menor e centralizada dentro da seção.
Posicionando a seção principal
Ao posicionar sua seção principal com posicionamento absoluto, você pode ter certeza de que ficará exatamente onde deseja que fique em sua página da web. Fizemos 800 pixels de largura para acomodar monitores maiores, mas se você tiver um monitor menor, pode querer torná-lo mais estreito.
Coloque o seguinte no seu documento styles.css:
#a Principal {
largura: 800px;
topo: 0px;
posição: absoluta;
esquerda: 250px;
}
Estilizando Seus Parágrafos
Como já defini a fonte do parágrafo acima, gostaria de dar a cada parágrafo um "impulso" extra para que se destaque melhor. Eu fiz isso colocando uma borda no topo que destacava o parágrafo mais do que apenas a imagem sozinha.
Coloque o seguinte no seu documento styles.css:
.linha superior {
borda superior: sólido espesso # FFCC00;
}
Decidimos fazer isso como uma classe chamada "linha superior", em vez de apenas definir todos os parágrafos dessa maneira. Dessa forma, se decidirmos que queremos um parágrafo sem uma linha amarela superior, podemos simplesmente deixar de fora a classe = "topline" na tag de parágrafo e ela não terá a borda superior.
Estilizando as Imagens
As imagens normalmente têm uma borda ao redor delas, isso nem sempre é visível, a menos que a imagem seja um link, mas gostamos de ter uma classe dentro do Folha de estilo CSS que desliga a borda automaticamente. Para esta folha de estilo, criamos a classe "noborder", e a maioria das imagens no documento faz parte dessa classe.
A outra parte especial dessas imagens é sua localização na página. Queríamos que eles fizessem parte do parágrafo em que estavam, sem usar tabelas para alinhá-los. A maneira mais simples de fazer isso é usar a propriedade float CSS.
Coloque o seguinte no seu documento styles.css:
#main img {
flutuar: esquerda;
margem direita: 5px;
margin-bottom: 15px;
}
.noborder {
borda: 0px nenhum;
}
Como você pode ver, também existem propriedades de margem definidas nas imagens, para garantir que elas não sejam esmagadas contra o texto flutuante que está ao lado delas nos parágrafos.
Agora olhe para sua página concluída
Depois de salvar seu CSS, você pode recarregar a página pets.htm em seu navegador. Sua página deve ser semelhante à mostrada nesta imagem, com as imagens alinhadas e a navegação posicionada corretamente no lado esquerdo da página.
Siga essas mesmas etapas para todas as páginas internas deste site. Você deseja ter uma página para cada página em sua navegação.