Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Modelos de caixas em CSS


modelos de caixasModelos de caixas
em css descritos como  box model, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model ou modelos de caixas,  detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento. Abaixo apresentamos um diagrama representando a estrutura de construção do box model:

Veja imagem de modelos de caixas ou box model em CSS:

modelos de caixas

 

A ilustração acima é teórica para os modelos de caixas que estamos estudando. Vamos explicá-la na prática tomando como base um cabeçalho e um texto. O HTML para nosso exemplo de modelos de caixas (o texto foi retirado da Declaração Universal dos Direitos Humanos e está no original em inglês) é o mostrado abaixo, portanto digite em seu editor de código que pode ser o Notepad+ + e salve como index.html:

<html>
<head>
<title>Modelos de Caixas em CSS</title> /* Título da Página*/
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* Link para chamar o arquivo estilo.css*/
<style type=”text/css”>
</head>
<body>
<h1>Article 1:</h1>
<p>All human beings are born free <br>
and equal in dignity and rights. <br>
They are endowed with reason and conscience <br>
and should act towards one another in a <br>
spirit of brotherhood</p>
</body>
</html>

Agora vamos definir alguns estilos para cores e fontes no exemplo, para isso digite o código abaixo e salve como estilo.css:

h1{
color: blue;
text-align: left;
font-size: 60px;
font-family: arial;
}

p{
color: red;
text-align: left;
font-size: 20px;
font-family: arial;
}

Lembre-se de salvar os arquivos dentro da pasta indicada pelo servidor local ou da hospedagem, depois abra o arquivo no seu navegador e o resultado deve ser igual ao que você verá ao clicar no botão visualizar logo abaixo:

 

visualizar

 

Agora vamos explicar como ficou localizado os modelos de caixas. O nosso exemplo contém dois elementos: <h1> e <p>. O box model usado para os dois elementos é mostrado na seguinte imagem, se você prestar atenção na imagem abaixo e na visualização do código perceberá que os nossos modelos de caixas tem duas caixas separadas imaginariamente por uma linha entre o título e o texto, formando uma caixa para o título e outra para o texto:

boxmodel3

 

Embora possa parecer um pouco complicado, a ilustração mostra como cada um dos elementos é contido em modelos de caixas separados ou box model. As caixas  podem ser ajustados e controlados pelo  CSS como você quiser, mas veremos mais detalhes sobre este assunto na próxima postagem.

voltar

avançar

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.