Introdução
Bem-vindo ao tutorial sobre controle de visibilidade em CSS! Neste tutorial, vamos explorar duas das propriedades mais poderosas e frequentemente utilizadas no desenvolvimento web: display e visibility. Essas propriedades são fundamentais para qualquer desenvolvedor que deseja criar layouts dinâmicos e responsivos, permitindo o controle preciso sobre como e quando os elementos são exibidos na página.
Imagine que você está construindo um site e precisa ocultar temporariamente certos elementos, como menus, pop-ups ou mensagens de erro, sem removê-los completamente do DOM. Ou talvez você queira alternar entre diferentes modos de exibição, como transformar um botão em um bloco de informações detalhadas ao ser clicado. As propriedades display e visibility são suas ferramentas essenciais para realizar esses truques de mágica no mundo do CSS.
Neste módulo, vamos abordar:
- A Propriedade
display: Como usardisplay: none;para remover elementos da página,display: inline;para exibir elementos em linha, edisplay: block;para exibir elementos como blocos. - A Propriedade
visibility: Como usarvisibility: hidden;para ocultar elementos enquanto mantém seu espaço reservado na página. - Comparações Práticas: Exemplos detalhados que ilustram as diferenças e aplicações de
displayevisibility.
Ao final deste tutorial, você terá uma compreensão clara de como essas propriedades funcionam e como aplicá-las em seus projetos para criar interfaces de usuário mais flexíveis e interativas. Vamos começar essa jornada e desvendar os segredos do controle de visibilidade no CSS!
Propriedade display
A propriedade display do CSS é usada para modificar como um elemento é exibido. Existem três valores comumente usados: none, inline e block.
display: none;
O valor none faz com que um elemento desapareça completamente. A página será exibida como se o elemento não estivesse lá.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo de display: none;</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Este parágrafo está visível.</p> <p class="hidden">Este parágrafo está oculto e não ocupa espaço.</p> </body> </html> |
CSS (styles.css):
|
1 2 3 |
.hidden { display: none; } |
Propriedade display: inline
A propriedade display: inline faz com que um elemento seja exibido como um elemento em linha. Elementos em linha não começam e terminam com uma nova linha, o que significa que eles podem estar ao lado de outros elementos em linha. Além disso, eles só ocupam a altura e a largura necessárias para o seu conteúdo.
Exemplo Detalhado
Vamos criar um exemplo onde usamos display: inline para destacar uma parte específica de um texto dentro de um parágrafo.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo de display: inline;</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Este é um <span class="inline">elemento em linha</span> dentro de um parágrafo.</p> </body> </html> |
CSS (styles.css):
|
1 2 3 4 |
.inline { display: inline; background-color: yellow; } |
Explicação do Código
HTML
- Estrutura Básica do HTML:
<!DOCTYPE html>: Declaração do tipo de documento HTML5.<html lang="pt-BR">: Início do documento HTML, especificando que o idioma é português do Brasil.<head>: Contém metadados sobre o documento.<meta charset="UTF-8">: Define a codificação de caracteres como UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura a viewport para garantir que a página seja renderizada corretamente em dispositivos móveis.<title>Exemplo de display: inline;</title>: Define o título da página.<link rel="stylesheet" href="styles.css">: Link para o arquivo CSS externo.
- Corpo do Documento:
<body>: Contém o conteúdo visível da página.<p>: Define um parágrafo.<span class="inline">: Define um elemento em linha com a classeinline.
CSS
- Classe
.inline:display: inline;: Define o elemento como um elemento em linha.background-color: yellow;: Aplica uma cor de fundo amarela ao elemento.
Comportamento do display: inline
- Elementos em Linha: O elemento
<span>com a classeinlineserá exibido em linha com o texto ao seu redor. Isso significa que ele não iniciará uma nova linha e ocupará apenas a largura necessária para o seu conteúdo. - Estilização: A cor de fundo amarela aplicada ao
<span>destacará visualmente o texto “elemento em linha” dentro do parágrafo.
Visualização
Quando você visualizar este código em um navegador, verá o seguinte:
- O parágrafo será exibido como uma linha contínua de texto.
- A parte do texto “elemento em linha” estará destacada com um fundo amarelo, mas não haverá quebras de linha antes ou depois desse texto.
Exemplo Visual
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo de display: inline;</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Este é um <span class="inline">elemento em linha</span> dentro de um parágrafo.</p> </body> </html> |
CSS (styles.css):
|
1 2 3 4 |
.inline { display: inline; background-color: yellow; } |
Resultado no Navegador:
- Texto Completo: “Este é um elemento em linha dentro de um parágrafo.”
- Destaque: “elemento em linha” estará com fundo amarelo, mas sem quebras de linha.
Propriedade display: block;
O valor block faz com que um elemento seja exibido como um elemento de bloco. Um elemento de bloco começa e termina com uma nova linha, e sua altura e largura podem ser alteradas.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo de display: block;</title> <link rel="stylesheet" href="styles.css"> </head> <body> <span class="block">Este é um elemento de bloco.</span> <span class="block">Outro elemento de bloco.</span> </body> </html> |
CSS (styles.css):
|
1 2 3 4 5 6 |
.block { display: block; background-color: lightblue; width: 50%; margin: 10px 0; } |
Propriedade visibility
A propriedade visibility do CSS é usada para ocultar um elemento. Você faz isso escrevendo visibility: hidden;. A diferença entre visibility: hidden; e display: none; é que, no primeiro caso, o elemento está oculto, mas ainda ocupa espaço. Usar a propriedade visibility é como usar uma capa de invisibilidade. O elemento ainda está lá, mesmo que você não possa vê-lo.
visibility: hidden;
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo de visibility: hidden;</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Este parágrafo está visível.</p> <p class="invisible">Este parágrafo está oculto, mas ainda ocupa espaço.</p> </body> </html> |
CSS (styles.css):
|
1 2 3 |
.invisible { visibility: hidden; } |
Comparação Visual: visibility: hidden vs display: none
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Comparação de visibility e display</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Comparação de visibility e display</h1> <div class="container"> <div class="box visible">Box 1 (Visível)</div> <div class="box hidden">Box 2 (Oculto com visibility: hidden)</div> <div class="box none">Box 3 (Oculto com display: none)</div> <div class="box visible">Box 4 (Visível)</div> </div> </body> </html> |
CSS (styles.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
body { font-family: Arial, sans-serif; } .container { display: flex; flex-direction: column; gap: 10px; } .box { width: 200px; height: 50px; background-color: lightblue; border: 1px solid blue; text-align: center; line-height: 50px; } .hidden { visibility: hidden; } .none { display: none; } |
Explicação do Código
HTML
- Estrutura Básica do HTML:
<!DOCTYPE html>: Declaração do tipo de documento HTML5.<html lang="pt-BR">: Início do documento HTML, especificando que o idioma é português do Brasil.<head>: Contém metadados sobre o documento.<meta charset="UTF-8">: Define a codificação de caracteres como UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura a viewport para garantir que a página seja renderizada corretamente em dispositivos móveis.<title>Comparação de visibility e display</title>: Define o título da página.<link rel="stylesheet" href="styles.css">: Link para o arquivo CSS externo.
- Corpo do Documento:
<body>: Contém o conteúdo visível da página.<h1>: Define o título principal da página.<div class="container">: Define um contêiner flexível para os elementos.<div class="box visible">: Define uma caixa visível.<div class="box hidden">: Define uma caixa oculta usandovisibility: hidden.<div class="box none">: Define uma caixa oculta usandodisplay: none.<div class="box visible">: Define outra caixa visível.
CSS
- Estilos Gerais:
body: Define a fonte padrão para o corpo do documento..container: Define um contêiner flexível com direção de coluna e espaçamento entre os itens..box: Define o estilo básico para as caixas, incluindo largura, altura, cor de fundo, borda, alinhamento de texto e altura da linha.
- Estilos Específicos:
.hidden: Define a visibilidade como oculta (visibility: hidden), mantendo o espaço ocupado pelo elemento..none: Define a exibição como nenhuma (display: none), removendo o elemento do fluxo do documento.
Comportamento Visual
- Box 1 (Visível): Será exibido normalmente.
- Box 2 (Oculto com visibility: hidden): Não será visível, mas ainda ocupará espaço na página.
- Box 3 (Oculto com display: none): Não será visível e não ocupará espaço na página.
- Box 4 (Visível): Será exibido normalmente.
Espero que esta seção revisada e mais visual ajude a entender melhor as diferenças entre visibility: hidden e display: none. Se tiver mais dúvidas ou precisar de mais exemplos, sinta-se à vontade para perguntar.
