128 Shares 5101 views

Usando as propriedades do CSS "display: none"

Cascading Style Sheets (CSS) permitem que você organize a aparência e design da página web. Uma das propriedades mais vulgarmente usada e os seus valores é "display: nenhum".

Determinação das propriedades

A propriedade em si é um multi-purpose e determina o tipo de elemento de exibição no documento. Dependendo dos valores específicos página seleccionada pode ser exibida a parte do bloco, de forma linear, como uma lista de itens como parte da mesa, e assim por diante. D. Assim, devido à propriedade de "display", pode alterar o tipo do bloco no documento.

Quanto ao "valor da propriedade display: none" pacote, ele permite que você excluir um item ou um bloco do documento. No mesmo local sob a peça de página não é reservado, o que significa que ele cai fora do fluxo. Todos os elementos que estão além do "controle remoto", simplesmente não vê-lo e ignorar o tamanho ea posição da unidade. Para retornar um objeto escondido, você deve referir-se ao documento através de scripts que simplesmente alterar o valor das propriedades para o formato desejado. Quando isso acontece formatar automaticamente a página com o novo objeto nele.

A diferença entre a propriedades de "display" e "visibilidade"

Apesar do fato de que, como resultado de ambas as propriedades para ocultar itens do usuário, seu princípio de funcionamento é bastante diferente. Como já foi mencionado acima, o parâmetro "display: none" remove o elemento do documento. O bloco cai para fora da página, portanto, não ocorrendo nele. Neste caso, o objeto ainda permanece no código HTML.

Por sua vez, a propriedade "visibility: hidden" esconde o elemento do usuário, mas não removê-lo do modelo de documento. Assim, a página é reservado um lugar neste bloco. Ou seja, o fluxo de documentos vai aceitar e considerar a localização eo tamanho de um elemento com propriedade "visibility: hidden" exatamente da mesma maneira sem ele.

Esta diferença é a estrutura de organização do documento essas duas propriedades faz com que seja possível alcançar o resultado desejado para a exibição da página correta.

Usando CSS – display: none

documento Internet existem várias maneiras de determinar as propriedades do elemento. O primeiro display: none podem ser prescritos em um arquivo separado para Cascading Style Sheets. Este método é o mais avançado e o melhor, pois permite que você faça todos os seletores, classes e suas propriedades em um documento separado. Esse modelo permite que você encontre rapidamente e modificar as configurações de página.

O cabeçalho do documento

A segunda modalidade é definir estilos entre o título das marcas de estilo do documento. A eficácia deste método é muito menos. Recomenda-se aplicar apenas em casos extremos, como na presença de um grande número de estilos de leitura de páginas da web designer de se deteriorar significativamente. E isso leva a erros e retardar o processo de desenvolvimento de um documento web. Esta abordagem só é recomendada no caso de adicionar a tag para um pequeno número de estilos ou instrumento de depuração.

Tenha em mente que, se esta forma de organizar estilos no documento é inferior a uma importação de folha de estilo separada, as propriedades de sobreposição serão substituídos por aqueles que estão no corpo do html documento.

Bloco div. Display: none

Outra forma é adicionar diretamente para a tag "style = display: none;" elemento de código. Esta abordagem é muitas vezes usado quando se trabalha com vários quadros, cuja finalidade – reduzir o número de recursos diretamente na folha de estilo e exibi-los no documento web. Além disso, tal registro é muitas vezes quando assistindo "inspetores de código" página. É importante lembrar que usando essa abordagem, você pode alterar a propriedade e valor prescrito na folha de estilo. Então você deve ser cuidadoso, como resultado, você pode criar problemas adicionais para si e passar algum tempo em encontrar e corrigir erros no código da página.

JavaScript

Também vale a pena mencionar a possibilidade de novas alterações nesta propriedade. Já não se refere à folha de estilo e código HTML e uma linguagem de script. Portanto, para aplicá-la é necessário ter pelo menos algum conhecimento nesta área. Para remover o elemento do fluxo de documentos, você pode usar uma propriedade JavaScript "display = nenhum". Ele permite que você altere a estrutura do documento quando um determinado evento. Além disso, através do uso de scripts para dinamicamente ( "on the fly") para alterar as propriedades de parâmetro e, assim, atualizar a exibição da página sem ter que recarregar. Esta abordagem é útil quando organizar menus drop-down, janelas modais e formas.

SEO

No campo da otimização de conteúdo web para os motores de busca, existem muitas superstições e incertezas. Assim, muitos SEOs novatos considerar o uso das propriedades "Display" maus modos. Eles explicar isso pelo fato de que os motores de busca vendo o conteúdo oculto, começar a considerar a página como spam. Em suas palavras, há alguma lógica, mas não muito mais. Neste ponto no tempo a propriedade de objetos ocultos usado muitas vezes suficiente para formatar o menu drop-down e ocultar as partes do documento, o que não é actualmente de interesse para o usuário (por exemplo, quando você seleciona uma categoria de outras informações é excluído). Esta abordagem utiliza um suficientemente poderosos portais de Internet (um deles – o "Amazon"). Assim, o mecanismo de busca não pode considerar o uso da propriedade "display: none" spam.

Outra coisa, quando esta abordagem é usado para esconder palavras e caracteres individuais. Apesar do fato de que agora o mecanismo de busca ainda não têm reconhecimento perfeito de tais algoritmos de "spam" nos documentos, a probabilidade de que a página será travado nesta, é bastante elevada. Portanto, é recomendável usar o "display" propriedade é estritamente para a sua finalidade – para alterar o tipo de bloco ou temporariamente esconder dos olhos do usuário.