Prof. Risiberg Teixeira
email: risiberg.teixeira@ifrj.edu.br
Componentes da caixa de texto
Definindo as dimensões da caixa
Adicionando padding em volta do conteúdo
Adicionando bordas
Adicionando margens
Adicionando papeis de exibição
Definindo as dimensões do conteúdo
Área de conteúdo – local reservado para o texto;
Bordas – borda de contorno do texto;
Padding – é a área entre o conteúdo e a borda
Margin – quantidade de espaço adicionado ao lado externo da borda
Exemplo – uso de caixa de texto
1)
Crie uma página html (salve com nome conteudo.html).
2)
Insira dois parágrafos com 5 linhas cada.
3)
Coloque as tag <p> delimitando cada parágrafo.
4)
Implemente o estilo na página:
<style type="text/css">
#pa1{ width: 500px; height: 100px; background: #C2F670;
border-style: dashed; }
#pa2 { width: 150px; height: 320px; background: #C2F670; }
</style>
Overflow – ocorre quando um elemento é pequeno para comportar o conteúdo.
Exemplo:
<style type="text/css">
#pa1{ width: 200px; height: 100px;
background: #C2F670; border-style: dashed; }
</style>
Obs: teste a propriedade overflow:
1) Crie uma página html (salve com nome conteudo_caixa.html).
2) Adicione no corpo da página 4 parágrafos com 5 linhas cada.
3) Coloque a tag <p id=“caixa???”> para cada parágrafo. Obs ??? Significa número diferente.
4) Crie para cada estilo caixa??? Uma
formatação diferente de tamanho x conteúdo.
Unidades relativas
em – tamanho da fonte;
px – pixel;
Unidades absolutas
pt – ponto;
in – polegadas;
mm – milímetros;
cm – centímetro;
Padding – área livre entre borda e conteúdo
Exemplo
<style type="text/css">
Blockquote {
background-color: #FFD291;
text-align: justify;
padding-top: 1em;
padding-right: 3em;
padding-left: 3em;
padding-bottom: 1em;
}
Padding – uso abreviado
Exemplo
<style type="text/css">Blockquote {
background-color: #FFFF00;
text-align: justify;
padding: 1em 3em 3em 1em;
}
Padding: 10px 10px 10px 50%;
Padding: 100px 10px 10px 100px;
Padding: 100px 5px;
Padding: 10px 33%;
1) Crie uma página html (salve com nome espaco_conteudo.html).
2) Coloque 4 parágrafos na página. Coloque a tag <blockquote> para cada parágrafo.
3) Insira este estilo na página html:
Blockquote {
background-color: #CC6600;
text-align: justify;
padding: 15px;
border: 1px solid;
Border-style – define o estilo da borda.
Exemplo:
obs.: experimente border-style:
div{
background-color: #00CCFF;
Border-style: none; text-align: center;
width: 100px; height: 100px;
}
Border-color – define a cor da borda.
Exemplo:
obs.: experimente outras cores.
<style type="text/css">
Div {
background-color: #F2F288;
width: 100px; height: 100px;
border-style: dashed;
border-color: #0000FF;
} </style>
Crie uma página html (salve com o nome borda_caixa.html).
Adicione 3 parágrafos ao corpo dá página.
Identifique cada parágrafo com a tag <p>.
Aplique o estilo a seguir aos parágrafos:
<style type="text/css">
p { background-color: #AF0A10;
width: 400px; height: 200px;
border-style: dotted;
border-color: #00CCFF;
Margin – adiciona espaço adicional do lado externo da borda da caixa.
Exemplo:
<style type="text/css">P { margin: 4em;
border: 1px solid red;
background: #FCF2BE;
} Body {
margin: 10% 10%;
border: 1px double red;
background-color: #BBE09F;
} </style>
1)
Crie a estrutura apresentada abaixo:
2)
Crie as estruturas para as imagens seguintes:
<style type="text/css">
p{ background-color: #CC6600;
width: 200px; height: 200px;
text-align: justify;
} </style>
