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

Criar layout para sites ou blogs com CSS

criar layoutCriar layout para sites ou blogs. Na lição postagem anterior vimos o box model ou modelos de caixas. Nesta postagem veremos como controlar a apresentação de um elemento definindo as propriedades margin e padding ou seja margem e preenchimento. Para isso precisa você criar layout para o site ou seu blog.

Definindo margin de um elemento para criar layout

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos (ou às bordas do documento). Veja como fica o diagrama da lição anterior para criar laout.

criar layout

Vamos começar com um exemplo mostrando como definir margins para o documento, ou seja, para o elemento <body>. A ilustração a seguir mostra como serão as margens da página.

Digite o código abaixo em seu editor de código Notepad+ + e salve na pasta definida pelo seu servidor local. Salve o arquivo com o seguinte nome:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

Ou, adotando uma fomra resumida  ou sintaxe mais elegante:

body {
margin: 100px 40px 10px 70px;
}

As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos então, por exemplo, definir margens para todos os parágrafos <p>:

body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}

 

Definindo padding de um elemento para criar layout

Padding pode também ser entendido como “enchimento”. Isto faz sentido, porque padding não é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento ao criar layout.

Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida na CSS conforme abaixo:

h1 {
background: yellow;
}
h2 {
background: orange;
}

Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}

Vamos defenir os códigos acima da seguinte forma:

Digite o código abaixo e salve dentro da pasta definida pelo seu servidor local como estilo.css:

/* definindo as margens do layout*/

body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}

/* Definir enchimento ao criar layout:*/

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;

Agora digite o código abaixo e salve na mesma pasta do código anterior como index.html. Obs.: as inscrinções de verdes são apernas comentários das funcionalidades do código.

<html>
<head>
<title>Criar layout para sites e blogs</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> /* Primeira caixa do cabeçalho*/
<h2><p>All human beings are born free  /* Segunda caixa do Cabeçalho*/
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. </p> </h2>
</body>
</html>

Agora abra em seu navegador e deverá aparecer uma página igual a que você verá ao clicar no botão de visualizar logo abaixo:

visualizar

 

 

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.

  • I simply want to say I’m very new to blogs and absolutely enjoyed this website. Very likely I’m want to bookmark your blog . You surely come with awesome well written articles. Thanks for sharing with us your web site.

    Tradução:
    Eu simplesmente quero dizer que eu sou muito novo para blogs e absolutamente se este website. É muito provável que eu estou deseja marcar o seu blog. Você certamente vêm com impressionantes artigos bem escritos. Obrigado por compartilhar conosco o seu web site.

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.