Como criar um arquivo css mestre

Muitos designers criar a sua própria versão de um arquivo mestre CSS de códigos HTML, que depois se adaptam às necessidades de cada site individual, para ajudar a acelerar o processo de construção de um site a partir do zero.

Video: Dreamweaver cs6 - 006 - criando arquivo css 3

Como você construir mais e mais sites, alguns estilos vai se tornar uma parte regular de sua concepção prática padrão. Por exemplo, você pode sempre querem definir suas margens da página a 0, especificar uma cor de fundo da página, escolha uma fonte padrão para todos os textos, criar redefinir estilos de parágrafos e cabeçalhos, especifique os atributos de estilo, pelo menos, dois (link e visitou) hyperlink estados, e fazer um estilo de marcador personalizado.

Use esse arquivo para testar os estilos para o seu CSS como você criar o mestre css Arquivo. O arquivo de exemplo HTML inclui o texto do parágrafo, a rubrica 1, a rubrica 2, uma lista não ordenada, e um par de hyperlinks funcionamento.

Para criar seu próprio arquivo mestre CSS, siga estes passos:

1. Crie um novo documento em branco, sem qualquer codificação HTML, e guardá-lo com o nome do arquivo master.css.

   Salve este arquivo CSS no mesmo local em seu computador como o seu sample.html Arquivo.

2. Dentro de área de sua sample.html arquivo, adicione um link para o novo externo css arquivo que inclui o tipo de mídia definido para todos:

   Este link informa ao sample.html arquivo para usar as definições de estilo na CSS externa ligada.

3. Dentro de master.css arquivo, criar um estilo Tag redefine para o tag que define o superior, esquerda, inferior e direita da página margens para 0px- o preenchimento em todos os quatro lados da página para 10px- e o fundo a uma luz de cor laranja peachy com o valor hexadecimal # fc3bb6.

   Seu código de estilo deve ficar assim:

   body {margin: 0px; padding: 10px; background-color: # fc3bb6-}

   Quando todos os quatro lados de um objecto utilizar o mesmo valor, como com o espaçamento margem e preenchimento mostrado aqui, o valor deve ser especificado no CSS apenas uma vez. No entanto, quando o valor é diferente em um ou mais lados, você deve especificar valores para cada um dos lados:

   body {margin: 10px 10px 0px 0px; padding: 20px 0px 0px 20px; background-color: # fc3bb6-}

4. Criar um estilo redefine tag no seu arquivo CSS para a

   , , e etiquetas especificando o tipo de letra, tamanho da fonte e cor da fonte para cada um.

   Use qualquer fonte, tamanho, peso e cor que você gosta, pois você pode personalizar os valores mais tarde para combinar com qualquer projeto específico. Aqui está um exemplo do código que você pode usar:

   
   
   
   

   p {font-family: Georgia, "Times New Roman", Times, serif-font-size: 12px; color: # 000000-} h1 {font-family: Arial, Helvetica, sans-serif-font-size: 36px; font-weight: bold-color: # 000066-} h2font-family: Arial, Helvetica, sans-serif-font-size: 24px; font-weight: bold-color: # 000066-}

5. Para alterar o estilo hyperlink padrão, você pode criar estilos de elementos pseudo-classe para cada um dos quatro estados de hiperlink.

   Você pode especificar qualquer atributo que você gosta para cada um dos quatro estados, de alterar a fonte ou a fonte peso, para modificar a cor do texto ou cor de fundo, para alterar a decoração de texto padrão.

   Aqui está um exemplo do código que você pode usar para os quatro estados do link:

   a: link {font-weight: bold-text-decoration: underline-color: # 0099cc-} a: visited {font-weight: bold-text-decoration: underline-color: # 990000-} a: hover {Fonte- weight: normal text-decoration: none; color: # ffffff-background: # ff9933-} a: active {font-weight: normal text-decoration: none; color: # ffffff-background: # cc0000-}

6. Para estilizar a lista não ordenada, você pode redefinir o

7. marcar ou criar um estilo de classe que pode ser aplicado seletivamente a qualquer
8. tag com o classe atributo. Se desejar, especifique uma imagem para substituir as balas padrão.

   A definição de estilo parece o mesmo se você redefinir o

9. tag ou criar seu próprio estilo-classe personalizada apenas o selector está escrito de forma diferente, como quer li ou talvez como .bala.

   Seu código para a bala li estilo redefine tag poderia ser algo como isto:

   li {list-style-position: fora-list-style-image: url (images / bullet.jpg) -font-family: Arial, Helvetica, sans-serif-font-size: 12px;}

10. Salve seus arquivos HTML e CSS e lançar seu arquivo HTML em uma janela do navegador.

    Para visualizar a página em um navegador, você pode dar um duplo-clique no arquivo HTML ou arraste e solte o ícone do arquivo em qualquer janela do navegador aberta.

    O arquivo deve exibir com todo o estilo atributos que você acabou de criar no seu arquivo CSS mestre. Se ele não parece muito certo ou se determinados elementos não são exibidos corretamente, reabrir os arquivos e verificar a exatidão de todo o seu código, corrigir os erros que você encontrar, e reteste. Certifique-se de que você tenha lembrado para adicionar o período (.) Antes de todos os seus nomes de classe personalizados e um símbolo de número (#) Antes de todos os seus valores de cor hexadecimais.

    

11. Teste seus novos estilos de hiperlink na janela do navegador por

Video: HTML e CSS passo a passo | curso rápido

1. Passar o mouse sobre um link para ver o estilo hover.

2. Clicando e segurando o mouse sobre um link para ver o estilo ativo.

3. Clicar em um link e retornando à sua página de exemplo clicando no botão Voltar do navegador para ver como o link muda do normal para o estado link visitado.

Agora que você tem o seu primeiro arquivo mestre CSS, em vez de reinventar a roda cada vez que você iniciar um novo projeto web, você pode usar esse arquivo como o ponto de partida. Claro que, para alguns projetos, a construção da CSS a partir do zero pode ser mais fácil ou mais prático, mas se ter um arquivo mestre CSS você economiza tempo, por todos os meios usá-lo como uma técnica de design.