Използване на свойството CSS `display: none`

Каскадните стилови листове (CSS) ви позволяват да организирате външния вид и дизайна на интернет страницата. Един от най-често използваните свойства и техните стойности е "display: none".

Определение на собствеността

Самият собственост е многофункционален и определя вида на елемента, който се показва в документа. В зависимост от избраната стойност, определена част от страницата може да се показва блокирано по ред, линейно, като елементи от списъка, като част от таблица и т.н. Така благодарение на свойството "показване" можете да промените типа на блока в документа.

Що се отнася до пакета "Показване на собственост-стойност: няма", той ви позволява да премахнете елемент или блок от документа. В този случай пространството за дадено парче от страницата не е запазено, т.е. излиза от потока. Всички елементи, които стоят зад "дистанционното" просто не го виждат и игнорират размера и позицията на такъв блок. За да върнете скрит обект, трябва да препратите към документа чрез скриптове, които просто променят стойността на свойството до желания формат. Това автоматично ще форматира страницата, като вземе предвид новия обект върху нея.

Разликата между свойствата "показване" и "видимост"

Въпреки факта, че в крайна сметка двете свойства скриват елемента от потребителя, техният принцип на работа е значително различен. Както споменахме по-горе, параметърът "display: none" напълно премахва елемента от документа. Блокът излиза от страницата, като по този начин не заема място в нея. В този случай самият обект остава в HTML кода.

На свой ред собствеността "видимост: скрита" скрива елемента от потребителя, но не го премахва от документа. По този начин на страницата има резервирано място за този блок. Тоест потокът от документи ще възприеме и вземе предвид местоположението и размерите на елемента с характеристиката "видимост: скрита" точно както без него.

Тази разлика в организацията на структурата на документа с тези две свойства ви позволява да постигнете необходимия резултат за правилното показване на страницата.

Използване на CSS - дисплей: няма

Интернет документът ви позволява да използвате няколко опции, за да определите свойството на даден елемент. На първо място дисплей: никой не може да бъде регистриран в отделен файл с каскадни стилови листа. Този метод е най-усъвършенстван и правилен, тъй като ви позволява да преобразувате всички селектори, класове и техните свойства в отделен документ. Този модел прави възможно много бързо да се намерят и променят параметрите на страницата.

В заглавието на документа

Втората опция е да дефинирате стиловете в заглавката на документа между стиловите маркери. Ефективността на този метод е много по-малка. Препоръчва се да се използва само в екстремни случаи, тъй като при наличието на голям брой стилове четливостта на страницата от уеб дизайнера се влошава значително. Това води до грешки и забавя процеса на разработване на интернет документ. Този подход се препоръчва само ако добавите малък брой стилове към този маркер или отстраняване на грешки в даден документ.

Трябва да се помни, че ако този начин на организиране на стиловете се намира в документа по-долу, отколкото при импортирането на отделен стилов лист, тогава пресичащите се свойства ще бъдат пренаписани от онези, които са в тялото на html документа.

Блок раздел. Дисплей: няма

Друг начин е да добавите директно към елемента на кодовия елемент "style = display: none;". Този подход често се използва при работа с различни рамки, чиято цел е да се намали броят на имотите директно в листа стил и да се покаже в самия интернет документ. Освен това, такъв запис често се случва при гледане на страницата "код инспектор". Важно е да запомните, че при използването на този подход можете да промените свойството и неговата стойност, които са посочени в стиловия лист. Следователно, трябва да внимавате, в резултат на което можете да създадете допълнителни проблеми за себе си и да прекарате известно време в търсене и коригиране на грешки в кода на страницата.

jаvascript

Заслужава да се отбележи и допълнителната възможност за промяна на тази собственост. Не се отнася за стиловия лист и HTML кода, а за езика на скриптовете. Ето защо за неговото прилагане е необходимо да има поне някои познания в тази област. За да премахнете елемент от потока от документи, можете да използвате свойството jаvascript "display = none". Той ви позволява да промените структурата на документ, когато възникне определено събитие. Също така, благодарение на използването на скриптове, можете динамично ("в движение") да промените параметъра на свойствата и по този начин да актуализирате изгледа на страницата, без да трябва да го рестартирате. Този подход е полезен при организирането на падащи менюта, модални прозорци и формуляри.

SEO

В областта на оптимизирането на уеб съдържание за търсачките има много суеверия и неясни точки. Така че, много начинаещи SEOShniki считат използването на "дисплей" собственост лош начин. Те обясняват това с факта, че търсещите машини, виждайки скритото съдържание, започват да считат страницата за спам. По думите им има дял от логиката, но нищо повече. В този момент собствеността на скриване на обект се използва достатъчно често, за да форматирате падащите менюта и да скриете части от документа, които понастоящем не са интересни за потребителя (например ако е избрана една категория, информацията за другата е изтрита). Този подход се използва от доста мощни интернет портали (един от тях е "Amazon"). По този начин, търсене на роботи не може да обмисли използването на "Показване: никоя" собственост като спам.

Друго нещо е, когато този подход се използва за скриване на отделни думи и символи. Въпреки факта, че сега търсещите роботи все още нямат перфектни алгоритми за разпознаване на такъв "спам" в документите, вероятността страницата да бъде заловен за това е доста висока. Ето защо се препоръчва използването на "дисплей" собственост стриктно за целта - да се промени типа на блока или временно да се скрие от очите на потребителя.