Quando você construir um site do zero, é inteligente começar com os estilos básicos definidos. É como começar com uma tela limpa e pincéis novos. Um dos primeiros problemas que os web designers enfrentam é que navegadores da web são todos diferentes. O tamanho da fonte padrão é diferente de plataforma para plataforma, a família de fontes padrão é diferente, alguns navegadores definem margens e preenchimento na tag do corpo, enquanto outros não, e assim por diante. Contorne essas inconsistências definindo os estilos padrão para suas páginas da web.
CSS e o conjunto de caracteres
Em primeiro lugar, defina o conjunto de caracteres de seus documentos CSS para utf-8. Embora seja provável que a maioria das páginas que você projeta sejam escritas em inglês, algumas podem ser localizadas - adaptadas para diferentes contextos linguísticos e culturais. Quando isso acontece, o utf-8 simplifica o processo. Definir o conjunto de caracteres no folha de estilo externa não terá precedência sobre um HTTP cabeçalho, mas em todas as outras situações, ele o fará.
É fácil definir o conjunto de caracteres. Para a primeira linha do documento CSS, escreva:
@charset "utf-8";
Dessa forma, se você usar caracteres internacionais na propriedade do conteúdo ou como nomes de classe e ID, a folha de estilo ainda funcionará corretamente.
Estilo do corpo da página
A próxima coisa que uma folha de estilo padrão precisa são estilos para zere as margens, preenchimento e bordas. Isso garante que todos os navegadores coloquem o conteúdo no mesmo lugar e que não haja nenhum espaço oculto entre o navegador e o conteúdo. Para a maioria das páginas da web, isso é muito próximo da borda para o texto, mas é importante começar aí para que as imagens de fundo e as divisões de layout sejam alinhadas corretamente.
html, body {
margem: 0px;
preenchimento: 0px;
borda: 0px;
}
Defina a cor padrão do primeiro plano ou da fonte como preto e a cor do plano de fundo padrão como branco. Embora isso provavelmente mude para a maioria dos designs de página da web, ter essas cores padrão definidas no corpo e Tag HTML a princípio torna a página mais fácil de ler e trabalhar.
html, body {
cor: # 000;
plano de fundo: #fff;
}
Estilos de fonte padrão
O tamanho da fonte e a família da fonte são algo que inevitavelmente mudará assim que o design for estabelecido, mas começa com um tamanho de fonte padrão de 1 em e um padrão família de fontes de Arial, Genebra ou algum outro fonte sans-serif. O uso do ems mantém a página o mais acessível possível e uma fonte sans-serif fica mais legível na tela.
html, corpo, p, th, td, li, dd, dt {
fonte: 1em Arial, Helvetica, sans-serif;
}
Pode haver outros lugares onde você pode encontrar texto, mas p, º, td, li, dd, e dt são um bom começo para definir a fonte base. Incluir HTML e corpo apenas no caso, mas muitos navegadores substituem o escolhas de fonte se você definir suas fontes apenas para o HTML ou corpo.
Manchetes
Cabeçalhos HTML são importantes para ajudar a delinear seu site e permitir que os mecanismos de pesquisa se aprofundem nele. Sem estilos, eles são bastante feios, então defina estilos padrão em todos eles e defina a família de fontes e os tamanhos de fonte para cada um.
h1, h2, h3, h4, h5, h6 {
família da fonte: Arial, Helvetica, sans-serif;
}
h1 {tamanho da fonte: 2em; }
h2 {tamanho da fonte: 1,5em; }
h3 {tamanho da fonte: 1,2em; }
h4 {tamanho da fonte: 1.0em; }
h5 {tamanho da fonte: 0,9em; }
h6 {tamanho da fonte: 0,8em; }
Não se esqueça dos links
Definir o estilo das cores dos links é quase sempre uma parte crítica do design, mas se você não defini-los nos estilos padrão, é provável que esqueça pelo menos uma das pseudo classes. Defina-os com uma pequena variação em azul e, em seguida, altere-os quando tiver a paleta de cores para o local definida.
Para definir o links em tons de azul, defina:
- links tão azul
- links visitados tão azul escuro
- hover links como azul claro
- links ativos ainda mais azul pálido
Conforme mostrado neste exemplo:
a: link {cor: # 00f; }
a: visitou {cor: # 009; }
a: pairar {cor: # 06f; }
a: ativo {cor: # 0cf; }
Ao estilizar os links com um esquema de cores bastante inócuo, ele garante que você não se esqueça de nenhuma das classes e também os torna um pouco menos barulhentos do que o azul, vermelho e roxo padrão.
Folha de estilo completa
Aqui está a folha de estilo completa:
@charset "utf-8";
html, body {
margem: 0px;
preenchimento: 0px;
borda: 0px;
cor: # 000;
plano de fundo: #fff;
}
html, corpo, p, th, td, li, dd, dt {
fonte: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
família da fonte: Arial, Helvetica, sans-serif;
}
h1 {tamanho da fonte: 2em; }
h2 {tamanho da fonte: 1,5em; }
h3 {tamanho da fonte: 1,2em; }
h4 {tamanho da fonte: 1.0em; }
h5 {tamanho da fonte: 0,9em; }
h6 {tamanho da fonte: 0,8em; }
a: link {cor: # 00f; }
a: visitou {cor: # 009; }
a: pairar {cor: # 06f; }
a: ativo {cor: # 0cf; }