Usamos DIVs geralmente para
dividir nossa página
em caixas diferentes, redimensioná-las
e movê-las.
Isso ajuda o designer decidir
como quer o layout
se ficou como desejado.
Por hora, vamos ignorar o objetivo
de deixar a página bonita
e apenas ver como mudar as coisas.
Vamos redimensionar a DIV "official-info"
Por padrão, uma div tem 100% da
largura disponível
Por isso a caixa cinza usa toda a página.
Mas talvez eu queira somente
300 px.
Vou adicionar outra propriedade CSS aqui:
width: 300px;
Funcionou, mas vamos fazer
algo diferente.
Vamos usar largura percentual,
e dizer que esta div terá 70%
da largura disponível.
Agora o texto ficará dentro
desta caixa pequena,
e a DIV ficou mais alta.
Podemos limitar também a altura da caixa
com a propriedade height:
height: 180px;
Algo interessante aconteceu.
A caixa cinza ficou com 180 pixels,
Mas o texto passou
o limite da caixa cinza.
Por que isso aconteceu?
Por causa da propriedade
chamada "overflow"
O valor padrão para 'overflow'
é 'visible',
fazendo com que o elemento redimensione,
mas o conteúdo passe por fora dele,
ficando meio estranho.
Quais opções temos para overflow?
Bem, podemos tentar 'hidden'.
Isso cortou o conteúdo,
limitando ele na borda
Que não é bem o que queremos,
porque nossos usuários não
conseguirão ler toda informação
Nós podemos também tentar 'auto',
que diz ao navegador para adicionar
barra de rolagem se necessário
Agora eu posso rolar o texto dentro
da caixa e vê-lo completo
Podemos também ser mais específicos:
definindo rolagem para cada direção.
Por exemplo, se quisermos
rolar na direção y,
para cima e para baixo,
apenas colocamos:
overflow-y: auto;
mas então, limitá-lo na direção x,
podemos colocar:
overflow-x: hidden;
Sempre tenha cuidado ao usar overflow,
porque rolagens podem ser irritantes
para o usuário.
Especialmente quando uma dentro de outra
se puder, evite-as.
Vamos voltar agora para largura e altura
Podemos usar largura e altura
para todos os tipos de elementos,
como nossas imagens.
Agora que você conhece CSS, sabe que pode
usar as propriedades width/height
em vez de atributos width e height.
Vamos aumentar um pouco essa imagem
de gato adicionando um id, "cute-cat"
deletando o atributo,
e criando nossa regra de estilo, digamos:
#cute-cat {
width:120px;
Assim como antes nos atributos,
é melhor somente especificar
largura ou altura,
e deixar o navegador calcular o melhor
valor para a outra dimensão.
Do contrário,
teremos um gatinho esmagado!
Bem, isso parece impressionante,
vamos tentar por um segundo:
height: 40px;
gato esmagado!!
Ok, ok, me diverti aqui.
Serei uma desenvolvedora web legal
e vou deletar isso agora.
Quanto mais conhecimento você tem,
maiores serão suas responsabilidades.
Só porque você pode adicionar
barra de rolagem em tudo
e esmagar todos os gatinhos
não quer dizer que você vai fazer.
Geralmente você está fazendo
sites para outras pessoas usarem,
e o que você acha interessante pode
ser difícil para outra pessoa usar.
Mas se você fizer coisas legais aqui no
Khan Academy, eu não vou me importar.
Legendado por [Paulo Trentin]
Revisado por [Cainã Perri]