HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS
Colors RGB HEX HSL
Planos de fundo CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Bordas CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Margens CSS
Margins Margin Collapse
Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fontes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ícones CSS Links CSS Listas CSS Tabelas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante
Float Clear Float Examples
Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS
Navbar Vertical Navbar Horizontal Navbar
Listas suspensas de CSS Galeria de imagens CSS Sprites de imagem CSS Seletores de atributos CSS Formulários CSS Contadores CSS Layout do site CSS Unidades CSS Especificidade CSS CSS !importante Funções matemáticas CSS

CSS Avançado

Cantos arredondados CSS Imagens de borda CSS Planos de fundo CSS Cores CSS Palavras-chave de cores CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Shadow Effects Box Shadow
Efeitos de texto CSS Fontes da Web CSS Transformações CSS 2D Transformações CSS 3D Transições CSS Animações CSS Dicas de CSS Imagens de estilo CSS Reflexão de imagem CSS Ajuste de objeto CSS posição do objeto CSS Mascaramento CSS Botões CSS Paginação CSS CSS Múltiplas Colunas Interface de usuário CSS Variáveis ​​CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo a CSS

Introdução ao RWD Janela de visualização RWD Visualização de Grade RWD Consultas de mídia RWD Imagens RWD Vídeos RWD Estruturas RWD Modelos RWD

Grade CSS

Introdução à grade Contêiner de Grade Item de grade

CSS SASS

Tutorial SASS

Exemplos de CSS

Modelos CSS Exemplos de CSS teste css Exercícios de CSS Certificado CSS

Referências CSS

Referência CSS Seletores CSS Funções CSS Aural de referência CSS Fontes CSS seguras para a Web CSS Animatable Unidades CSS CSS PX-EM Converter Cores CSS Valores de cores CSS Valores padrão de CSS Suporte ao navegador CSS

Layout CSS - A propriedade de exibição

❮ Anterior Próximo ❯

A displaypropriedade é a propriedade CSS mais importante para controlar o layout.

A propriedade de exibição

A displaypropriedade especifica se/como um elemento é exibido.

Cada elemento HTML tem um valor de exibição padrão dependendo do tipo de elemento que é. O valor de exibição padrão para a maioria dos elementos é blockou inline.

Clique para mostrar o painel

This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

Elementos em nível de bloco

Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível (se estende para a esquerda e para a direita o máximo possível).

O elemento <div> é um elemento de nível de bloco.

Exemplos de elementos em nível de bloco:

  • <div>
  • <h1> - <h6>
  • <p>
  • <formulário>
  • <cabeçalho>
  • <rodapé>
  • <seção>

Elementos embutidos

Um elemento embutido não inicia em uma nova linha e só ocupa a largura necessária.

Este é um elemento <span> embutido dentro de um parágrafo.

Exemplos de elementos embutidos:

  • <span>
  • <a>
  • <img>

Mostrar nenhum;

display: none;é comumente usado com JavaScript para ocultar e mostrar elementos sem excluí-los e recriá-los. Dê uma olhada no nosso último exemplo nesta página se você quiser saber como isso pode ser alcançado.

O <script>elemento usa display: none; como padrão. 

Substituir o valor de exibição padrão

Como mencionado, cada elemento tem um valor de exibição padrão. No entanto, você pode substituir isso.

Alterar um elemento inline para um elemento de bloco, ou vice-versa, pode ser útil para fazer a página parecer de uma maneira específica e ainda seguir os padrões da web.

Um exemplo comum é criar elementos embutidos <li>para menus horizontais:

Exemplo

li {
  display: inline;
}

Nota: Definir a propriedade de exibição de um elemento altera apenas a forma como o elemento é exibido , NÃO o tipo de elemento. Portanto, um elemento inline com display: block;não pode ter outros elementos de bloco dentro dele.

O exemplo a seguir exibe elementos <span> como elementos de bloco:

Exemplo

span {
  display: block;
}

O exemplo a seguir exibe elementos <a> como elementos de bloco:

Exemplo

a {
  display: block;
}

Ocultar um elemento - display:none ou visibilidade:hidden?

display:none

Itália

visibility:hidden

floresta

Redefinir

Luzes

Ocultar um elemento pode ser feito definindo a displaypropriedade como none. O elemento ficará oculto e a página será exibida como se o elemento não estivesse lá:

Exemplo

h1.hidden {
  display: none;
}

visibility:hidden;também oculta um elemento.

No entanto, o elemento ainda ocupará o mesmo espaço de antes. O elemento ficará oculto, mas ainda afetará o layout:

Exemplo

h1.hidden {
  visibility: hidden;
}

Mais exemplos


This example demonstrates display: none; versus visibility: hidden;


This example demonstrates how to use CSS and JavaScript to show an element on click.

Test Yourself With Exercises

Exercise:

Hide the <h1> element. It should still take up the same space as before.

<style>
h1 {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Display/Visibility Properties

Property Description
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible

❮ Previous Next ❯