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, como: largura:100px largura:100em. Existem apenas duas exceções onde as unidades não podem ser definidas: 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. Diferencia maiúsculas de 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 pode ser usado várias vezes na página. Não faz sentido qualificar um elemento. Por exemplo:
div#conteúdo { }
fieldset.detalhes { }
pode ser escrito como
#contente { }
.detalhes { }
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 estilos, 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 chamar assim
O efeito de exibição final é que esta div tem um plano de 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:
A definição CSS para este código é:
div#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
Você pode substituir o código acima pelo seguinte método
A definição de estilo é:
#subnav { }
#subnavli { }
#subnav a { }
#subnav.sel { }
#subnav.sel a { }
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 citar o caminho da imagem de fundo, pois as aspas não são necessárias. Por exemplo:
plano de fundo:url(imagens
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 {
largura:760px;
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:
@importar url(main.css);
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:
@importar main.css;
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 {
}
(b) O seguinte método de escrita só pode ser entendido pelo navegador IE (oculto de outros navegadores)
*htmlp{
}
(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.
17. Dicas de depuração: Qual o tamanho das camadas?
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.
Espaços e quebras de linha auxiliam na leitura.
