с display: none не ги показвате - те не се премахват. Браузърът игнорира тези елементи и не ги визуализира (заедно с всички поделементи). Когато разрешите показването с display: block всичко ще се зареди и остили както трябва.

Здравейте, Юлиан, да, можете да "върнете" скрити елементи след display: none или visibility: hidden като просто промените тези стилове обратно в кода ви. За display: none, можете да го промените обратно на display: block (или друг подходящ display стил). За visibility: hidden, можете да го промените обратно на visibility: visible. 1. Стилове и CSS - За да контролирате видимостта на елементи във вашия HTML код, можете да използвате стилове и CSS. Display и visibility са два стилови атрибута, които могат да контролират дали елементът е видим или не. 2. Използване на display - Когато установите стиловия атрибут display на none за даден HTML елемент, този елемент (и неговите дъщерни елементи) ще бъде напълно премахнат от потока на документа и няма да заема пространство. За да върнете този елемент, просто променете стойността на display обратно на block, inline, inline-block, flex, grid или който и да е друг тип на display, подходящ за вашия случай. Пример: ``` /* Скрива елемента */ .yourElement { display: none; } /* Връща елемента обратно */ .yourElement { display: block; /* или друг подходящ display тип */ } ``` 3. Използване на visibility - Когато установите стиловия атрибут visibility на hidden за даден HTML елемент, елементът ще бъде невидим, но все още ще заема своето място в потока на документа. За да върнете видимостта на този елемент, променете стойността на visibility обратно на visible. Пример: ``` /* Скрива елемента */ .yourElement { visibility: hidden; } /* Връща елемента обратно */ .yourElement { visibility: visible; } ``` 4. Динамично променяне на стилове с JavaScript - Можете да използвате JavaScript за динамично променяне на стиловете на вашите елементи, в зависимост от условията, които сте задали (например, размерът на екрана). Това е особено полезно при създаването на респонсивен дизайн. Пример: ``` /* Скрива елемента */ document.querySelector('.yourElement').style.display = 'none'; /* Връща елемента обратно */ document.querySelector('.yourElement').style.display = 'block'; /* или друг подходящ display тип */ ```

Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Скриване на елементи

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното за скриването на елементи

При responsive дизайн често се налага да скрием по-малко важна информация на малки екрани. Има два основни начина за това – чрез display: none и visibility: hidden, но те не работят по един и същи начин.
visibility: hidden скрива елемента визуално, но той запазва мястото си в подредбата.
display: none премахва елемента от подредбата и останалите елементи заемат неговото място.

Стъпка по стъпка: скриване при ширина под 800px

Създайте @media правило за екрани с ширина под 800px.
Таргетирайте елемента, който искате да скриете (например aside в main).
Добавете display: none;, за да премахнете колоната напълно при малък екран.
Тествайте като намалите ширината на прозореца – колоната ще изчезне и съдържанието ще се пренареди.
Заменете с visibility: hidden;, за да видите разликата – елементът ще стане невидим, но ще запази мястото си.
Пробвайте и с вътрешен елемент (например ol), за да наблюдавате ефекта върху подредбата.

Използвани CSS свойства и селектори

display: none – премахва елемента от визуалния поток и освобождава мястото му.
visibility: hidden – прави елемента невидим, но запазва мястото му.
@media (max-width: 800px) – прилага стилове само при ширина под 800px.
Селектор за съседен елемент (напр. h2.Languages + ol) – таргетира конкретен списък след заглавие.

Задача

Скрийте второстепенен елемент от вашата страница при ширина под 600px. Тествайте и двата подхода (display: none и visibility: hidden) и наблюдавайте как се променя подредбата на останалото съдържание.

Дискусия към урока

Въпроси

Отговори

инж. Юлиан Ангелов

Може ли

инж. Юлиан Ангелов

Какво

инж. Юлиан Ангелов

Какво всъщност става при използване на display:none би трябвало да ги няма и в конзлоата като отворим страничката с Google Chrome, а при visibility: hidden - невидимите редове да присъстват в кода - така ли?