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 a unidade do tamanho é um erro comum entre novatos em CSS. Em HTML você pode simplesmente escrever width="100", mas em CSS você tem que fornecer uma unidade exata, como: width:100px width: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 a qualificação do elemento antes de class e id
. Ao escrever para definir class ou id para um elemento, você pode omitir a qualificação do elemento anterior, porque ID é exclusivo em uma página e class s pode ser usado 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, pode ser herdado diretamente no elemento filho e não precisa ser repetido. Mas esteja ciente de que o navegador pode substituir sua definição por alguns valores padrão.
7. O princípio do mais próximo primeiro
Se houver múltiplas definições do mesmo elemento, a definição mais próxima (nível mínimo) terá precedência. Por exemplo, existe este trecho de código Atualização: Lorem ipsum dolor set.
No arquivo CSS, você definiu o elemento p e uma classe "update"
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
Um rótulo pode definir múltiplas 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 <div class="one two"></div> 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 usar seletores descendentes é 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="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> 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("imagens/***.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 (seletores de grupo)
Quando alguns tipos de elementos, classes ou ids possuem alguns atributos em comum, você pode usar seletores de grupo para evitar múltiplas definições repetidas. 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” (goste ou odeie). 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. Flutuadores claros.
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 (centering)
Esta é uma técnica simples, mas vale a pena repetir, pois 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:
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:
@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 muitas técnicas CSS (hacks) aqui, eu só uso duas delas. na versão beta do IE7, ambos os métodos são os mais seguros.
1. Método de anotação (a) oculta 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 testável do que CSS Hacks, é usar 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:
<!--[se IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
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 para recuo, 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.