Как использовать CSS для сокрытия элементов веб-сайта

Одной из причин красоты нашего сайта является его красивый дизайн и различные темы WordPress, которые помогают нам повысить эту красоту. Однако, чтобы сохранить уникальность веб-сайта, многие люди настроить тему, где разработчик опускает различные вещи от страницы к странице. Например - опускание боковой панели или текстового ящика. Для этого нам необходимо иметь представление о двух конкретных свойствах CSS - видимости и отображении. С этими двумя свойствами, каждый может легко скрыть элементы страницы. И это то, что мы увидим в сегодняшнем учебнике.

Причины сокрытия элементов

Когда разработчик создает тему WordPress, он думает о предпочтениях и потребностях всех видов людей. Однако не все одинаковы, поэтому требуется настройка. Как правило, то, что люди опускают с веб-сайта является заголовок или навигационное меню.

Как правило, нам нужны такие действия, когда мы хотим удалить что-то с определенной страницы. Говоря более прямо, предположим, что вы хотите удалить обзор или рейтинг раздел из блога. Теперь, если вы удалите раздел обзора из всех параметров темы, он будет удален со всех страниц поста. Так как мы хотим удалить его с определенной страницы - мы можем просто скрыть этот элемент страницы с помощью CSS.

Ориентация на элемент, чтобы скрыть

Вы знаете, какой элемент страницы вы хотите скрыть, но то, что вы не знаете, это то, что он говорит на языке кодирования или как разработчик указал его. Мы можем легко узнать. Нажмите правой кнопкой мыши на элемент, который вы хотите скрыть, а затем выберите Inspect.

Затем перейдите в раздел Элементы на Dev Tools. Там вы можете увидеть идентификатор CSS выбранных элементов. Теперь наведите курсор мыши на код элементов, и на странице будет выделен раздел. Нажмите на правильную строку, чтобы заблокировать ваш выбор.

Теперь нам нужно переработать на CSS с помощью этого селектора.

Использование дисплея CSS

Самый простой способ скрыть любой элемент, чтобы уничтожить его. Мы можем легко сделать это через "дисплей: нет" собственности. В результате этот элемент больше не будет отображаться на этой странице. И часть, которая охватывает этот конкретный элемент, будет автоматически удалена и заполнена. Кроме того, не будет никаких проблем с отзывчивостью.

Здесь, на этом изображении, вы можете видеть, мы хотели бы удалить основной заголовок. Сначала мы нажали на идентификатор элемента, затем перейдем к панели style для корректировок CSS и добавим код, приведенный ниже.

display:none

И мы сделали с самым простым способом удалить элемент со всего веб-сайта.

Использование видимости CSS

Как и дисплей CSS, мы также можем использовать видимость CSS, чтобы скрыть любой элемент. Теоретически, они оба делают ту же работу, но на практике, здесь мы просто скрываем элемент, а не удаляя его. Видимость CSS поможет вам сделать элемент невидимым, и он будет держать пространство, отведенное для него.

visibility:hidden;

Видимость или дисплей: Какие должны быть использованы в какой ситуации?

Мы уже знаем, какой код CSS делает какую работу. Если мы хотим полностью удалить элемент со страницы, мы будем использовать Display CSS. И если мы хотим, чтобы элемент исчез с условием проведения позиции, то мы будем использовать Видимость CSS.

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

Скрыть элемент на определенной странице

Если какие-либо изменения будут внесены через то, что мы видели до сих пор, эффект будет на весь веб-сайт. Теперь мы увидим, как мы можем сделать элемент исчезают на конкретной странице. Для этого нам нужно узнать конкретный класс идентификаторов страницы. Помните, что это простой идентификационный номер страницы, а не идентификатор CSS.

Вы можете просто найти этот идентификатор, зависая мышь на странице. Здесь мы беру пост в качестве примера. Вы можете увидеть "пост-3" в прямоугольнике, отмеченном местом в ссылке, и это идентификатор Страницы для страницы "Политика конфиденциальности" веб-сайта.

Вы также можете проверить этот идентификатор с любой страницы редактирования или предварительного просмотра.

Теперь мы добавим дисплей CSS на эту страницу, чтобы скрыть боковую панель. Мы можем сделать это от Тема Настраиватель.

.page-id-3 div#sidebar {
display:none;
}

Код, написанный выше, просто удалить боковую панель с конкретной страницы, где код, написанный ниже будет удалить элемент отовсюду.

dev#sidebar {
visibility:hidden;
}

Заключительные слова

В сегодняшнем учебнике, мы хотим объяснить разницу между дисплеем и видимостью свойств CSS и какое свойство вы должны использовать при настройке вашего сайта WordPress. Мы надеемся, что вы найдете этот блог полезным. Если да, то доля будет феноменальной!