Como usar Float ao estilo Formas para HTML5 e CSS3 Programação

Muitos problemas de layout de página parecem exigir tabelas. Alguns uso inteligente do CSS3 flutuador pode ajudar a elementos com várias colunas sem a sobrecarga de tabelas. Formas causar uma dor de cabeça em particular porque uma forma muitas vezes envolve etiquetas numa coluna esquerda seguido de entrada elementos na coluna da direita.

Você provavelmente estaria tentado a colocar uma tal forma de uma tabela. Adicionando marcas de tabela faz com que o HTML muito mais complexo e não é necessária. É muito melhor usar CSS para gerenciar o layout.

Você pode flutuar elementos para criar formas atraentes sem a necessidade de tabelas.

Como o design da página fica mais envolvido, faz mais sentido pensar o HTML eo CSS separadamente. O HTML vai lhe dar uma sensação de a intenção geral da página, e o CSS pode ser modificado separadamente. Usando CSS externo é uma extensão natural dessa filosofia. Comece olhando floatForm.html e concentrar-se sobre a estrutura HTML antes de se preocupar com estilo:

Enquanto você olhar sobre esse código, observar várias coisas interessantes sobre como a página foi concebida:

• O CSS é externo. CSS é definido em um documento externo. Isto torna mais fácil mudar o estilo e ajuda-o a concentrar-se no documento HTML no isolamento.

• O código HTML é mínima. O código é muito limpo. Ele inclui uma forma com um. O contém rótulos, elementos e a.

• Não existe uma tabela. Não há necessidade de adicionar uma tabela como um esquema de organização artificial. Uma tabela não iria para a clareza da página. Os elementos do formulário-se fornecer a estrutura suficiente para permitir que toda a formatação que você precisa.

• Os rótulos são parte do design. Você pode usar o rótulo elemento em todo o formulário, dando-lhe um elemento que pode ser denominado como quiser.

• Tudo é selecionável. Você deseja aplicar um estilo CSS para rótulos, outro para entrada elementos, e uma terceira para o estilo botão. Você pode configurar o código HTML que você pode usar seletores CSS sem necessidade de qualquer identidade ou classe atributos.

• Há um botão. Você pode usar um botão elemento, em vez de de propósito. Dessa forma, você pode aplicar um estilo para todo o botão elementos e um estilo diferente para o elemento.

Concepção de uma página como esta para que sua estrutura interna fornece todos os seletores que você precisa é maravilhoso. Isso mantém a página muito limpo e fácil de ler. Ainda assim, não tenha medo de adicionar classes ou IDs se você precisar deles.

É muitas vezes uma boa idéia de olhar para a sua página com HTML reta antes de começar a andar com CSS.

Se você tem uma página com estilos e você quer ver como vai ficar sem as regras de estilo, use as ferramentas de desenvolvimento do Chrome ou Firebug. Você pode desativar temporariamente algumas ou todas as regras de estilo CSS para ver o conteúdo padrão por baixo. Isto às vezes pode ser extremamente útil.