Step 3 (S-44730)

Step on Stepik: https://stepik.org/lesson/14821/step/3

[00:00 - 00:18] итак а состоит из набора правил правило состоит из селектора и стили которые применяются к человеку а стиле сс применяются к набору элементов то есть документ он состоит из тегов то есть из элементов

[00:18 - 00:35] а ты кот все стили применяются к тому или иному множество этих элементов селектор это способ задать множество элементов которому мы применяем определенной стиле то есть селектора как следует из названия они выбирают некоторой

[00:35 - 00:51] элементы из а всего документа и к ним применяются стили связано с этим селектор а давайте прежде чем перейти к рассмотрению синтаксис селектора рассмотрим

[00:51 - 01:10] 2 важные а где важны концепции это понятие идентификатора и класса вы что имели есть специальные атрибуты атрибут id атрибут класс а эти атрибуты вот атрибуты 1

[01:10 - 01:25] атрибут класс эти атрибуты могут быть указаны у совершенно любого элемент а причем атрибут id значение атрибута воде а должно быть уникальным в пределах

[01:25 - 01:43] 1 страничка то есть когда браузер загрузилась страничка а он ожидает что у разных элементов будут разные идентификаторы либо их не будет вообще когда в 2 элементов у 2 тегов на 1 странице совпадают идентификаторы это в общем ошибка

[01:43 - 02:01] а браузер конечно выберет 1 из них такая ситуация сама по себе является неправильное нежелательно итак а идентификатор атрибута это способ выделить ровно 1 элемент на странице

[02:01 - 02:16] а с другой стороны атрибут класс позволяет а на какой то конкретный элемент навесить а ну навесить это сленг к элементу добавить класс значение атрибута класс

[02:16 - 02:35] а это имена классов через пробел то есть делится по пробел а в данном случае мы видим что у нас есть а у него есть 2 класса путем ибо t man вот мы говорим про верхний прихват

[02:35 - 02:50] а класса в отличие от идентификатор могут быть неуникальными то есть а наличие на моей страничке нескольких элементов с 1 и тем же классом

[02:50 - 03:08] это нормальная ситуация здесь мы видим что у нас есть 2 кнопки ой а у нас есть 2 кнопки обоих а есть класс бы t а класс по тв есть только у 1 кнопке

[03:08 - 03:24] а в принципе с помощью классов можно выделять от 1 элемента до скольки угодно итак перейдем селекторов какие бывают селектор в а

[03:24 - 03:43] простейшие базовые селекторы которые стоят за 1 слова селектор звездочка центр звездочка выбирает вообще все элементы на странице а сам себе такой селектор используется крайне редко он используется в основном

[03:43 - 03:59] того чтобы сбросить стиле браузера например часто делают выдает вот такую вот правило сектор звездочка и стиле margin баззинг бордер сбрасывается в 0 50

[03:59 - 04:16] это означает что у всех элементов на странице по умолчанию не будет а никаких рамок а следующее это имя

[04:16 - 04:34] а если в селекторе указано имя тэга этот селектор выбирает на странице все теги с данным именем в данном случае сектор п выбираю все параграфа соответственно а стиля стиль margin

[04:34 - 04:52] будет применен ко всем параграфам на данной странице а селектор по имени класс начинается с точки здесь возможно плохо ли мы поставить жирную точку

[04:52 - 05:10] точка а точка а означает что этот селектор соответствуют всем элементам у которых есть класс батарея например на предыдущем слайде этот селектор выбрал б

[05:10 - 05:29] вот эти 2 кнопки и наконец а селектор который выбирает по идентификатору начинается с решетки решетка после чего а имя идентификатор этот сектор выбирает

[05:29 - 05:45] 1 элемент а тот момент у которого совпадает с написано то есть элемент садишься за компьютер пик здесь все просто а но селектора могут

[05:45 - 06:01] бодать более сложным синтаксисом сложные селекторы а во 1 селектора могут быть вложенными друг в друга рассмотрим пример 1

[06:01 - 06:20] что означает этот селектор заметим что вот здесь у нас есть пробел пробел и нету то есть точка article пробел а этот селектор означает следующее нужно выбрать все элементы а

[06:20 - 06:38] то есть все гиперссылки который находится внутри элементов div с классом article еще раз повторю если у нас нет пробела это а значит а совместное применение селекторов то есть

[06:38 - 06:56] селектор div говорит что нужно выбрать все элемента с именем так все диву на странице точка article говорит что нужно выбрать все элемента с классом article а если они указаны вместе без пробела это означает что нужно выбрать те которые подходят

[06:56 - 07:15] обусловили то есть все элементы div с классом article если указан пробел а сектор читается с конца нужно выбрать все элементы а которые находятся внутри того что указано слева

[07:15 - 07:34] это называется контекстной вложенные то есть те сектора который состоит из нескольких слов написанных через пробел а есть вложенные но с уровнем вложенности ровно 1 уровень тогда вместо пробела пишутся знак больше ну по бокам от больше могут быть тоже пробелов это уже неважно

[07:34 - 07:49] а в данном случае этот селектор означает выбрать все элементы которые находятся сразу внутри гиперссылки а ключом ключевое слово здесь раз

[07:49 - 08:08] если структура будет гиперссылка то есть стек а внутри нее какой то так спам внутри нее такой работать не будет важно чтобы так image лежал сразу то есть был 1 потомком внутри гиперссылке авто с есть возможность задавать

[08:08 - 08:27] соседние элементы например посмотрим на 3 сектор а здесь место пробел использовал знак + + означает после данной селектор выбираю все параграфы которые идут после

[08:27 - 08:45] тэга аш 2 с классом сиг а как вы поняли сложность электро не считаются с конца выбрать все параграфа + означает после а

[08:45 - 09:02] ну соответственно то что написано слов кроме того возможно группировка а в некоторых случаях вам нужно применить одни и те же стиле к разным группам элементов например вы хотите чтобы все заголовки у вас были

[09:02 - 09:18] красного цвета а соответственно вы указываете заголовок 1 уровне 1 запятая запятая то как раз перечисление заголовок заголовок уровня аш 2 то есть когда несколько селекторов указаны через запятую а

[09:18 - 09:35] стили которые написано в tes будут применены сразу ко всем селектором какие еще возможности предоставляются с электро важны возможности селекторов являются псевдо класс

[09:35 - 09:52] а что это такое в чем отличие от обычных классах а псевдо классы это тоже способ выбрать а группу 1 или несколько элементов на что моей страничке а но отличие заключается в том что классы назначает не веб мастер

[09:52 - 10:09] то есть не что то разрабатывать страничку эти классы а к элементам добавляет браузер автоматически в зависимости от некоторых условий причем эти классы могут добавляться либо удаляться а зависимости от действий пользователя прямо на лету а

[10:09 - 10:26] типичный пример с псевдоклассы а это псевдо класс visitors которые есть у гиперссылок а что он дает дело в том что браузер отслеживает гиперссылки по которым пользователь ни разу не ходил и те которые он уже посещал

[10:26 - 10:45] те ссылки на котором посещал они получают класс visit us в стилях по умолчанию в браузере они обычно отображаются другим цветом а все это класс дает возможность как то стилизовать такие а уже посещенные ссылки в с с с а

[10:45 - 11:00] другое часто используемая всегда класс это псевдокласс а этот чем то класс а добавляется к элементам когда над ними проходит мышка то есть если пользователь

[11:00 - 11:17] перемещать мышку над моей страничкой этот псевдокласс постепенно возникает и исчезает у разных элемент а он использоваться например для организации контекстах а для того чтобы

[11:17 - 11:35] увеличить посвятить какой то элемент показать пользователю что за этим элемента можно совершить некоторое действие а помимо этого есть другие примеры например доклад слинг он актуален только для гиперссылок это непосещенные гиперссылка а

[11:35 - 11:53] псевдокласс фокус он актуален для полей ввода то есть те кто куда повести что то может вести если а в данный момент некоторые поля имеют фокус ввода а то есть курсор находится курсор клавиатура находится в нем а у него будет

[11:53 - 12:09] все же класс фокус это позволяет выделить например цветом чтобы пользователь пользуется было проще найти этот элемент на странице и наконец псевдокласс first child а

[12:09 - 12:27] этот псевдокласс позволяет выбрать 1 потом к среди тех которые выбраны селектора вот отличный пример прямо на презентации а мы видим что сам слайд из себя представляет список

[12:27 - 12:43] маркированный а соответственно элемент li двоеточие с child это 1 элемент данного списка мы видим что он подсвечен красным то есть я использовал этот псевдокласс верстке данного слать а

[12:43 - 12:59] все классы добавляются к уже существующим элементом то есть элементы которые есть на странице помимо этого авто с есть так называемый псевдо элемент а в отличие от псевдоклассов псевдоэлементы это

[12:59 - 13:17] а настоящий теги но которые не присутствуют в исходном файле эти теги браузер создает автоматически сам а в зависимости от стиля а активно используется 2 псевдоэлементы двоеточие авто и двоеточие

[13:17 - 13:36] а авто это элемент который браузер создаст после каждого элемента соответствующего селектору например а у нас есть селектор решетка l это соответствует единому ну единственный элемент на странице с индикатором

[13:36 - 13:51] а решетка двоеточие авто создаст виртуальный элемент сразу после нашего элемента л а двоеточие создаст виртуальный элемент непосредственно перед этим а

[13:51 - 14:10] пожалуйста перед участием галина ну вот отличный пример как решить проблему капитана джека воробья известного фильма которая все забываю забывали назвать капитаном нас есть селектор jack sparrow джек воробей

[14:10 - 14:29] предполагается что все упоминания имени джека воробья мы вернем какой то контейнер например в с п с классом jack sparrow и автоматически перед этим а пердеть вот этим элементом будет добавляться виртуальные элемент а

[14:29 - 14:47] виртуальных псевдоэлементов есть а 2 важных свойства то content content создает его содержимое но в нашем случае конечно капитан капитан и дисплей издает режим отображения

[14:47 - 15:04] а в нашем случае поскольку мы хотим отображается то внутри строчки мы используем стилем лайн на самом деле можно сдавать всевозможные стили и используется довольно часто для того чтобы создавать а какие то

[15:04 - 15:17] элемента на сайте которое нужно для оформления но не имеют своей собственной семантикой например разного рода уголки стрелочки а отбивки и тому подобные графические элементы