Há muitas dicas no desenvolvimento de layout web CSS, e amigos novatos geralmente não estão familiarizados com elas. Em um ou dois pequenos problemas, pode levar muito tempo para ser resolvido. Embora esse aspecto tenha sido mencionado muitas vezes nos documentos do 52CSS.com, muitos amigos ainda cometem erros nessas questões. Vamos dar uma olhada nessas técnicas de CSS hoje. Leia-as com atenção. Talvez você não as entenda totalmente. Você pode pesquisar em 52CSS.com para expandir o conhecimento que deseja.
1. A tag ul tem um valor de preenchimento por padrão no Mozilla, mas no IE apenas a margem tem um valor.
2. O mesmo seletor de classe pode aparecer repetidamente em um documento, mas o seletor de ID só pode aparecer uma vez. Use classe e id para definir um rótulo em CSS. Se as definições forem repetidas, a definição feita pelo seletor de id é válida porque o peso do id é maior que o da classe.
3. Uma maneira estúpida de ajustar a compatibilidade (IE e Mozilla):
Iniciantes podem encontrar tal situação: o atributo do mesmo rótulo é exibido normalmente quando definido como A no IE, mas deve ser definido como B no Mozilla para ser exibido normalmente, ou os dois serão invertidos.
Solução temporária: O seletor {nome da propriedade: B !important; nome da propriedade: A} pode não funcionar às vezes. Você pode procurar mais soluções BUG em 52CSS.com.
4. Se for necessário algum espaçamento entre um grupo de tags aninhadas, deixe-o para o atributo margin da tag localizada dentro em vez de definir o preenchimento da tag localizada externamente.
5. Recomenda-se usar imagem de fundo em vez de imagem de estilo de lista para o ícone na frente da tag li.
6. IE não consegue distinguir a diferença entre relação de herança e relação pai-filho. Todas são relações de herança.
7. Ao adicionar seletores loucamente às suas tags, não se esqueça de adicionar comentários aos seletores em CSS. Você saberá por que faz isso quando modificar seu CSS posteriormente. Também uma palavra de cautela: não enlouqueça.
8. Se você definir uma imagem de fundo escura e um efeito de texto brilhante para uma etiqueta. Recomenda-se definir uma cor de fundo mais escura para a sua etiqueta neste momento. Como as imagens são perdidas, o texto permanece legível.
9. Ao definir os quatro estados de um link, preste atenção na ordem: Link Visitado Hover Active
10. Utilize fundo para imagens que não tenham nada a ver com o conteúdo. Lembre-se sempre de separar a apresentação do conteúdo.
11. A cor definida pode ser abreviada #8899FF=#89F
12. As tabelas ainda são úteis em alguns aspectos. Quando você encontrar uma tabela de dados, não a odeie.
13. <script> não possui o atributo idioma e deve ser escrito assim: <script type="text/javascript">
14. Tabela de contorno de pixel único perfeita (pode passar no teste no IE5, IE6, IE7 e FF1.0.4 ou superior)
tabela{ border-collapse:collapse } td{ borda:#000 sólido 1px }; |
15. Valores de margem negativos podem desempenhar um papel no posicionamento relativo quando o rótulo usa posicionamento absoluto. Quando a página é exibida no centro, o atributo left:XXpx não é adequado para camadas que usam posicionamento absoluto. É uma boa ideia colocar essa camada próxima a um rótulo que precisa ser posicionado relativamente e depois usar valores negativos para margem.
16. Ao utilizar o posicionamento absoluto, o valor da margem pode ser utilizado para posicionar em relação à sua própria posição, que é diferente do posicionamento de atributos como superior e esquerdo em relação à borda da janela. A vantagem do posicionamento absoluto é que permite que outros elementos ignorem a sua existência.
17. Se o texto for muito longo, transforme a parte longa em reticências e exiba-a: inválido no IE5 e FF, mas pode ser ocultado, válido no IE6
| <DIV STYLE=”largura:120px;altura:50px;borda:1px azul sólido;overflow:oculto;excesso de texto:reticências”> <NOBR>Por exemplo, há uma linha de texto tão longa que não pode ser exibida em uma linha da tabela.</NOBR> |
18. Quando houver problemas de duplicação de texto causados por comentários no IE, você pode alterar os comentários para:
<!–[if !IE]>Coloque seu comentário aqui…<![endif]–> |
19. Como chamar fontes externas usando CSS
gramática:
| @font-face{font-family:nome;src:url(url);sRules} |
Valor:
nome: nome da fonte. qualquer valor possível do atributo font-family url(url): Especifique o arquivo de fonte OpenType usando endereço de URL absoluto ou relativo sRules: definição de folha de estilo |
20. Como centralizar verticalmente o texto em uma caixa de texto de um formulário?
Se o uso de grupos de altura e altura de linha não tiver efeito no FF, o caminho é definir o preenchimento superior e inferior para obter o efeito desejado.
21. Pequenas questões a serem observadas ao definir a tag A:
Quando definimos a{color:red;}, ele representa os estilos dos quatro estados de A. Se quisermos definir um estado onde o mouse é colocado, basta definir a:hover. estilo definido. Quando apenas um a:link for definido, lembre-se de definir os outros três estados!
22. Nem todos os estilos precisam ser abreviados:
Quando p{padding:1px 2px 3px 4px} é definido antes da folha de estilos, outro estilo é adicionado no projeto subsequente com preenchimento superior de 5px e preenchimento inferior de 6px. Não precisamos necessariamente escrever p.style1{padding:5px 6px 3px 4px}. Pode ser escrito como p.style1{padding-top:5px;padding-right:6px;}. Você pode achar que escrever desta forma não é tão bom quanto o original, mas você já pensou sobre isso? O método define repetidamente o estilo. Além disso, você não precisa descobrir quais são os valores originais de preenchimento inferior e esquerdo! Se o estilo anterior P mudar no futuro, o estilo de p.style1 que você definiu também mudará.
23. Quanto maior o site, mais estilos CSS haverá. Antes de começar, faça preparativos e planos completos, incluindo regras de nomenclatura. Divisão de bloco de página, classificação de estilo interno, etc.
24. Truncamento de caracteres chineses de largura fixa: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; não pode, apenas esconde.
Se há muitas coisas que você não entende, não importa. Registre essas habilidades e visite 52CSS.com com frequência para verificá-las. Você também pode inserir o conteúdo de seu interesse na caixa de pesquisa à esquerda para pesquisar. Você está convidado a deixar comentários e adicionar dicas de CSS.