Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Задача: Пин пред заглавие
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Добавяне на икона без да променяме HTML
Най-важното в тази задача е да добавим визуален елемент (пин) пред заглавие, без да го записваме в HTML кода. Това се постига изцяло с CSS, така че иконата да се показва автоматично пред всички бъдещи заглавия от същия тип. Така поддържаме чист и семантичен HTML, а визуалните детайли управляваме чрез стилове.
Стъпка по стъпка: как да добавиш пин пред заглавие
- Използвай съществуващия клас на заглавието (например
title-profile), създаден в предишните модули. - Създай псевдоелемент пред заглавието чрез
::before. - Добави съдържание чрез
content– символ, икона или изображение. - При нужда използвай
position, за да позиционираш прецизно пина спрямо текста. - Добави отстояние чрез
margin, за да има разстояние между пина и текста.
Използвани CSS техники
::before– създава виртуален елемент пред съдържанието на избрания елемент.content– задължително свойство за псевдоелементи; определя какво да се визуализира.position– позволява по-гъвкаво позициониране на пина (напр.relativeилиabsolute).margin– контролира разстоянието между иконата и текста.
Задача
Добави пин пред всички заглавия с класа title-profile, без да променяш HTML файла. Увери се, че при добавяне на ново заглавие със същия клас, пинът се появява автоматично.
Дискусия към урока
Въпроси
Отговори
