1. Fazer bom uso de abreviações CSS pode reduzir o tamanho do arquivo da página, aumentar a velocidade de download e tornar o código conciso e legível.
como:
div{
borda superior: 1px sólido #cccccc;
borda esquerda: 1px sólido #cccccc;
borda direita: 1px soli #cccccc;
borda inferior: 1px sólido #cccccc;
}
pode ser escrito como
p{border:1px solid #cccccc}
Outro exemplo:
div{
margem superior: 10px;
margem direita: 20px;
margem inferior:30px;
margem esquerda:40px;
}
pode ser reescrito como:
/*Preste atenção na ordem de escrita superior, direita, inferior e esquerda*/
div{margem:10px 20px 30px 40px}
/*Observe que valores e unidades não podem ter espaços, e cada valor é separado por um espaço*/
(Para detalhes, consulte: manual de referência css2, resumo de abreviações css comuns)
2. Você pode definir vários atributos de classe para um elemento html governa ao mesmo tempo (múltiplas definições de classe).
Geralmente escrevemos como:
Na verdade, podemos especificar múltiplas regras para o elemento p, tais como:
CSS:
.um{…}
.b{….}
HTML:
este elemento inclui os estilos definidos em a e b
Nota: Separe várias regras com espaços.
3. Defina a unidade claramente, a menos que o valor seja 0
Esquecer de definir dimensões é um problema comum entre iniciantes em CSS. Em html podemos escrever width="100", mas uma unidade precisa deve ser fornecida em css. Por exemplo: largura:100px;altura:50px;tamanho da fonte:9pt, exceto o valor 0, pois não importa para nenhuma unidade. 0 valores são todos iguais em tamanho.
Nota: Não adicione espaços entre o valor e a unidade.
4. Diferenciação de maiúsculas e minúsculas Em xhtml, os nomes dos elementos definidos por css diferenciam maiúsculas de minúsculas. Os valores de classe e id também diferenciam maiúsculas de minúsculas.
Por exemplo, #aaa é diferente de #AAA Em xhtml, p e P também são diferentes.
Se #aaa estiver definido em css, usar AAA para aplicá-lo no elemento html não obterá o estilo definido em #aaa.
Código de exemplo:
CSS:
#aaa{borda:1px sólido #ccc}
HTML:
Não é possível exibir a borda de 1 pixel
5. Princípio de prioridade mais recente do CSS Se vários estilos forem definidos para um elemento, o nível mais recente terá precedência e o estilo mais recente substituirá outras definições de estilo.
como:
CSS:
p{cor:vermelho}
.blue{cor:azul}
.amarelo{cor:amarelo}
HTML:
mostrado aqui em vermelho
Mostrado aqui em azul
Mostrado aqui em verde
Mostrado aqui em amarelo
Perceber:
(1) Preste atenção a diversas prioridades de estilos (as prioridades diminuem de cima para baixo):
--Configurações de estilo do elemento
--Configurações na área da cabeça
--Arquivos CSS referenciados externamente (2) A prioridade não é definida pela ordem de acesso, mas pela ordem de declaração em css.
Como no exemplo acima, ele é exibido como amarelo aqui
porque .yellow vem depois de .blue na definição css.
6. Use subseletores para reduzir a definição de id e classe.
#conter{..}
#contain_ul{...}
.contail_li{...}
pode ser alterado para:
#conter{..}
#containul{...}
.contain ul li{...}
7. Não adicione aspas ao caminho da imagem de fundo e altere background:url("xxx.gif") para background:url(xxx.gif)
Porque adicionar aspas causará erros em alguns navegadores.
8. O caminho da imagem de fundo é relativo ao caminho da página CSS atual.
Por exemplo:
Existe a seguinte estrutura de diretórios - imagens
--xxx.gif
--css
--xx.css
--index.html
Conteúdo do código
index.html refere-se ao arquivo xx.css.
xx.css deve fazer referência à imagem xxx.gif e seu método de escrita é: background:url(../images/xxx.gif)
9. Use o seletor de grupo para aplicar o mesmo estilo a diferentes elementos, como h1, h2, h3 , div{tamanho da fonte:16px;peso da fonte:bold}
Então, os estilos dos elementos h1, h2, h3 e div têm 16 pixels de fonte e
10 em negrito. Ao usar CSS para definir vários estados de links, você deve prestar atenção à ordem de escrita. é: :link: visitado :hover :active.
Se você não escrever nesta ordem, talvez não consiga obter o efeito desejado. Para lembrar a ordem, extraímos a primeira letra de cada palavra: LVHA Você pode lembrar a ordem memorizando as duas palavras Amor e Ódio.
11. Proibir o empacotamento do conteúdo e forçar o empacotamento do conteúdo Em uma tabela ou camada, podemos querer que o conteúdo não seja empacotado ou forçar o empacotamento do conteúdo. Podemos atender a esses requisitos por meio de alguns atributos CSS.
Desativar quebras de linha: espaço em branco:nowrap
Quebra de linha forçada: quebra de palavra: quebra de palavra: normal
12. A diferença entre relativo e absoluto;
Absoluto, o método de escrita em CSS é: position:absolute; Significa posicionamento absoluto. Refere-se ao canto superior esquerdo do navegador e coopera com TOP, RIGHT, BOTTOM e LEFT (doravante denominado TRBL) para posicionamento. TRBL não está definido. Por padrão, o ponto de origem é o ponto original do pai. Se TRBL estiver definido e o pai não definir o atributo position, então o absoluto atual será posicionado com o canto superior esquerdo do navegador como o ponto original, e a posição será determinada por TRBL.
Relativo, o método de escrita em CSS é: position:relative; Significa posicionamento relativo absoluto. Refere-se ao ponto original do pai como o ponto original. , e é posicionado com TRBL Quando há atributos CSS como preenchimento no pai, o ponto original do nível atual é posicionado com referência ao ponto original da área de conteúdo pai.
13. Distinguir entre div e span
div é um elemento de nível de bloco que pode conter parágrafos, tabelas, etc., e é usado para colocar diferentes conteúdos. Geralmente, usamos divs para fazer o layout e posicionar cada bloco na página web.
span é um elemento embutido sem significado prático. Ele existe apenas para aplicar estilos. Adicionar uma marcação a uma parte do conteúdo pode definir o estilo de seu conteúdo definindo um estilo no span.
14. Distinguir entre exibição e visibilidade
Ambos display:none e Visibility:hidden podem ocultar um elemento, mas Visibility:hidden oculta apenas o conteúdo do elemento, mas o espaço de posição usado ainda é retido.
Display:none equivale a remover o elemento da página, e sua posição ocupada também será excluída.