-
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]
