Med hjälp av egenskaperna hos CSS "display: none"

Cascading Style Sheets (CSS) kan du organisera utseende och utformning av webbsidan. En av de vanligaste egenskaperna och dess värden är "display: none".

Bestämning av egenskaper

Egenskapen själv är ett mångsidigt och bestämmer typen av displayelementet i dokumentet. Beroende på specifika värden vald sida kan visas blockpartiet, linjärt, som en lista med objekt som en del av tabellen, och så vidare. D. Således, på grund av egendom "display", kan ändra typen av blocket i dokumentet.

När det gäller "värdet på fastigheten display: none" bunt, och hjälper dig att ta bort ett objekt eller ett block av dokumentet. På samma plats under bit sidan inte reserveras, vilket betyder att det faller ut av strömmen. Alla element som ligger utanför "remote", helt enkelt inte se det och ignorera storlek och position på enheten. För att återgå ett dolt föremål, måste du hänvisa till dokumentet via skript som helt enkelt ändra värdet på fastigheterna till önskat format. När detta sker automatiskt formatera text med det nya objektet på den.

Skillnaden mellan egenskaper "display" och "synlighet"

Trots det faktum att som ett resultat av båda egenskaperna att dölja objekt från användaren, är deras funktionsprincip helt annorlunda. Som redan nämnts ovan, parametern "display: none" tar bort elementet från dokumentet. Blocket faller ut på sidan, vilket inte sker i den. I detta fall förblir objektet fortfarande i HTML-kod.

I sin tur fastigheten "visibility: hidden" döljer elementet från användaren, men tar inte bort det från dokumentet modell. Således sidan reserverat en plats i detta block. Det vill säga, dokumentflödet kommer att acceptera och överväga placering och storlek av ett element med egendom "visibility: hidden" exakt samma sätt utan den.

Denna skillnad är organisationsstruktur i dokumentet dessa två egenskaper gör det möjligt att uppnå det önskade resultatet för rätt sida display.

Använda CSS - display: none

Internet dokument finns det flera sätt att bestämma egenskaperna hos elementet. Den första display: none kan förskrivas i en separat fil för Cascading Style Sheets. Denna metod är den mest avancerade och det bästa, eftersom det tillåter dig att göra alla väljare, klasser och deras egenskaper i ett separat dokument. En sådan modell kan du snabbt hitta och ändra sidinställningarna.

Dokumenthuvudet

Det andra utförandet är att definiera stilar bland titeln dokumentet stil taggar. Effekten av denna metod är mycket mindre. Det rekommenderas att endast gälla i extrema fall, som i närvaro av ett stort antal stilar läsbarhet av webbsidor designer försämras avsevärt. Och detta leder till fel och bromsa processen att utveckla ett webbdokument. Detta tillvägagångssätt rekommenderas endast när det gäller att lägga till taggen till ett litet antal stilar eller felsökning instrument.

Tänk på att om detta sätt att organisera stilar i dokumentet är mindre än en separat importformatmall kommer de överlappande egenskaper skrivas över av de som är i kroppen av dokumentet html.

Block div. Display: none

Ett annat sätt är att lägga direkt till taggen "style = display: none;" code element. Denna metod används ofta när man arbetar med olika ramar, vars syfte - att minska antalet funktioner direkt i stylesheet och visa dem i webbdokumentet. Dessutom är en sådan skiva ofta när du tittar på "code inspektörer" sida. Det är viktigt att komma ihåg att använda denna metod kan du ändra egenskapen och värde som föreskrivs i formatmallen. Så du bör vara försiktig, som ett resultat, kan du skapa ytterligare problem för sig själva och spendera lite tid på att hitta och åtgärda fel på sidan koden.

JavaScript

Det är också värt att nämna möjligheten att ytterligare ändringar i den här egenskapen. Den hänvisar inte längre till stylesheet och html-kod och ett skriptspråk. Därför att tillämpa är det nödvändigt att ha åtminstone viss kunskap inom detta område. För att avlägsna elementet från dokumentflödet, kan du använda en JavaScript egendom "display = none". Det gör att du kan ändra strukturen i dokumentet när en viss händelse. Även med hjälp av skript för att dynamiskt ( "on the fly") för att ändra parameteregenskaperna och därmed uppdatera synen på sidan utan att behöva ladda om. Detta tillvägagångssätt är användbart när organisera listmenyer, modala fönster och former.

SEO

Inom området för att optimera webbinnehåll för sökmotorer, det finns många vidskepelser och osäkerheter. Så många oerfarna sökmotoroptimerare anser att användningen av fastigheterna "display" dåliga uppförande. De förklarar detta genom det faktum att sökmotorer ser det dolda innehållet, börjar betrakta sidan som spam. I deras ord, det finns en viss logik, men inte mycket annat. Vid denna tidpunkt tillhör gömda föremål används tillräckligt ofta för att formatera rullgardinsmenyn och dölja delar av dokumentet, som för närvarande inte är av intresse för användaren (till exempel när du väljer en kategori av annan information raderas). Detta tillvägagångssätt använder en tillräckligt kraftfull Internetportaler (en av dem - "Amazon"). Således sökrobotar kan inte överväga att använda egendom "display: none" spam.

En annan sak, när denna metod används för att dölja enskilda ord och tecken. Trots att nu gör sökrobotar ännu inte perfekt erkännande av sådana "spam" algoritmer i dokumenten, sannolikheten för att sidan kommer att fångas i detta är ganska hög. Därför är det rekommenderat att använda egenskapen "display" är enbart för avsett ändamål - för att ändra typen av block eller tillfälligt dölja ur ögonen på användaren.