Você está aprendendo layout CSS? Você ainda não consegue dominar totalmente o layout CSS puro? Geralmente existem duas situações que atrapalham seu aprendizado:
A primeira possibilidade é que você não tenha entendido o princípio do processamento de páginas CSS. Antes de considerar o desempenho geral da sua página, você deve primeiro considerar a semântica e a estrutura do conteúdo e, em seguida, adicionar CSS para a semântica e a estrutura. Este artigo explicará como estruturar HTML.
Outra razão é que você não conhece as propriedades familiares da camada de apresentação (como cellpadding, hspace, align=left, etc.) e não sabe em quais instruções CSS convertê-las. Depois de resolver o primeiro problema e saber como estruturar seu HTML, darei uma lista detalhando qual CSS usar para substituir os atributos de apresentação originais.
HTML estruturado
Quando aprendemos a produção de páginas web, sempre consideramos primeiro como projetá-las, considerando as imagens, fontes, cores e planos de layout. Depois usamos o Photoshop ou o Fireworks para desenhá-lo e cortá-lo em pequenas imagens. Por fim, edite o HTML para restaurar todos os designs da página.
Se você deseja que sua página HTML seja organizada com CSS (compatível com CSS), você precisa voltar e começar de novo. Não pense primeiro na "aparência", mas primeiro pense na semântica e na estrutura do conteúdo da sua página.
A aparência não é o mais importante. Uma página HTML bem estruturada pode ser apresentada em qualquer aparência, e CSS Zen Garden é um exemplo clássico. CSS Zen Garden nos ajuda a finalmente perceber o poder do CSS.
HTML não serve apenas para leitura na tela do computador. Suas imagens cuidadosamente projetadas no Photoshop podem não ser exibidas em PDAs, telefones celulares e leitores de tela. Mas uma página HTML bem estruturada pode ser exibida em qualquer lugar e em qualquer dispositivo de rede através de diferentes definições de CSS.
comece a pensar
Comece aprendendo o que é estrutura, que alguns escritores também chamam de semântica. O que esse termo significa é que você precisa analisar seus blocos de conteúdo e a finalidade de cada parte do conteúdo e, em seguida, construir a estrutura HTML correspondente com base nesses propósitos de conteúdo.
Se você sentar e analisar e planejar cuidadosamente a estrutura da sua página, poderá acabar com algo assim:
Logotipo e nome do site
Conteúdo da página principal
Navegação no site (menu principal)
submenu
caixa de pesquisa
Áreas funcionais (por exemplo, carrinho de compras, checkout)
Rodapé (direitos autorais e avisos legais relacionados)
Geralmente usamos elementos DIV para definir essas estruturas, semelhante a este:
<div id=header></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=pesquisa></div>
<div id=loja></div>
<div id=rodapé></div>
Não é o layout, é a estrutura. Esta é uma descrição semântica de blocos de conteúdo. Ao entender sua estrutura, você pode adicionar o ID correspondente ao DIV. Qualquer bloco de conteúdo pode estar contido em um contêiner DIV e outro DIV pode ser aninhado dentro dele. Os blocos de conteúdo podem conter qualquer elemento HTML --- títulos, parágrafos, imagens, tabelas, listas, etc.
Com base no exposto, você já sabe estruturar HTML e agora pode definir layout e estilos. Cada bloco de conteúdo pode ser colocado em qualquer lugar da página e a cor, fonte, borda, plano de fundo, propriedades de alinhamento, etc. do bloco podem ser especificadas.
Usar seletores é uma coisa maravilhosa
O nome do id é um meio de controlar um determinado bloco de conteúdo. Ao envolver esse bloco de conteúdo com um DIV e adicionar um id exclusivo, você pode usar seletores CSS para definir com precisão a aparência de cada elemento da página, incluindo títulos, listas, imagens. , links ou parágrafos, etc. Por exemplo, se você escrever uma regra CSS para #header, ela poderá ser completamente diferente da regra de imagem em #content.
Outro exemplo: você pode usar regras diferentes para definir estilos de link em diferentes blocos de conteúdo. Algo assim: #globalnav a:link ou #subnav a:link ou #content a:link. Você também pode definir estilos diferentes para o mesmo elemento em blocos de conteúdo diferentes. Por exemplo, defina os estilos de p em #content e #footer respectivamente através de #content p e #footer p. Estruturalmente falando, sua página é composta por imagens, links, listas, parágrafos, etc. Esses elementos em si não afetam o dispositivo de rede em que são exibidos (PDA, celular ou Internet TV). Eles podem ser definidos como Qualquer aparência de desempenho.
Uma página HTML cuidadosamente estruturada é muito simples e cada elemento é usado para fins estruturais. Quando você deseja recuar um parágrafo, não precisa usar a tag blockquote. Basta usar a tag p e adicionar uma regra de margem CSS a p para atingir o propósito de recuo. p é uma tag estruturada e margin é um atributo de apresentação. O primeiro pertence ao HTML e o último pertence ao CSS. (Esta é a separação entre estrutura e expressão.)
Páginas HTML bem estruturadas quase não possuem tags de atributos. O código é muito limpo e conciso. Por exemplo, o código original <table width=80% cellpadding=3 border=2 align=left> agora só pode escrever <table> em HTML, e todas as coisas que controlam o desempenho são escritas em CSS. Em HTML estruturado, tabela é. uma tabela, e nada mais (como ser usada para layout e posicionamento).
Pratique estruturar-se
A estrutura acima é apenas a mais básica. Na aplicação real, você pode ajustar os blocos de conteúdo de acordo com suas necessidades. O aninhamento DIV ocorre frequentemente, e você verá que existem outras camadas na camada contêiner, com uma estrutura semelhante a esta:
<div id=navcontainer>
<div id=globalnav>
<ul>uma lista</ul>
</div>
<div id=subnavegador>
<ul>outra lista</ul>
</div>
</div>
Elementos div aninhados permitem que você defina mais regras CSS para controlar a apresentação. Por exemplo, você pode fornecer ao #navcontainer uma regra para centralizar a lista à direita, fornecer ao #globalnav uma regra para centralizar a lista à esquerda e fornecer outra ao #subnav. regra para centralizar a lista inteiramente. Desempenhos diferentes.
Substitua os métodos tradicionais por CSS
A lista a seguir irá ajudá-lo a substituir os métodos tradicionais por CSS:
Atributos HTML e métodos CSS correspondentes
Descrição do método CSS do atributo HTML
alinhar=esquerda
alinhar = direita float: esquerda;
float: right; Use CSS para flutuar qualquer elemento: imagens, parágrafos, divs, títulos, tabelas, listas, etc.
Ao usar o atributo float, você deve definir uma largura para o elemento flutuante.
marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; Usando CSS, a margem pode ser definida em qualquer elemento, não apenas no elemento body. Mais importante ainda, você pode especificar a parte superior, direita, inferior e esquerda do elemento. valor da margem separadamente.
vlink=#333399 alink=#000000 link=#3333FF a:link #3ff;
a:visitado: #339;
a:hover: #999;
a:ativo: #00f;
Em HTML, a cor de um link é definida como um valor de atributo do corpo. O estilo do link é o mesmo em toda a página. Usando seletores CSS, os estilos de link podem ser diferentes em diferentes partes da página.
bgcolor=#FFFFFF background-color: #fff; Em CSS, a cor de fundo pode ser definida para qualquer elemento, não apenas para elementos do corpo e da tabela.
bordercolor=#FFFFFF border-color: #fff; Qualquer elemento pode definir uma borda (boeder). Você pode definir superior, direita, inferior e esquerda respectivamente.
borda=3
cellpacing=3 border-width: 3px; Usando CSS, você pode definir as bordas da tabela como um estilo unificado ou pode definir a cor, o tamanho e o estilo das bordas superior, direita, inferior e esquerda, respectivamente.
Você pode usar seletores table, td ou th.
Se precisar definir um efeito sem borda, você pode usar a definição CSS: border-collapse:lapse;
<br claro=esquerda>
<br claro = certo>
<br claro=tudo>
claro: esquerda;
claro: certo;
claro: ambos;
Muitos layouts de 2 ou 3 colunas usam o atributo float para posicionamento. Se você definir uma cor de fundo ou imagem de fundo na camada flutuante, poderá usar o atributo clear.
preenchimento de célula = 3
vespaço=3
hspace=3 padding: 3px; Usando CSS, o atributo padding pode ser definido em qualquer elemento. Da mesma forma, o padding pode ser definido na parte superior, direita, inferior e esquerda, respectivamente. o preenchimento é transparente.
alinhar=centro alinhamento de texto: centro;
margem direita: automático; margem esquerda: automático;
O alinhamento de texto funciona apenas com texto.
Elementos de nível de bloco como div e p podem ser centralizados horizontalmente usando margin-right: auto e margin-left: auto;
Algumas técnicas e ambiente de trabalho lamentáveis
Devido ao suporte imperfeito do CSS pelos navegadores, às vezes temos que adotar alguns truques (hacks) ou estabelecer um ambiente (Workarounds) para permitir que o CSS obtenha o mesmo efeito dos métodos tradicionais. Por exemplo, elementos em nível de bloco às vezes precisam usar técnicas de centralização horizontal, técnicas de bug de modelo de caixa, etc. Todas essas técnicas são detalhadas no artigo de Molly Holzschlag Integrated Web Design: Strategies for Long-Term CSS Hack Management.
Outro recurso sobre técnicas CSS é "Position is Everything" de Big John e Holly Bergevin.
Compreendendo o comportamento flutuante
"Containing Floats" de Eric Meyer irá ajudá-lo a dominar como usar atributos float para layout. Às vezes, os elementos flutuantes precisam ser limpos. Ler "Como limpar flutuadores sem marcação estrutural" será muito útil.