CSS: div
CSS:
div
(Elivelto Ebermam)
Uma div é basicamente uma caixa ou um contêiner em HTML. A tag
usada para inserir uma é a <div>. Ela é usada para acomodar outros
elementos. Ela é um elemento muito importante na elaboração do layout do site.
Definindo as dimensões da div (propriedades width e height)
Com o CSS podemos definir o tamanho das divs. Para isso usamos
as propriedades width para definir a largura e height para definir a altura.
Para o primeiro exemplo vamos adicionar também a propriedade background-color
para darmos uma cor para div, facilitando assim a visualização das dimensões da
div:
Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GIU3SC5WBDKE
Nesse exemplo definimos uma
regra para as divs em geral, ou seja, todas as divs terão essas propriedades.
Se quisermos regras diferentes para as divs, temos que usar classes ou ids.
div { width : 200px;
height
: 100px;
background-color: blue;
}
A regra CSS define a largura como 200
pixels e a altura como 100 pixels, além da cor de fundo como azul. É preciso
adicionar a tag <div> dentro do body também, lembrando que a tag tem
abertura e fechamento.
Agora vamos fazer um exemplo com duas divs, dessa vez, usaremos um identificador (id) para cada uma delas. A primeira será chamada de “div1” e terá a mesma regra do exemplo acima. A segunda será chamada de “div2” e terá 300 pixels de largura e 50 pixels de altura. Usaremos a cor amarela para essa div:
<html>
<head>
<style>
#div1 { width : 200px;
height
: 100px;
background-color: blue;
}
#div2 { width : 300px;
height
: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1"> </div>
<div id="div2"> </div>
</body>
</html>
Disponível
em: https://www.w3schools.com/code/tryit.asp?filename=GIUAF5FVOFSF
Notem que a segunda div
(amarela) fica abaixo da div azul. Futuramente veremos sobre posicionamento das
divs.
Adicionando elementos dentro da div
Com já foi dito, a div comporta outros elementos. Para isso temos que adicioná-los após a abertura da div e antes do fechamento da mesma. Veja um exemplo:
<html>
<head>
<style>
#div1 { width : 200px;
height
: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<h1> Título </h1>
<p> Parágrafo
da div
</p>
</div>
</body>
</html>
Disponível
em: https://www.w3schools.com/code/tryit.asp?filename=GIUBEITEU1XH
Dimensões relativas
Nos exemplos acima, a largura e altura das divs foram definidas em pixels. Porém, há outra forma de definir essas medidas: medidas percentuais. Usamos uma medida percentual em relação ao elemento em que a div está contida, nesse caso, o elemento body. Por exemplo, queremos que a largura da div seja a metade da página:
<html>
<head>
<style>
#div1 { width : 50%;
height
: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="div1"> </div>
</body>
</html>
Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GIUIMKHEKEYA
No exemplo definimos o valor de width
(largura) como 50%, ou seja, metade da largura da tela.
Mas você pode estar se questionando: mas
eu posso simplesmente calcular a metade da largura da tela e colocar o valor em
pixels. Sim, podemos fazer dessa forma também, se uma tela tem 600 pixels de
largura, podemos definir o valor de width como 300px. Mas e se eu abrir o site
em um dispositivo com tela maior, com 1280 pixels de largura? O que vai
acontecer é que a div vai parecer pequena e vai sobrar muito espaço vazio na
tela. O contrário também pode acontecer, se eu abrir em um dispositivo com uma
tela de 300 pixels por exemplo, essa div que era para ocupar a metade da tela,
ocupará a tela inteira.
Assim, devemos construir um site pensando
que ele pode ser visualizado em dispositivos com telas de tamanhos diferentes:
celulares, tablets, monitores entre outros. Isso se chama desenvolvimento
responsivo (ou design responsivo).
Propriedades min-width e max-width
Há situações em que queremos definir uma largura mínima ou
largura máxima que um elemento pode adquirir. Para isso usamos as propriedades
min-width (largura mínima) e max-width (largura máxima). Por exemplo, queremos
que a div ocupe metade da tela e que tenha no mínimo 200 píxels:
<html>
<head>
<style>
#div1 { width : 50%;
min-width : 200px;
height
: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"> </div>
</body>
</html>
Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GIUJTW5EUC7T
Dessa forma, se a largura do dispositivo for de 300 pixels por
exemplo (como na imagem), ao invés da div ficar com metade da largura da tela
(150 pixels), ela ficará com 200 pixels.
Já a propriedade max-width é o contrário da propriedade min-width, pois ela define a largura máximo que o elemento pode adquirir. Por exemplo, queremos que a div ocupe 200 pixels ou no máximo a metade da tela (50%):
<html>
<head>
<style>
#div1 { width : 200%;
max-width : 50%;
height
: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"> </div>
</body>
</html>
Disponível
em: https://www.w3schools.com/code/tryit.asp?filename=GIUKB4SJEAJE
Inserindo divs dentro de outra div
Já foi mostrado anteriormente que podemos inserir outros elementos, como títulos, parágrafos, etc. dentro de uma div. Mas é possível também inserir uma (ou mais) div dentro de outra div. Nesse caso temos que ficar atentos quando utilizamos dimensões relativas, pois a referência da div interna será a div em que ela está contida e não a página web (no caso body). Veja um exemplo:
<html>
<head>
<style>
#div_externa { width : 300px;
height
: 200px;
background-color: blue;
}
#div_interna { width : 50%;
height
: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div_externa">
<div id="div_interna"> </div>
</div>
</body>
</html>
Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GIUKPNO2YCFO
Nesse exemplo, definimos a largura da div externa (em azul)
como 300 pixels e a altura em 200 pixels. Na div interna (amarela), definimos a
largura e altura como 50%. Esses 50% são em relação ao elemento em que está
contido, e nesse caso é a div externa. Assim a div interna irá ter 150 pixels
de largura (50% de 300) e 100 pixels de altura (50% de 200).
Comentários
Postar um comentário