Neste artigo
Quando você constrói 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 os navegadores 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ê cria 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 na folha de estilo externa não terá precedência sobre um cabeçalho HTTP, mas em todas as outras situações terá. É 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 zerar 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 na tag HTML 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 uma família de fonte padrão de Arial, Geneva ou alguma outra fonte sem serifa. 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;
}
class = “ql-syntax”> 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 sobrescrevem as escolhas de fonte se você apenas definir suas fontes para o HTML ou corpo.
Manchetes
É importante usar cabeçalhos HTML para ajudar a delinear seu site e permitir que os mecanismos de pesquisa se aprofundem nele. Sem estilos, eles são todos 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 os definir 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 os 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 {color: # 00f; }
a: visitou {cor: # 009; }
a: pairar {cor: # 06f; }
a: ativo {cor: # 0cf; }
class = “ql-syntax”> Ao estilizar os links com um esquema de cores bastante inócuo, isso garante que você não se esqueça de nenhuma das classes e também as torna um pouco menos barulhentas 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; }
