Met behulp van de eigenschappen van de CSS "display: none"

Cascading Style Sheets (CSS) kunt u het uiterlijk en het ontwerp van de webpagina te organiseren. Een van de meest gebruikte eigenschappen en haar waarden is "display: none".

Bepalen van de eigenschappen

De accommodatie zelf is een veelzijdig en bepaalt het type van het weergeefelement in het document. Afhankelijk van de specifieke waarden gekozen pagina kan worden moet het gedeelte, lineair, als een lijst met items als onderdeel van de tafel, enz. D. Dus, als gevolg van de eigenschap van de "weergave", kan het type van het blok in het document te veranderen.

Wat betreft de bundel "waarde van de eigenschap display: none", staat het u om een item of een blok van het document te verwijderen. Op dezelfde plaats onder het stuk pagina is niet gereserveerd, waardoor het valt uit de stroom. Alle elementen die buiten het "remote", gewoon niet zien en negeren de grootte en de positie van de eenheid. Om een verborgen object te retourneren, moet u via scripts die gewoon de waarde van de eigenschappen wijzigen in het gewenste formaat wordt verwezen naar het document. Wanneer dit gebeurt automatisch de pagina te formatteren met het nieuwe object op.

Het verschil tussen de eigenschappen "scherm" en "zichtbaarheid"

Ondanks het feit dat als gevolg van beide eigenschappen om items uit de gebruiker te verbergen, hun principe van de werking is heel anders. Zoals hierboven reeds vermeld, de parameter "display: none" verwijdert het element uit het document. Het blok valt uit de pagina, dus niet plaats in het. In dit geval is het voorwerp nog steeds in de HTML-code.

Op zijn beurt, de eigenschap "visibility: hidden" verbergt het element van de gebruiker, maar is het niet verwijderen uit het document model. Zo wordt de pagina een plaats gereserveerd in dit blok. Dat wil zeggen, de documentstroom zal accepteren en rekening houden met de locatie en de grootte van een element met onroerend goed "visibility: hidden" op precies dezelfde manier zonder.

Dit verschil is de organisatie structuur van het document deze twee eigenschappen maakt het mogelijk om het gewenste resultaat voor de juiste pagina weergave te bereiken.

Met behulp van CSS - display: none

Internet document zijn er verschillende manieren om de eigenschappen van het element te bepalen. De eerste display: none kan worden voorgeschreven in een apart bestand voor Cascading Style Sheets. Deze methode is de meest geavanceerde en de beste, omdat het stelt u in staat om alle selectors, klassen en hun eigenschappen maken in een apart document. Een dergelijk model stelt u in staat om snel te vinden en te wijzigen pagina-instellingen.

Het document header

De tweede uitvoering is om stijlen onder de titel van het document stijl labels te definiëren. De effectiviteit van deze methode is veel minder. Het wordt aanbevolen alleen in extreme gevallen toe te passen, zoals in de aanwezigheid van een groot aantal stijlen leesbaarheid van webpagina's designer aanzienlijk verslechtert. En dit leidt tot fouten en vertragen het proces van het ontwikkelen van een web-document. Deze aanpak wordt alleen aanbevolen in het geval van het toevoegen van het label om een klein aantal stijlen of debugging instrument.

Houd er rekening mee dat als deze manier van organiseren stijlen in het document minder dan een apart stylesheet importeren is, zal de overlappende eigenschappen worden overschreven door degenen die in het lichaam van het document html.

Block div. Display: none

Een andere manier is om rechtstreeks aan de tag toe te voegen "style = display: none;" code-element. Deze aanpak wordt vaak gebruikt bij het werken met verschillende referentiekaders, waarvan het doel - het verminderen van het aantal functies direct in de stylesheet en ze weer te geven in het web document. Bovendien is een dergelijke een record is vaak bij het kijken naar "code inspecteurs" pagina. Het is belangrijk te onthouden dat het gebruik van deze aanpak, kunt u de eigenschap en waarde in de stylesheet voorgeschreven veranderen. Dus je moet voorzichtig zijn, als gevolg daarvan, kunt u extra problemen voor zichzelf te creëren en wat tijd besteden aan het vinden en oplossen van fouten in de pagina code.

JavaScript

Het is ook het vermelden waard de mogelijkheid van verdere veranderingen in deze woning. Het verwijst niet langer naar het stylesheet en html-code en een scripttaal. Daarom, om toe te passen is het noodzakelijk om op zijn minst enige kennis op dit gebied. Om het element uit het document stroom verwijderen, kunt u een JavaScript-eigenschap "scherm = none" gebruiken. Hiermee kunt u de structuur te veranderen van het document wanneer een bepaalde gebeurtenis. Ook door het gebruik van scripts om dynamisch ( "on the fly") om de parameter eigenschappen veranderen en daardoor vernieuw de weergave van de pagina, zonder te hoeven herladen. Deze benadering is handig bij het organiseren van drop-down menu's, modale ramen en vormen.

SEO

Op het gebied van het optimaliseren van web content voor zoekmachines, zijn er veel bijgeloof en onzekerheden. Dus, veel beginnende SEO's beschouwen het gebruik van de eigenschappen "scherm" slechte manieren. Zij verklaren dit door het feit dat zoekmachines het zien van de verborgen inhoud, beginnen om de pagina te beschouwen als spam. In hun woorden, is er enige logica, maar niet veel anders. Op dit moment eigendom van verborgen objecten die worden gebruikt vaak genoeg om het drop-down menu de delen van het document, dat is momenteel niet van belang is voor de gebruiker te formatteren en te verbergen (bijvoorbeeld wanneer u een categorie van andere informatie te selecteren wordt verwijderd). Deze aanpak maakt gebruik van een voldoende krachtig Internet portals (een van hen - de "Amazon"). Zo, de spiders van zoekmachines kan geen rekening met het gebruik van eigendom "display: none" spam.

Een ander ding, wanneer deze benadering wordt gebruikt om individuele woorden en tekens te verbergen. Ondanks het feit dat nu de spiders van zoekmachines hebben nog niet perfect erkenning van dergelijke "spam" algoritmen in de documenten, de kans dat pagina zal worden gevangen in deze, is vrij hoog. Daarom wordt aangeraden om de eigenschap "scherm" te gebruiken is strikt voor het beoogde doel - om het type blok te wijzigen of tijdelijk verbergen voor de ogen van de gebruiker.