CSS é a forma atual de layout de página da web e também é o conteúdo principal apresentado a você por 52CSS.com. Como o CSS é amplamente usado em quase todos os sites, vamos dedicar algum tempo para criar uma folha de estilo e garantir que ela atenda. bons padrões. As dicas a seguir ajudarão muito os iniciantes em CSS durante o processo de desenvolvimento. Você pode aprender sobre as dez habilidades que os iniciantes em DivCSS devem conhecer e sua compreensão dos padrões da Web.
1. Índice As definições aqui ajudarão você e outros desenvolvedores a entender sites e arquivos CSS. Elas também ajudarão você a entender o que há em arquivos CSS. A seção de índice contém um parágrafo de comentário CSS formatado.
1. Forneça ao autor as informações do arquivo CSS 2. Defina o design do site (número de colunas, estático/dinâmico) [colunas, estático/líquido]
3. Rastreie continuamente as versões do arquivo (muito útil quando o arquivo tem vários autores ou precisa ser atualizado no futuro)
2. Ponto de ancoragem As âncoras são como marcadores dentro do mesmo arquivo CSS. As âncoras permitem que você visualize todo o arquivo CSS com clareza e o mantenha organizado.
As âncoras precisam ser definidas no índice do CSS (mencionado acima), e como o CSS não possui sistema de âncoras próprio, usei um truque simples para definir as âncoras no documento.
O método consiste em usar um caractere relativamente raro para definir o comentário. Quando você deseja encontrar um ponto de ancoragem, você pode copiar e pesquisar o definidor do ponto de ancoragem no índice e encontrar o ponto de ancoragem.
3. Redefinição A redefinição é um método usado para substituir os estilos de tag padrão do HTML e redefini-los. Você já viu um código CSS como este, ele só quer estilizar aquele elemento específico!
Um uso muito bonito em CSS são os seletores contextuais, vamos usar:
4. Regras de nomenclatura Um fator chave é dar aos elementos nomes precisos e limpos. Isso evitará confusão e tornará mais fácil e rápida a leitura do seu CSS.
5. Abreviatura O recurso de abreviação em CSS é uma propriedade que permite combinar muitas propriedades do mesmo tipo em uma.
As abreviações CSS facilitam o processo de desenvolvimento e mantêm seus arquivos CSS limpos, curtos e legíveis.
6. Sprites Traduzi-lo para elf não parece aprofundar a compreensão perceptiva do artigo. Pelo contrário, quando o li em inglês, não o entendi, então simplesmente não o traduzi. Combinar todas as imagens de fundo em uma e usar o posicionamento de fundo para exibir diferentes partes é o que chamamos de CSS Sprites.
CSS Sprites podem reduzir o número de solicitações HTTP, economizar largura de banda e tornar a leitura mais rápida. Ao mesmo tempo, também pode evitar a instabilidade da imagem (por exemplo, quando o mouse passa sobre uma imagem, o efeito de outra imagem pode ser exibido, e a última imagem esperará meio dia em uma conexão lenta à Internet para aparecer) .
O melhor e mais popular exemplo de CSS Sprites é o sistema de menu do site da Apple:
7. Esclarecimento A explicitação do seletor é o processo de priorizar qual deles usar quando várias regras podem ser usadas para o mesmo elemento.
Simplificando, todo seletor CSS tem um peso. A soma de todos os pesos de um seletor determina suas propriedades no documento. A clareza pode ser de grande ajuda quando o documento CSS é tão grande que você não sabe qual elemento tem maior peso.
Bem, clareza é uma área tão grande em CSS que é difícil explicar em apenas algumas frases.
8. Redefinição de atributos As redefinições globais de propriedades garantem que um site apareça de forma quase idêntica em todos os navegadores. Em cada caso, navegadores diferentes usam seu próprio conjunto de configurações de estilo padrão para todos os sites, o que fará com que nosso site apareça de forma diferente em navegadores diferentes. Uma redefinição global de propriedades corrigirá esta situação e permitirá que você construa seu site a partir de uma base absolutamente consistente.
Nem sempre recomendo o uso de estruturas CSS, mas você ainda precisa usar a redefinição de CSS. Existem muitos métodos de redefinição diferentes, variando do simples ao complexo.
9. Hacks de CSS Mesmo que seja um CSS perfeito, ele não pode produzir exatamente a mesma exibição em todos os navegadores. Cada navegador possui uma maneira diferente de interpretar o CSS. Resumindo, se você precisa que seu site seja consistente em todos os navegadores, você deve usar CSS Hacks.
Usar CSS Hacks reduzirá erros ao validar CSS, eu concordo. Uma maneira alternativa de conseguir isso é usar um único arquivo CSS diferente para cada navegador e informar ao navegador qual CSS específico deve ser usado, incluindo tags específicas do navegador no HTML. Eu sempre crio um "fuck-ie.css" em todos os meus projetos :) (Nota do tradutor: O autor aqui usa palavrões para expressar sua raiva em relação ao IE. Se traduzido como "acasalamento com o IE.css", o mundo não iria não será mais harmonioso?)
Após usar este método, seu "arquivo CSS principal" será verificado. Ao mesmo tempo, o arquivo "fuck-ie.css" também será verificado, mas apenas substituirá o "arquivo CSS principal" no navegador IE.
10. Verificação É sempre importante validar seu CSS ao criá-lo. Isso garantirá que seu CSS esteja livre de erros e possa ser interpretado corretamente por todos os navegadores.
W3C Validator é uma ferramenta online de validação de CSS muito popular.
