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:
<p class="lado do texto">…</p>
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 <p id="text side">…</p> 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:
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
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:
<h1><img src=”widget-image.gif” alt=”Comprar widgets” /></h1>
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:
<h1>Comprar widgets</h1>
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:
<div id="caixa">…</div>
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:
<div id="box"><div>…</div></div>
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 <div id="content"> para cercar todos os elementos. Isso é simples, mas não é bom o suficiente, e as versões anteriores ao IE6 não exibirão esse efeito. Altere o CSS da seguinte forma:
corpo {alinhamento de texto: centro} #content {alinhamento de texto: largura: 700px margem: 0 automático}
Isso centralizará o conteúdo da página da web, então text-align: left será adicionado ao Conteúdo.
8. Use CSS para lidar com o alinhamento vertical
O alinhamento vertical pode ser facilmente alcançado usando tabelas. Basta definir a unidade da mesa vertical-align: middle. Mas isso é inútil com CSS. Se você deseja definir uma barra de navegação com 2em de altura e deseja que o texto de navegação seja centralizado verticalmente, definir este atributo é inútil.
Qual é o método CSS? A propósito, defina a altura da linha dessas palavras para 2em: line-height: 2em e pronto.
9. Posicionamento de CSS dentro do container
Um benefício do CSS é que você pode posicionar um elemento arbitrariamente, mesmo dentro de um contêiner. Por exemplo, para este contêiner:
#container {posição: relativa}
Desta forma, todos os elementos do container ficarão relativamente posicionados, podendo ser utilizado assim:
<div id="container"><div id="navigation">…</div></div>
Se quiser localizar 30 pontos da esquerda e 5 pontos do topo, você pode fazer o seguinte:
#navegação { posição: absoluta esquerda: 30px superior: 5px }
Claro, você também pode fazer isso:
margem: 5px 0 0 30px
Observe que a ordem dos quatro números é: cima, direita, baixo, esquerda. É claro que, às vezes, o posicionamento em vez das margens é melhor.
Para obter mais layouts e técnicas de CSS, consulte o grande número de tutoriais em 52CSS.com.
10. Cor de fundo direto para a parte inferior da tela
O controle na direção vertical está além dos recursos do CSS. Se você quiser que a barra de navegação vá direto para o final da página como a barra de conteúdo, usar uma tabela é muito conveniente, mas se você usar apenas CSS assim:
#navegação {fundo: azul; largura: 150px}
Uma barra de navegação mais curta não vai até o final; ela termina na metade do conteúdo. O que fazer?
Infelizmente, a única maneira de trapacear é adicionar uma imagem de fundo à coluna mais curta, com a mesma largura da coluna, e torná-la da mesma cor da cor de fundo definida.
corpo {fundo: url (imagem azul.gif) 0 0 repetir-y}
Você não pode usar em como unidade neste momento, porque então o truque será revelado quando o leitor alterar o tamanho da fonte, e você só poderá usar px.