P>Pode esconder um elemento no CSS usando a exibição das propriedades do CSS: nenhum ou visibilidade: oculto. exibição: nenhum remove o elemento inteiro da página e o tapete afecta a disposição da página. visibilidade: oculto esconde o elemento mantendo o mesmo espaço.
Pode encontrar um cenário em que quer esconder um elemento na página web. Por exemplo, pode ter um bloco de texto que deseja manter escondido e aparecer quando um utilizador clica num botão.
CSS Hide Element
Existem duas abordagens principais para esconder um elemento no CSS, usando:
- A exibição: nenhum atributo.
- A visibilidade: atributo escondido.
A primeira abordagem pode afectar o layout da sua página web. Mas, o segundo método é, no entanto, popular.
CSS Hide Element: display
A propriedade de exibição controla a forma como um elemento é exibido numa página web. Cada elemento de um documento HTML tem um valor padrão para a propriedade de visualização, embora esse valor dependa do elemento. Para a maioria dos elementos, o valor de exibição predefinido é ou block ou inline.
Se não quiser que um elemento seja exibido num elemento, pode definir o valor da propriedade de exibição para none.
A seguinte regra de estilo oculta um elemento numa página web:
display: none;
Quando definir o valor de exibição para none, o elemento afectado desaparecerá. Isto significa que o elemento já não ocupará qualquer espaço na página web.
display: nenhum Exemplo
P>Ponhamos que estamos a conceber uma página web About Us para um clube de culinária local. Na nossa concepção inicial, adicionámos uma imagem de um bolo à página. Agora o clube quer que escondamos a imagem porque não têm a certeza sobre o desenho final.
Podemos ocultar a imagem na página utilizando o seguinte código:
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: none;}<style>
Click the 
botão no editor de código acima para ver a saída do nosso código HTML/CSS.
Definimos três elementos dentro de um HTML <div> tag. O elemento <h1> é utilizado para criar o nosso cabeçalho, e contém o texto Sobre Nós. O nosso elemento HTML <img> cria uma imagem de um bolo, que é 200px de altura e 200px de largura. O elemento <p> contém uma breve descrição do clube.
No nosso código CSS, usamos o selector “img” para seleccionar todas as etiquetas de imagem na nossa página. Esta regra define a propriedade de exibição de todas as <img> tags para nenhuma. Ou, por outras palavras, a regra de estilo esconde a nossa imagem.
p>Embora a nossa imagem esteja escondida, ela ainda existe na nossa página web. Se quisermos trazer a nossa imagem de volta, podemos ou apagar a exibição:none; estilo. Ou, podemos especificar outro estilo de exibição (como bloco ou em linha).
Poderia definir esta regra como um atributo HTML inline:
<img style=”display: none;” src=”https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80″ height=”200″ width=”200″ />
Para saber mais sobre as propriedades HTML e CSS em linha, consulte o nosso guia CSS em linha.
CSS Hide Element: visibility
A propriedade de visibilidade CSS é utilizada para controlar se um elemento é visível na página web.
Por defeito, o valor da propriedade de visibilidade é visível. Contudo, se quiser tornar uma imagem invisível, pode definir o valor da visibilidade como oculta.
A seguinte regra de estilo define a visibilidade de um elemento como oculta:
visibility: hidden;
Voltemos ao exemplo do clube de culinária de há pouco. Suponhamos que queremos esconder a imagem do bolo na nossa página web About Us. Poderíamos fazê-lo utilizando este código:
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: visibility;}<style>
Click the
botão no editor de código acima para ver a saída do nosso código HTML/CSS.
O nosso código HTML é o mesmo neste exemplo. No nosso ficheiro CSS, em vez de usarmos a propriedade de visualização, usámos a visibilidade para ocultar o nosso elemento. Como se pode ver acima, a nossa imagem foi escondida da página web.
Enquanto a nossa imagem desapareceu, existe agora um espaço entre o nosso cabeçalho e o nosso parágrafo onde a imagem teria sido colocada. Esta é uma característica da visibilidade: escondida; estilo. O espaço do elemento original é ainda mantido pela página web. Mas, o elemento é escondido.
CSS Visibilidade vs. Visualização
Os dois métodos que discutimos de esconder um elemento parecem ser os mesmos, mas há uma diferença entre os dois.
A visualização: nenhuma regra remove um elemento de um documento HTML. Enquanto o código para o elemento oculto ainda estiver presente, o elemento em si não será exibido.
A visibilidade: regra oculta, por outro lado, esconde um elemento, mas o elemento continuará a ocupar espaço na página web. Se quiser esconder um elemento mas manter o espaço desse elemento na página web, utilizando a visibilidade: escondido; a regra é melhor.
Conclusion
A exibição: nenhuma regra remove um elemento de um documento e esconde-o da vista. A visibilidade: regra oculta esconde um elemento num documento e deixa o espaço no qual o elemento teria aparecido vazio.
0 comentários