1. Regras de abreviação de atributos de fonte CSS

Geralmente, CSS é usado para definir atributos de fonte:
peso da fonte: negrito;
estilo da fonte: itálico;
variante da fonte: versalete;
tamanho da fonte: 1em;
altura da linha: 1,5em;
família de fontes: verdana, sans-serif;
Você pode escrever todos eles em uma linha:
fonte: negrito itálico versalete 1em/1,5em verdana,sans-serif;
Isso não parece muito mais simples? Há apenas uma coisa a ser observada: esse método abreviado só funciona quando as propriedades font-size e font-family são especificadas ao mesmo tempo. Além disso, se você não definir font-weight, font-style e font-variant, eles usarão valores padrão, portanto, tenha isso em mente.

2. Valor padrão da borda CSS

Geralmente você pode definir a cor, largura e estilo da borda, como:
borda: 3px sólido #000;
Isso faz com que a borda pareça com 3 pixels de largura, preta e sólida. Mas, na verdade, você só precisa especificar o estilo aqui.
Se apenas o estilo for especificado, os valores padrão serão usados ​​para outras propriedades. Geralmente, a largura padrão da Borda é média, que geralmente é igual a 3 a 4 pixels; Se esse valor estiver correto, não há necessidade de definir tantas configurações.

3. Use duas classes para elementos ao mesmo tempo

Geralmente, um elemento é definido para uma classe (Classe), mas isso não significa que dois não possam ser usados. Na verdade, você pode fazer isso:

…

Dê ao elemento P duas classes ao mesmo tempo, separadas por espaços, para que todos os atributos do texto e das classes laterais sejam adicionados ao elemento P. Se houver conflito entre os atributos das duas classes, aquele definido posteriormente terá efeito, ou seja, os atributos da classe colocados posteriormente no arquivo CSS terão efeito.
Suplemento: Para um ID, você não pode escrever

…

nem pode escrevê-lo assim

4. CSS para impressão de documentos

Muitos sites têm uma versão específica para impressão, mas isso não é realmente necessário porque a impressão pode ser estilizada usando CSS.
Em outras palavras, você pode especificar dois arquivos CSS para a página, um para exibição na tela e outro para impressão:


A linha 1 é para exibição, a linha 2 é para impressão, preste atenção ao atributo de mídia.
Mas o que deve ser escrito no CSS de impressão? Você pode configurá-lo da mesma forma que projetaria CSS normal. Durante o design, você pode configurar este CSS para exibir CSS para verificar seu efeito. Talvez você use o comando display: none para desligar algumas imagens decorativas, desligar alguns botões de navegação, etc.

5. Habilidades de substituição de imagem CSS

Geralmente é recomendado usar HTML padrão para exibir texto em vez de imagens, o que não é apenas mais rápido, mas também mais legível. Mas se quiser usar algumas fontes especiais, você só pode usar imagens.
Por exemplo, se você quiser criar um ícone para vender coisas, você usaria esta imagem:

Claro que isso é possível, mas para os motores de busca, em comparação com o texto normal, eles têm pouco interesse na substituição do texto em alt. Isso ocorre porque muitos designers colocam muitas palavras-chave aqui para enganar os motores de busca. Então o método deveria ser assim:

Comprar widgets

Mas não há fontes especiais. Para obter o mesmo efeito, você pode projetar CSS assim:
h1 { background: url(widget-image.gif) no-repeat; altura: altura da imagem recuo do texto: -2000px }
Preste atenção ao substituir a altura da imagem pela altura da imagem real. Aqui, a imagem será exibida como plano de fundo e, como o recuo de -2.000 pixels está definido, o texto real aparecerá 2.000 pontos no lado esquerdo da tela e ficará invisível. Mas para as pessoas que desligam a imagem, elas podem não conseguir vê-la, então tome cuidado.

6. Outra técnica de modelo de caixa CSS

O ajuste deste modelo Box é principalmente para navegadores IE anteriores ao IE6, que contam a largura da borda e os espaços em branco na largura do elemento. por exemplo:
#box {largura: 100px borda: 5px;
Chame assim:

A largura total da caixa agora deve ser de 150 pontos, o que é correto em todos os navegadores, exceto IE antes do IE6. Mas em navegadores como o IE5, sua largura total ainda é de 100 pontos. Essa diferença pode ser tratada usando o método de ajuste de caixa inventado por pessoas anteriores.
Mas o mesmo propósito pode ser alcançado com CSS para torná-los consistentes.
#box {largura: 150px}
#box div {borda: 5px; preenchimento: 20px }
Chamado assim:

Desta forma, não importa o navegador, a largura é de 150 pontos.

7. CSS define os elementos do bloco para serem alinhados horizontalmente no centro

Se você deseja criar uma página da web com largura fixa e deseja que ela seja centralizada horizontalmente, geralmente ela se parece com isto:
#content {largura: 700px margem: 0 automático}
Você usaria