Dez dicas para design de folhas de estilo CSS

1. Regras de abreviação de fontes CSS

Ao definir fontes usando CSS você pode fazer o seguinte:

Na verdade, você pode abreviar estas propriedades:

fonte: 1em/1,5em negrito itálico verdana, serifa

Está muito melhor agora, mas há uma coisa a ser observada: para usar esse método abreviado, você deve pelo menos especificar os atributos font-size e font-family se outros atributos (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:

<p class="text side">...</p>Ao usar duas classes ao mesmo tempo (separadas por 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. Entretanto, para navegadores diferentes do IE, qualquer instrução marcada com !important terá prioridade absoluta, por exemplo: margin-top: 3.5em !margin-top: 2em em todos os navegadores, exceto IE A margem superior é sempre 3,5em, enquanto O IE é 2em Às vezes, isso é útil, especialmente ao usar valores de margem relativa (como este exemplo), para mostrar as diferenças sutis entre o IE e outros navegadores. (Muitas pessoas também podem notar que os subseletores CSS também são ignorados pelo IE)

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.

<h1><img src="/widget-image.gif" alt="Comprar widgets" /></h1>

Isso 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: <h1><span >Comprar widgets< /span></h1>, 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 hackear modelo de caixa CSS

O hack do modelo de caixa css foi usado para resolver problemas de exibição do navegador antes do IE6. Versões anteriores ao IE6.0 incluíam o valor da borda e o valor de preenchimento de um elemento dentro da largura (em vez de adicioná-lo ao 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:

<div id="caixa">...</div>

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. Centralize o elemento do bloco

Supondo que seu site use um layout de largura fixa, com todo o conteúdo 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, depois basta adicionar outra altura da linha: 2em ao css. !

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.