Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
8 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
144.50 kB
Просмотров:
84
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд
№2 слайд
№3 слайд
Содержание слайда: CSS псевдоэлементы
// Для добавления контента на страницу, без изменения HTML документа можно с помощью псевдоэлементов :before и :after.
// Псевдоэлементы наследуют все свойства блока, к которому они относятся.
// Псевдоэлементы не будут работать без свойства “content”
// Свойство content позволяет вставлять генерируемый контент, которого изначально нет на странице
.element:before{content: '[';}
.element:after{content: ']';}
// Указанная конструкция выведет [Hello world]
№4 слайд
Содержание слайда: // Также с помощью псевдоэлементов можно добавить кастомный блок, и опустить 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;
}
№5 слайд
Содержание слайда: 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) ": ";
}
№6 слайд
Содержание слайда: Задание
// Создаем три списка с кастомными буллитами:
// // С кастомными буллитами (прим. в виде круга красного цвета);
// // С буллитами из шрифтовых иконок или мнемоники;
// // С кастомными цифрами (текстом “N страница” или цифра счетчика в круге);
№7 слайд
Содержание слайда: Позиционирование элементов
// Позиционирование позволяет установить положение элемента относительно окна браузера или других объектов на веб-странице. Назначается с помощью css свойства position
position: absolute | fixed | relative | static;
// Перечисленные значения устанавливают отображение, относительно окна:
// // absolute - элемент позиционируется абсолютно, относительно браузера, остальные элементы отображаются так, словно абсолютно позиционированного элемента не существует
// // fixed - элемент не меняет своего положения при прокрутке страницы
// // relative - элемент остается на своем месте в потоке, при изменении положения будет изменяться его позиция отображения элемента, физически он все еще будет находится на своем месте в потоке
// // static - отображение по-умолчанию, сменить позицию через top | right | bottom | top невозможно
№8 слайд
Содержание слайда: Перемещение позиционированных элементов
// Перемещать позиционированные элементы можно с помощью свойств top; right; bottom; left;
(top | right | bottom | left) : value | % | auto;
// position: static; не перемещается таким образом!!!
// position: fixed; перемещается относительно соответствующих сторон экрана
// position: absolute; перемещается относительно ближайшего не дефолтно позиционированного родителя, если все родители позиционированы по-умолчанию, перемещается относительно body
// position: relative; перемещается относительно своего текущего местоположения
// z-index: любой позиционированный элемент может накладываться поверх другого, и находится как выше, так и ниже других элементов по z-оси. Для управления размещением используется z-index