Dez principais dicas para CSS no design de páginas da Web

1. Regras de abreviação de fontes cs
Ao usar css para definir fontes, você pode fazer o seguinte:

Na verdade, você pode abreviar estas propriedades:

Está muito melhor agora, mas há uma coisa a notar: para usar este método abreviado, você deve especificar pelo menos as propriedades font-size e font-family Se outras propriedades (como font-weight, font-style, font-. varient) não são especificados, eles serão usados ​​automaticamente.

2. Use duas aulas ao mesmo tempo

Normalmente especificamos apenas uma classe para o atributo, mas isso não significa que você pode especificar apenas uma. Na verdade, você pode especificar quantas quiser, por exemplo:

Ao utilizar duas classes ao mesmo tempo (separando-as com espaços em vez de vírgulas), este parágrafo aplicará as regras especificadas em ambas as classes. Se alguma das regras se sobrepuser, a última terá precedência.

3. Valor padrão da borda em css

Ao escrever uma regra de borda, você geralmente especifica a cor, a largura e o estilo (em qualquer ordem). Por exemplo: border: 3px solid #000 (borda preta sólida com 3 pixels de largura Na verdade, o único valor que precisa ser especificado neste exemplo é o estilo). Se você especificar o estilo como sólido, os valores padrão serão usados ​​para o restante dos valores: a largura padrão é média (equivalente a 3 a 4 pixels; a cor padrão é a cor do texto na borda); . Se é exatamente isso que você deseja, não é necessário especificá-lo em css.

4. !important será ignorado pelo IE

Em CSS, geralmente a última regra especificada tem precedência. Porém, para navegadores diferentes do IE, qualquer instrução marcada com !important receberá prioridade absoluta, por exemplo:

A margem superior é de 3,5em em todos os navegadores, exceto IE, e 2em no IE. Às vezes, isso é útil, especialmente ao usar valores de margem relativa (como neste exemplo), para mostrar a diferença entre o IE e outros navegadores.

(IE aqui se refere a: IE6 e abaixo, excluindo IE7. Na verdade, o IE7 suporta o atributo !important, e o mesmo se aplica a subseletores css)

5. Habilidades de substituição de imagens

Muitas vezes é mais sensato usar HTML padrão em vez de imagens para exibir texto, além de agilizar os downloads e resultar em melhor usabilidade. Mas se você estiver determinado a usar uma fonte que pode não estar disponível na máquina do seu visitante, você só poderá escolher imagens.

Por exemplo, você deseja usar o título “Comprar widgets” no topo de cada página, mas também deseja que ele seja descoberto pelos mecanismos de pesquisa. Se você usar uma fonte rara por questões estéticas, precisará usar uma imagem para exibição. isso.

Isto é certamente verdade, mas há evidências de que os motores de busca valorizam muito mais o texto real do que o texto alternativo (porque muitos sites já usam texto alternativo como palavras-chave), então temos que usar outro método:

Compre widgets, mas e suas lindas fontes? O seguinte CSS pode ajudar:

Agora você tem uma bela imagem e uma boa ocultação do texto real - com a ajuda de CSS, o texto é posicionado a -2.000 pixels do lado esquerdo da tela.

6. Outra opção para o hack do modelo de caixa css O hack do modelo de caixa css é usado para resolver problemas de exibição do navegador antes do IE6 . o valor da largura). Por exemplo, você pode usar o seguinte CSS para especificar as dimensões de um contêiner:

Em seguida, aplique em html:
A largura total da caixa é de 150 pixels em quase todos os navegadores (100 pixels de largura + duas bordas de 5 pixels + dois preenchimentos de 20 pixels), exceto em navegadores anteriores ao IE6 ainda é de 100 pixels (o valor da borda e o valor do preenchimento estão incluídos no valor de largura), o hack do modelo de caixa foi projetado para resolver esse problema, mas também causará problemas. Uma maneira mais simples é a seguinte:

Isso resultará na largura total da caixa de 150 pixels em qualquer navegador.

7. Elementos do bloco central

Supondo que seu site use um layout de largura fixa e todo o conteúdo seja colocado no centro da tela, você pode usar o seguinte css:

Você pode colocar qualquer item dentro do corpo do HTML, e o item obterá automaticamente valores de limite esquerdo e direito iguais para garantir a exibição centralizada. Porém, isso ainda é um problema em navegadores anteriores ao IE6 e não será centralizado, portanto deve ser modificado da seguinte forma:

Definir o corpo fará com que o conteúdo principal seja centralizado, mas mesmo todo o texto será centralizado. Este provavelmente não é o efeito que você deseja. Por esse motivo, o div de #content também deve especificar um valor: text-align: left.

8. Use CSS para obter centralização vertical

Centralizar verticalmente é muito fácil para tabelas, basta especificar a célula como vertical-align: middle, mas isso não funciona no layout CSS. Suponha que você defina a altura de um menu de navegação para 2em e, em seguida, especifique as regras de alinhamento vertical em CSS, o texto ainda será organizado no topo da caixa, não há diferença alguma.

Para resolver este problema, basta definir a altura da linha da caixa para ser igual à altura da caixa. Neste exemplo, a altura da caixa é 2em, então você só precisa adicionar outra altura da linha: 2em ao css. Centralização vertical alcançada!

9. Posicionamento CSS dentro do contêiner

Uma das maiores vantagens do CSS é que os objetos podem ser posicionados em qualquer lugar do documento e os objetos também podem ser posicionados dentro de um contêiner. Basta adicionar uma regra CSS ao contêiner:

Então, qualquer elemento dentro do contêiner é posicionado em relação ao contêiner. Suponha que você use a seguinte estrutura HTML:

...

Se quiser posicionar a navegação dentro do contêiner a 30 pixels da borda esquerda e 5 pixels do topo, você pode usar a seguinte instrução css:

10. Cor de fundo estendendo-se até a parte inferior da tela

Uma das desvantagens do CSS é a falta de controle vertical, o que causa problemas que um layout de tabela não encontra. Suponha que você configure uma coluna no lado esquerdo da página para posicionar a navegação do seu site. A página tem fundo branco, mas você deseja que a coluna de navegação tenha fundo azul. Basta usar o seguinte css:

O problema é que o item de navegação não se estende até a parte inferior da página e, naturalmente, sua cor de fundo também não se estende até a parte inferior. Assim, o fundo azul da coluna da esquerda fica cortado na metade da página, desperdiçando seu design. O que devemos fazer? Infelizmente, só podemos usar o engano, ou seja, especificar o fundo do corpo como uma imagem da mesma cor e largura da coluna da esquerda.

A imagem de fundo deve ser uma imagem azul com 150 pixels de largura. A desvantagem deste método é que em não pode ser usado para especificar a largura da coluna esquerda. Quando o usuário altera o tamanho do texto e a largura do conteúdo se expande, a largura da cor de fundo não muda de acordo.

No momento em que este livro foi escrito, esta é a única solução para esse tipo de problema, portanto, você só pode usar valores de pixel para a coluna da esquerda para obter uma cor de fundo diferente que se estende automaticamente.