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

Altura e Largura de elementos em CSS

altura e larguraAltura e largura, até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos com que trabalhamos. Nesta aula veremos como é fácil atribuir uma altura e largura para um elemento usando a CSS. As vezes precisamos alterar a altura e largura de uma imagem em nosso código HTML, para não ter que editar uma imagem, foto ou objeto a ser usado.

Os códigos usados para altura e largura são  [width] e [height]

A propriedade width destina-se a definir a largura de um elemento, mesmo que este tenha uma largura maior ou menor do que o valor definido, com este recurso é possível mudar o tamanho sem precisar editar o objeto, criando novas dimensões de altura e largura.

O exemplo a seguir constrói um box  ou uma caixa, onde foi definido a largura e dentro do qual podemos digitar um texto qualquer:

div {
width: 200px;
border: 1px solid black;
background: orange;
}

No exemplo acima a altura será determinada pelo conteúdo inserido no box ou caixa automaticamente. Mas você pode definir a largura de um elemento com a propriedade height. Como exemplo, vamos usar a altura do box anterior igual a 500px e definir uma largura de 200px para nossa nova altura e largura deste objeto:

div {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

 

Agora vamos usar os dois códigos acima que já estão definidos as altura e largura para visualizar o texto usado na postagem anterior.

Para praticar, digite os códigos usando um editor de código HTML, eu recomendo Notepad+ + e salve os arquivos dentro da pasta indicada pelo seu servidor, caso você tenha uma hospedagem você poderá usar um domínio próprio para testar.

Digite o código abaixo, e disse para digitar porque se você copiar, não conseguirá praticar. Salve o código em um arquivo como estilo.css:

div {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

 

Agora digite o código abaixo e salve como index.html na mesma pasta que você salvou o código anterior:

 

 

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title> /* Título da Página*/
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* Chamar arquivo estilo.css */
</head>
<body>
<h1>Article 1:</h1>
<div>
All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.
</div>
</html>

 

Agora clique no botão abaixo para visualizar a altura e largura deste elemento, verifique se você consegue ter o mesmo resultado após abrir os seus arquivos no seu navegador:

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 all new to weblog and truly loved this web page. Very likely I’m want to bookmark your blog . You certainly come with amazing stories. Appreciate it for revealing your web site.

    Tradução:

    Eu simplesmente quero dizer que eu sou tudo novo para weblog e verdadeiramente amou desta página web. É muito provável que eu estou deseja marcar o seu blog. Você certamente vêm com histórias incríveis. Apreciá-lo para revelar 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.