Embora o tamanho de um arquivo de página da web medido em K seja realmente insignificante para a largura de banda atual, como otimizar ao mínimo o arquivo de página da web medido em K ainda é uma das questões que os web designers devem considerar.
Como todos sabemos, sem afetar a estrutura e as funções de toda a página web, quanto menor o arquivo da página web, melhor, porque arquivos menores de páginas web ajudam o navegador a encurtar o tempo de interpretação da página web, e os visitantes naturais não têm enfrentar A irritação de esperar que as páginas da web apareçam lentamente é ainda mais óbvia para usuários com baixa largura de banda e velocidades lentas de Internet. Imagine só: você gostaria que o site inteiro aparecesse na sua frente imediatamente ao abri-lo? Ou prefere ficar mais de dez segundos ou até alguns minutos observando todo o site sendo interpretado pelo navegador pouco a pouco?
Na era do layout da tabela, o código era repetido inúmeras vezes junto com a tabela da página, fazendo com que todo o arquivo da página web ficasse extremamente inchado, a legibilidade do código também era reduzida ao mínimo e o tempo de interpretação do navegador naturalmente aumentou muito. Desde que o layout DIV+CSS substituiu o layout da Tabela, tudo foi bastante melhorado, permitindo que a Tabela retorne à sua posição original para exibição dos dados, e o layout é deixado para DIV+CSS, então o código A legibilidade e reutilização foram melhoradas , e o ponto mais importante do DIV+CSS é distinguir o desempenho e a estrutura do arquivo da página da web, de modo que não haja necessidade de alterar a estrutura de todo o arquivo da página da web para desempenho.
Embora o método de layout DIV + CSS tenha minimizado o código inchado no layout de tabela anterior, para web designers, como controlar ao mínimo o tamanho dos arquivos de páginas da web é uma questão que sempre vale a pena explorar e perseguir.
Observe o seguinte trecho de código:
#cabeçalho { |
Esse código CSS tem uma estrutura muito clara, uma estrutura clara e é altamente legível. No entanto, esse trecho de código não foi simplificado, o que significa que é o código CSS mais original. .:
| #cabeçalho { margem:10px 15px; background:#333 url(Imagens/header.jpg); } |
Existe o termo atributo composto em CSS, o que significa que muitos parâmetros de atributos podem ser integrados juntos. Por exemplo, o "margin-top; margin-right; margin-bottom; margin-left"; " propriedade e, em seguida, forneça parâmetros para ela.
Com isso, podemos agilizar ainda mais o código com base no código CSS original. Além disso, a estrutura escrita desta forma também é razoável e a legibilidade é igualmente forte. Mas isto não é suficiente para racionalizar ao extremo. Para deixar clara a estrutura desse código CSS, usamos espaços, quebras de linha e outras coisas que ocupam espaço. E se removermos essas coisas que ocupam espaço?
| #header{margem:10px 15px;fundo:#333 url(Imagens/header.jpg);} |