Crie a folha de estilos 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ê precisa de recursos visuais para este processo, por favor veja o primeiro tutorial. Aqui estão os passos para criar sua folha de estilos CSS no Bloco de Notas:
- Escolha Arquivo> Novo no bloco de notas para obter uma janela vazia
- Salve o arquivo como CSS clicando em Arquivo <Salvar como …
- Navegue até a pasta my_website no seu disco rígido
- Alterar o "Salvar como tipo:" para "Todos os arquivos"
- Nomeie seu arquivo "styles.css" (deixe as aspas) e clique em Salvar
Vincule a folha de estilo CSS ao seu HTML
Uma vez que você tenha uma folha de estilos para o seu site, você precisará associá-la à própria página da Web. Para fazer isso, você usa a tag de link. Coloque a seguinte tag de link em qualquer lugar dentro do
tags do seu documento pets.htm:
03 de 10 Quando você está escrevendo XHTML para diferentes navegadores, uma coisa que você aprenderá é que todos eles parecem ter margens e regras diferentes para exibir as coisas. A melhor maneira de ter certeza de que seu site é o mesmo na maioria dos navegadores é não permitir que itens como margens sejam padronizados para a opção do navegador. Eu prefiro começar minhas páginas no canto superior esquerdo, sem preenchimento ou margem extra ao redor do texto. Mesmo se eu estiver indo para preencher o conteúdo, eu defino as margens para zero, então eu estou começando com o mesmo slate em branco. Para fazer isso, adicione o seguinte ao seu documento styles.css: A fonte geralmente é a primeira coisa que você deseja alterar em uma página da Web. A fonte padrão em uma página da Web pode ser feia, e na verdade é o próprio navegador da Web, por isso, se você não definir a fonte, você realmente não saberá como será sua página. Normalmente, você alteraria a fonte em parágrafos ou, às vezes, no próprio documento inteiro. Para este site, definiremos a fonte no cabeçalho e no nível do parágrafo. Adicione o seguinte ao seu documento styles.css: Comecei com o 1em como o tamanho da minha base para parágrafos e itens de lista, e depois usei isso para definir o tamanho dos meus títulos. Eu não espero usar uma manchete mais profunda que a h4, mas se você planeja, vai querer estilizá-la também. As cores padrão dos links são azul e roxo para os links não visitados e visitados, respectivamente. Enquanto isso é padrão, pode não se encaixar no esquema de cores de suas páginas, então vamos alterá-lo. No seu arquivo styles.css, adicione o seguinte: Eu configurei três estilos de link, o link a: como padrão, a: visitado para quando foi visitado, mudo a cor e a: hover. Com um: hover eu tenho o link obter uma cor de fundo e ir em negrito para enfatizar que é um link para ser clicado. Como colocamos a seção de navegação (id = "nav") primeiro no HTML, vamos defini-la primeiro. Precisamos indicar o quão amplo deve ser e colocar uma margem mais ampla no lado direito, para que o texto principal não seja afetado. Eu também coloquei uma borda em volta dela. Adicione o seguinte CSS ao seu documento styles.css: A propriedade de estilo de lista configura a lista dentro da seção de navegação para não ter marcadores ou números, e os estilos de rodapé da seção de direitos autorais são menores e centralizados na seção. Ao posicionar sua seção principal com posicionamento absoluto, você pode ter certeza de que ela permanecerá exatamente onde você deseja que ela permaneça na sua página da Web. Eu fiz o meu 800px de largura para acomodar monitores maiores, mas se você tiver um monitor menor, você pode querer fazer isso mais estreito. Coloque o seguinte no seu documento styles.css: Desde que eu já defini a fonte do parágrafo acima, eu queria dar a cada parágrafo um "chute" extra para fazer com que ele se destacasse 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: Eu decidi fazer isso como uma classe chamada "topline", em vez de apenas definir todos os parágrafos dessa maneira. Dessa forma, se eu decidir que quero ter um parágrafo sem uma linha amarela superior, posso simplesmente deixar a classe "topline" na tag de parágrafo e ela não terá a borda superior. As imagens geralmente têm uma borda ao redor delas, isso nem sempre é visível a menos que a imagem seja um link, mas eu gosto de ter uma classe dentro da minha folha de estilo CSS que desativa a borda automaticamente.Para essa folha de estilo, criei 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. Eu queria 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 CSS float. Coloque o seguinte no seu documento styles.css: Como você pode ver, há também propriedades de margem definidas nas imagens, para garantir que elas não sejam quebradas com o texto flutuante que está ao lado delas nos parágrafos. Depois de salvar seu CSS, você poderá recarregar a página pets.htm no navegador da Web. Sua página deve ser semelhante à mostrada nesta foto, com imagens alinhadas e a navegação posicionada corretamente no lado esquerdo da página. Siga estes mesmos passos para todas as suas páginas internas para este site. Você quer ter uma página para cada página na sua navegação. Corrigir as margens da página
Mudando a fonte na página
Tornando seus links mais interessantes
Estilizando a seção de navegação
Posicionando a seção principal
Estilizando seus parágrafos
Styling the Images
Agora olhe para sua página completa
