tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Layout - A propriedade de exibição


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


A propriedade de exibição

A display propriedade 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 é block ou inline .

Clique para mostrar o painel

Este painel contém um <div> elemento, que está oculta por padrão ( display: none ).

Ele é denominado com CSS, e usamos JavaScript para mostrá-lo (alterá-lo para ( display: block ).


Elementos em nível de bloco

Um elemento em nível de bloco começa sempre em uma nova linha e ocupa toda a largura disponível (estende-se à esquerda e à direita o mais longe que puder).

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

Exemplos de elementos em nível de bloco:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

inline Elements

Um elemento inline não iniciar em uma nova linha e só ocupa tanto largura como necessário.

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

Exemplos de elementos em linha:

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

Display: none;

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

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


Substituir a indicação do valor padrão

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

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

Um exemplo comum está fazendo em linha <li> elementos para menus horizontais:

Exemplo

li {
    display: inline;
}
Tente você mesmo "
NotaNota: Definir a propriedade de um elemento de exibição só muda a forma como o elemento é exibido, não o tipo de elemento que é.Assim, um elemento inline com display: block; não é permitido ter outros elementos de bloco dentro dela.

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

Exemplo

span {
    display: block;
}
Tente você mesmo "

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

Escondendo um elemento pode ser feito definindo a display propriedade para none . O elemento será escondido, e a página será exibido como se o elemento não está lá:

Exemplo

h1.hidden {
    display: none;
}
Tente você mesmo "

visibility:hidden; também esconde um elemento.

No entanto, o elemento ainda vai ocupar o mesmo espaço que antes. O elemento será escondido, mas ainda afetam o layout:

Exemplo

h1.hidden {
    visibility: hidden;
}
Tente você mesmo "

Exemplos

mais Exemplos

display: none; contra visibility: hidden;
Este exemplo demonstra display: none; contra visibility: hidden;

Usando CSS juntamente com JavaScript para mostrar o conteúdo
Este exemplo demonstra como usar CSS e JavaScript para mostrar um elemento com um clique.


Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»


CSS Monitor / Propriedades Visibilidade

Propriedade Descrição
display Especifica como um elemento deve ser exibido
visibility Especifica se um elemento deve ser visível