Jose Hamizaki
Designer Grafico
Qua 30 Jan 2013, 8:04 am | |
Até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos com que trabalhamos. Nesta lição veremos como é fácil atribuir uma altura e uma largura para um elemento.
width
height
Atribuindo largura [width]
A propriedade width destina-se a definir a largura de um elemento.
O exemplo a seguir constrói um box dentro do qual podemos digitar um texto:
Exemplo
Atribuindo altura [height]
No exemplo acima a altura será determinada pelo conteúdo inserido no box. Você pode definir a altura de um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a 500px:
Exemplo
Sumário
Nas Lições9, 10, 11 e 12 você aprendeu os fundamentos do box model em CSS. Como podemos notar o box model fornece uma série de novas opções de estilização. Até agora, você deve ter usado tabelas para criar seus layouts, porém com CSS e o box model você, a partir de agora, estará capacitado a criar layouts mais elegantes, precisos e em conformidade.
width
height
Atribuindo largura [width]
A propriedade width destina-se a definir a largura de um elemento.
O exemplo a seguir constrói um box dentro do qual podemos digitar um texto:
- Código:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Exemplo
Atribuindo altura [height]
No exemplo acima a altura será determinada pelo conteúdo inserido no box. Você pode definir a altura de um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a 500px:
- Código:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Exemplo
Sumário
Nas Lições9, 10, 11 e 12 você aprendeu os fundamentos do box model em CSS. Como podemos notar o box model fornece uma série de novas opções de estilização. Até agora, você deve ter usado tabelas para criar seus layouts, porém com CSS e o box model você, a partir de agora, estará capacitado a criar layouts mais elegantes, precisos e em conformidade.