🗊Презентация Псевдоселекторы и псевдоэлементы. Позиционирование элементов. HTML. Занятие 4

CSS псевдоэлементы // Для добавления контента на страницу, без изменения HTML документа можно с помощью псевдоэлементов :before и :after. // Псевдоэлементы наследуют все свойства блока, к которому они относятся. // Псевдоэлементы не будут работать без свойства “content” // Свойство content позволяет вставлять генерируемый контент, которого изначально нет на странице .element:before{content: '[';} .element:after{content: ']';} // Указанная конструкция выведет [Hello world]

// Также с помощью псевдоэлементов можно добавить кастомный блок, и опустить content, для этого надо в свойствах прописать content: “”; и указать нужные CSS свойства // Также с помощью псевдоэлементов можно добавить кастомный блок, и опустить content, для этого надо в свойствах прописать content: “”; и указать нужные CSS свойства // Все псевдоэлементы по-умолчанию строчные, независимо от того, к какому элементу относится, поэтому для кастомного блока необходимо указать display: inline-block; float; или position: absolute; // Рассмотрим добавление кастомных маркеров для списка ul.custom-list{ list-style-type: none; } ul.custom-list li:before { content: ''; width: 5px; height: 5px; background: red; border-radius: 50%; display: inline-block; vertical-align: middle; }

CSS счетчик // С помощью CSS также можно пользоваться счетчиками, как правило это может понадобится для кастомных нумерованных списков, тк выводить результат возможно только в свойстве content: “...”; // Для запуска счетчика необходимо использовать свойство counter-reset: counterName // Для увеличения счетчика на единицу - counter-increment: counterName // Для вывода - content: ‘Part counter(counterName) // Где counterName уникальное пользовательское имя для счётчика ol{ list-style-type: none; counter-reset: lorem-text; } ol li{ counter-increment: lorem-text; font: 20px Arial, Helvetica, sans-serif; } ol li:before{ content: "Секция " counter(lorem-text) ": "; }

Задание // Создаем три списка с кастомными буллитами: // // С кастомными буллитами (прим. в виде круга красного цвета); // // С буллитами из шрифтовых иконок или мнемоники; // // С кастомными цифрами (текстом “N страница” или цифра счетчика в круге);

Позиционирование элементов // Позиционирование позволяет установить положение элемента относительно окна браузера или других объектов на веб-странице. Назначается с помощью css свойства position position: absolute | fixed | relative | static; // Перечисленные значения устанавливают отображение, относительно окна: // // absolute - элемент позиционируется абсолютно, относительно браузера, остальные элементы отображаются так, словно абсолютно позиционированного элемента не существует // // fixed - элемент не меняет своего положения при прокрутке страницы // // relative - элемент остается на своем месте в потоке, при изменении положения будет изменяться его позиция отображения элемента, физически он все еще будет находится на своем месте в потоке // // static - отображение по-умолчанию, сменить позицию через top | right | bottom | top невозможно

Перемещение позиционированных элементов // Перемещать позиционированные элементы можно с помощью свойств top; right; bottom; left; (top | right | bottom | left) : value | % | auto; // position: static; не перемещается таким образом!!! // position: fixed; перемещается относительно соответствующих сторон экрана // position: absolute; перемещается относительно ближайшего не дефолтно позиционированного родителя, если все родители позиционированы по-умолчанию, перемещается относительно body // position: relative; перемещается относительно своего текущего местоположения // z-index: любой позиционированный элемент может накладываться поверх другого, и находится как выше, так и ниже других элементов по z-оси. Для управления размещением используется z-index