Contente

• Passos
• Perguntas e respostas da comunidade
• Dicas

Outras Seções

Cascading Style Sheets (CSS) são a linguagem de codificação padrão para descrever como as páginas da web devem aparecer nos navegadores. Os sites da Web freqüentemente contêm várias colunas. Descubra como formatar colunas em CSS para que possa ajustar sua localização, tamanho e aparência conforme desejado.

Passos

1. 

   Estruture seu HTML corretamente para um desempenho ótimo de CSS. Você quer 2 "id" em torno de cada coluna, para evitar problemas de layout.
   • Nomeie o primeiro id com a finalidade da coluna, como "barra lateral". Você colocará todo o CSS para o conteúdo da coluna aqui.
   • Nomeie o segundo id com a finalidade da coluna mais "wrapper", como "sidebar-wrapper". Você colocará todos os CSS para o layout da coluna aqui. Este id irá envolver o outro id. (Então, em seu HTML, você terá algo como div id = 'sidebar-wrapper' dentro de <> imediatamente seguido por div id = 'sidebar' (novamente em <>) seguido por CONTENT e / div dentro de <> (repetido duas vezes )

2. 

   
   
   Encontre o nome do id da coluna em seu CSS (como "#sidebar").

3. 

   
   
   Decida se deseja que a coluna apareça à direita ou à esquerda.

4. 

   Adicionar "float: right; "ou" float: left; "ao CSS para o nome de id (como" #sidebar {float: right;} ").
   • Se você quiser mais de 2 colunas, precisará começar com uma estrutura de 2 colunas e, em seguida, quebrar ainda mais essas colunas. Por exemplo, se você quiser 3 colunas, você começará com uma coluna principal e uma coluna lateral e, em seguida, colocará 2 colunas dentro da coluna principal, com uma direita flutuante e uma esquerda flutuante.

Método 1 de 2: alterar o layout da coluna com CSS

1. 

   
   
   Encontre o nome do id do wrapper de coluna em seu CSS (como "# sidebar-wrapper").

2. 

   Determine a largura que você deseja que a coluna tenha. Você pode definir isso em porcentagens ou pixels.

3. 

   Adicione essa "largura" ao id do wrapper da coluna (como "sidebar-wrapper {largura: 30%; }’).

4. 

   Determine a "altura" da coluna desejada e adicione-a ao id do wrapper da coluna (como "sidebar-wrapper {height: 100%; }.

Método 2 de 2: Alterar a aparência da coluna com CSS

1. 

   Determine o tamanho de preenchimento, margens e bordas que você deseja em cada lado da coluna.
   • Preenchimento é o espaço entre a borda do plano de fundo da coluna e o texto.
   • Margem é o espaço após a borda do plano de fundo antes do início da próxima coluna.

2. 

   Adicione o preenchimento e as margens ao id do nome da coluna (como "#sidebar {padding: 0 5px; margem: 0 5px; borda: 2px pontilhada #fff; } ", que dá à coluna 5 pixels de margem e preenchimento em ambos os lados, mas nenhum na parte superior e inferior).

3. 

   Adicione as cores desejadas ao id do nome da coluna. Por exemplo, para um fundo preto em texto branco, você usaria "#sidebar {background-color # 000; color #fff;}".

4. 

   Escolha quais tags HTML você deseja dar aparências especiais e escreva seu CSS que se refere às tags que estão especificamente dentro do id do nome da coluna. Por exemplo, para tornar vermelho todo o texto marcado com "h3" em sua barra lateral, você escreveria "#sidebar h3 {color # f00;}".

5. 

   Escolha as alterações de fonte desejadas nessa coluna em particular e coloque esse código no id do nome da coluna (como #sidebar {font-size: 0.8em; }

6. 

   Aprecie saber como formatar colunas em CSS.

Perguntas e respostas da comunidade

Como posso me preparar para o exame CSS?

Você pode estudar todas as suas anotações e praticar problemas extras semelhantes ao que fez em sala de aula. Você também pode pedir ao seu professor guias de estudo e certifique-se de estudar todos os tópicos listados neles.

Dicas

• Se a aparência do seu site mudar em navegadores diferentes, adicione uma folha de estilo mestre na parte superior do seu CSS. Essas folhas de estilo anulam as configurações padrão dos navegadores, portanto, não influenciam a aparência do seu site.
• Ignore o novo módulo de layout de várias colunas do CSS3. A função é atualmente limitada e é totalmente incompatível com o navegador mais popular, o Internet Explorer.
• Sempre defina borda, margens e preenchimento como "0" em cada tag HTML em seu site que não tenha configurações próprias. Isso impedirá aplicativos duplicados das mesmas configurações.