1. Use abreviações CSS
O uso de abreviações pode ajudar a reduzir o tamanho dos seus arquivos CSS e torná-los mais fáceis de ler. Para as principais regras de abreviação CSS, consulte "Resumo de sintaxe de abreviação CSS comum", que não será descrito aqui.
2. Defina a unidade claramente, a menos que o valor seja 0
Esquecer de definir as unidades de uma dimensão é um erro comum entre iniciantes em CSS. Em HTML você pode simplesmente escrever largura=100, mas em CSS você tem que fornecer uma unidade exata, por exemplo: largura: 100px largura:100em. Existem apenas duas exceções para não definir unidades: altura da linha e valor 0. Além disso, outros valores devem seguir a unidade. Cuidado para não adicionar espaços entre o valor e a unidade.
3. Sensibilidade a maiúsculas e minúsculas
Ao usar CSS em XHTML, os nomes dos elementos definidos em CSS diferenciam maiúsculas de minúsculas. Para evitar esse erro, recomendo usar letras minúsculas para todos os nomes de definições. Os valores de classe e id também diferenciam maiúsculas de minúsculas em HTML e XHTML. Se você precisar escrever letras maiúsculas e minúsculas, confirme cuidadosamente se sua definição em CSS é consistente com as tags em XHTML.
4. Cancele as restrições do elemento antes da classe e do id
Ao escrever para definir uma classe ou ID para um elemento, você pode omitir a qualificação anterior do elemento, porque o ID é exclusivo em uma página e a classe pode ser usada várias vezes na página. Não faz sentido qualificar um elemento. Por exemplo:
div#content { /* declarações */ }
fieldset.details { /* declarações */ } |
pode ser escrito como
#content { /* declarações */ }
.details { /* declarações */ } |
Isso economiza alguns bytes.
5. Valor padrão
Normalmente, o valor padrão do preenchimento é 0 e o valor padrão da cor de fundo é transparente. Mas o valor padrão pode ser diferente em navegadores diferentes. Se você tem medo de conflitos, você pode definir os valores de margem e preenchimento de todos os elementos como 0 no início da folha de estilo, assim:
* {
margem:0;
preenchimento:0;
} |
6. Não há necessidade de definir repetidamente valores herdáveis
Em CSS, os elementos filhos herdam automaticamente os valores dos atributos do elemento pai, como cor, fonte, etc., que foram definidos no elemento pai, e podem ser herdados diretamente no elemento filho sem definição repetida. Mas esteja ciente de que o navegador pode substituir sua definição por alguns valores padrão.
7. Primeiro princípio recente
Se houver múltiplas definições do mesmo elemento, a definição mais próxima (nível mínimo) terá prioridade. Por exemplo, existe este trecho de código.
Atualização: conjunto Lorem ipsum dolor
No arquivo CSS, você definiu o elemento p e uma atualização de classe
p {
margem:1em 0;
tamanho da fonte: 1em;
cor:#333;
}
.atualizar {
peso da fonte: negrito;
cor:#600;
} |
Destas duas definições, class=update será usada porque class está mais próxima que p. Você pode conferir "Calculando a especificidade de um seletor" do W3C para saber mais.
8. Múltiplas definições de classe
Uma tag pode definir várias classes ao mesmo tempo. Por exemplo: Primeiro definimos dois estilos, o primeiro estilo tem um fundo de #666 e o segundo estilo tem uma borda de 10 px;
.one{largura:200px;fundo:#666;}
.dois{borda:10px sólido #F00;}
No código da página, podemos chamá-lo assim. O efeito de exibição final é que esta div tem um fundo #666 e uma borda de 10px. Sim, é possível fazer isso, você pode tentar.
9. Use seletores descendentes
Os iniciantes em CSS não sabem que o uso de subseletores é um dos motivos que afeta sua eficiência. Os subseletores podem ajudá-lo a salvar muitas definições de classe. Vamos dar uma olhada no seguinte código:
〈div id = subnavegador〉
〈ul〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉Item 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 Item 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 Item 1〈/a〉 〈/li〉
〈/ul〉
〈/div〉 |
A definição CSS para este código é:
div#subnav ul { /* Alguns estilos */ }
div#subnav ul li.subnavitem { /* Alguns estilos */ }
div#subnav ul li.subnavitem a.subnavitem { /* Alguns estilos */ }
div#subnav ul li.subnavitemselected { /* Alguns estilos */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Alguns estilos */ } |
Você pode substituir o código acima pelo seguinte método
〈ul id=subnav〉
〈li〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈/ul〉 |
A definição de estilo é:
#subnav { /* Alguns estilos */ }
#subnav li { /* Alguns estilos */ }
#subnav a { /* Alguns estilos */ }
#subnav .sel { /* Alguns estilos */ }
#subnav .sel a { /* Alguns estilos */ } |
Use subseletores para tornar seu código e CSS mais concisos e fáceis de ler.
10. Não há necessidade de adicionar aspas ao caminho da imagem de fundo. Para economizar bytes, recomendo não adicionar aspas ao caminho da imagem de fundo, pois as aspas não são necessárias. Por exemplo:
| background:url(images/***.gif) #333; |
pode ser escrito como
| background:url(images/***.gif) #333; |
Se você adicionar aspas, isso causará alguns erros no navegador.
11. Seletores de grupo
Quando alguns tipos de elementos, classes ou IDs têm algumas propriedades em comum, você pode usar seletores de grupo para evitar definições repetidas várias vezes. Isso pode economizar alguns bytes.
Por exemplo: para definir a fonte, cor e margem de todos os títulos, você pode escrever:
h1,h2,h3,h4,h5,h6 {
família de fontes: Lucida Grande, Lucida, Arial, Helvetica, sans-serif;
cor:#333;
margem:1em 0;
} |
Se houver elementos individuais que precisem definir estilos independentes durante o uso, você poderá adicionar novas definições ou substituir definições antigas, por exemplo:
h1 { tamanho da fonte: 2em }
h2 { tamanho da fonte: 1,6em } |
12. Especifique os estilos de link na ordem correta
Ao usar CSS para definir vários estilos de estado de um link, preste atenção na ordem em que eles são escritos. A ordem correta é: :link :visited :hover :active. A primeira letra extraída é LVHA, que você pode lembrar como LoVe HAte (gosto de odiar). Por que é tão definido? Você pode consultar a "Especificidade do link" de Eric Meyer.
Se seus usuários precisarem usar o controle do teclado e saber o foco do link atual, você também pode definir o atributo :focus. O efeito do atributo :focus também depende da posição onde você escreve. Se você deseja que o elemento em foco exiba o efeito :hover, você escreve :focus antes de :hover; você coloca :focus Depois de :hover.
13. Flutuador claro
Um problema CSS muito comum é que quando flutuante é usado para posicionamento, a camada subjacente é coberta pela camada flutuante ou as subcamadas aninhadas na camada excedem o escopo da camada externa.
A solução usual é adicionar um elemento extra atrás da camada flutuante, como um div ou um br, e definir seu estilo como claro: ambos. Este método é um pouco rebuscado, mas felizmente existe uma boa maneira de resolvê-lo. Consulte este artigo "Como limpar flutuadores sem marcação estrutural" (Observação: este site traduzirá este artigo o mais rápido possível).
Os dois métodos acima podem resolver muito bem o problema de estouro flutuante, mas e se você realmente precisar limpar a camada ou os objetos na camada? Um método simples é usar o atributo overflow. Este método foi publicado originalmente em "Simple Clearing of Floats" e foi amplamente discutido em "Clearance" e "Super simple clearing floats".
Qual dos métodos claros acima é mais adequado para você depende da situação específica e não será discutido aqui. Além disso, alguns artigos excelentes deixaram bem claro sobre a aplicação do float. É recomendado que você leia: "Floatutorial", "Containing Floats" e "Float Layouts".
14. Centralização horizontal
Este é um truque simples, mas vale a pena repetir porque vejo muitas perguntas de novatos perguntando o seguinte: Como centralizar CSS horizontalmente? Você precisa definir a largura do elemento, e definir a margem horizontal, caso seu layout esteja contido em uma camada (contêiner), assim:
indefinido
Você pode defini-lo para ser centralizado horizontalmente assim:
#enrolar {
width:760px /* Mude para a largura da sua camada*/
margem:0 automático;
} |
Mas o IE5/Win não consegue exibir esta definição corretamente. Usamos um truque muito útil para resolver isso: use o atributo text-align. Assim:
corpo {
alinhamento de texto:centro;
}
#enrolar {
width:760px /* Mude para a largura da sua camada*/
margem:0 automático;
alinhamento de texto: esquerda;
} |
A primeira regra text-align:center; do primeiro corpo define que todos os elementos do corpo no IE5/Win são centralizados (outros navegadores apenas centralizam o texto), e a segunda regra text-align:left é centralizar o texto em #warp para a esquerda.
15. Importe e oculte CSS
Como os navegadores mais antigos não suportam CSS, uma abordagem comum é usar a técnica @import para ocultar CSS. Por exemplo:
No entanto, esse método não funcionou no IE4, o que me deu dor de cabeça por um tempo. Mais tarde escrevi assim:
Desta forma, o CSS pode ficar oculto no IE4 Haha, também economiza 5 bytes. Se você quiser saber a explicação detalhada da sintaxe @import, você pode ver aqui "gráfico de filtro CSS do centricle"
16. Otimização para IE
Às vezes, você precisa definir algumas regras especiais para bugs do navegador IE. Existem muitos hacks de CSS aqui. Eu uso apenas dois deles, independentemente de a Microsoft ser melhor na próxima versão beta do IE7. o mais seguro.
1. Método de anotação
(a) Para ocultar uma definição CSS no IE, você pode usar um seletor filho:
html>corpo p {
/* Conteúdo da definição */
} |
(b) O seguinte método de escrita só pode ser entendido pelo navegador IE (oculto de outros navegadores)
*htmlp{
/* declarações */
} |
(c) Às vezes, você deseja que o IE/Win esteja ativo, mas o IE/Mac esteja oculto, você pode usar o truque da barra invertida:
/* */
*htmlp{
declarações
}
/* */ |
2. Método de comentários condicionais
Outro método, que considero mais testado pelo tempo do que CSS Hacks, é usar os comentários condicionais de atributos privados da Microsoft (comentários condicionais). Usando este método você pode definir alguns estilos separadamente para o IE sem afetar a definição da folha de estilos principal. Assim:
indefinido
17. Habilidades de depuração: Qual é o tamanho da camada?
Ao depurar erros de CSS, você deve ser como uma máquina de escrever e analisar o código CSS linha por linha. Normalmente defino uma cor de fundo na camada em questão para que fique óbvio quanto espaço a camada ocupa. Algumas pessoas sugerem o uso de borda, o que geralmente é possível, mas o problema é que às vezes a borda aumentará o tamanho dos elementos, e a borda superior e inferior destruirão o valor da margem vertical, por isso é mais seguro usar o fundo.
Outra propriedade que muitas vezes causa problemas é o contorno. O contorno parece boeder, mas não afeta o tamanho ou a posição do elemento. Apenas alguns navegadores suportam o atributo de estrutura de tópicos, os únicos que conheço são Safari, OmniWeb e Opera.
18. Estilo de escrita de código CSS
Ao escrever código CSS, cada um tem seus próprios hábitos de escrita em relação a recuos, quebras de linha e espaços. Após prática constante, decidi adotar o seguinte estilo de escrita:
seletor1,
seletor2 {
propriedade:valor;
} |
Ao usar definições de união, geralmente escrevo cada seletor em sua própria linha para que sejam mais fáceis de encontrar no arquivo CSS. Adicione um espaço entre o último seletor e as chaves {. Escreva também cada definição em sua própria linha. O ponto e vírgula deve ser colocado diretamente após o valor do atributo.
Estou acostumado a adicionar ponto e vírgula após cada valor de atributo Embora as regras permitam que o ponto e vírgula não precise ser escrito após o último valor do atributo, se você quiser adicionar um novo estilo, é fácil esquecer de adicionar o ponto e vírgula e. causar um erro, então você ainda o adiciona Melhor.
Finalmente, a chave de fechamento } é escrita sozinha em uma linha, com espaços e novas linhas para facilitar a leitura.
