-
CSS - Fundamentos Básicos
-
Lecture 1CSS – Tutorial
-
Lecture 2CSS – Introdução
-
Lecture 3CSS – Sintaxe
-
Lecture 4CSS – Unidades de medida
-
Lecture 5CSS – Cores
-
Lecture 6CSS – Backgrounds
-
Lecture 7CSS – Fonts
-
Lecture 8CSS – Text
-
Lecture 9CSS – Usando imagens
-
Lecture 10CSS – Links
-
Lecture 11CSS – Tabelas
-
Lecture 12CSS – Bordas
-
Lecture 13CSS – Listas
-
Lecture 14CSS – Margins
-
Lecture 15CSS – Paddings
-
Lecture 16CSS – Cursores
-
Lecture 17CSS – barras de rolagem
-
Lecture 18CSS – Dimensão
-
Lecture 19CSS – Outlines
-
CSS – barras de rolagem
Pode haver um caso em que o conteúdo de um elemento seja maior do que a quantidade de espaço alocado para ele. Por exemplo, as propriedades de largura e altura fornecidas não permitem espaço suficiente para acomodar o conteúdo do elemento.
CSS fornece uma propriedade chamada overflow que diz ao navegador o que fazer se o conteúdo da caixa for maior do que a própria caixa. Esta propriedade pode assumir um dos seguintes valores:
| Sr.No. | Value & Description |
|---|---|
| 1 | visible
Permite que o conteúdo ultrapasse as bordas do elemento que o contém. |
| 2 | hidden
O conteúdo do elemento aninhado é simplesmente cortado na borda do elemento que o contém e nenhuma barra de rolagem fica visível. |
| 3 | scroll
O tamanho do elemento que o contém não muda, mas as barras de rolagem são adicionadas para permitir que o usuário role para ver o conteúdo. |
| 4 | auto
O objetivo é o mesmo que rolar, mas a barra de rolagem será exibida apenas se o conteúdo transbordar. |
Aqui está um exemplo:
<html> <head> <style type = "text/css"> .scroll { display:block; border: 1px solid red; padding:5px; margin-top:5px; width:300px; height:50px; overflow:scroll; } .auto { display:block; border: 1px solid red; padding:5px; margin-top:5px; width:300px; height:50px; overflow:auto; } </style> </head> <body> <p>Example of scroll value:</p> <div class = "scroll"> I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div> <br /> <p>Example of auto value:</p> <div class = "auto"> I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div> </body> </html>