CSS Селекторы

Август 20, 2022

Главная
Информатика
CSS Селекторы

Содержание

2. Селекторы в CSS CSS селектор, в составе правила, говорит браузеру к каким тегам необходимо применить правило
3. 1. Простые селекторы
4. Скачайте шаблоны Скачайте архив с шаблонами которые нам понадобятся: https://github.com/filebase-xyz/css-selectors/archive/v2021.zip
5. Немного практики Откройте проект из каталога (из архива): ./css-selectors-master/demo-template
6. Селектор CSS по названию (типу) тега Стиль применяется ко всем тегам указанного типа (имени).
7. Селектор по имени класса .имя-класса – селектор, который позволяет выбрать теги у которых есть искомый класс.
8. Селектор по атрибуту id (знак ‘#’) #идентификатор – css-селектор, который позволяет выбрать теги у которых есть
9. Тег и множество правил Селектор определяет правила по которым браузер определяет теги к которым будет применены
10. 2. Сложные селекторы
11. Сложный селектор Сложный селектор позволяет задать правило для тегов которые должны соответствовать нескольким простым селекторам одновременно,
12. Псевдокласс :not() Селектор с отрицанием позволит выбрать все теги с классом .cat за исключением тех, которые
13. Псевдоклассы Если вы встречаете в CSS-селекторе конструкцию записанную через двоеточие, то такую конструкцию называют псевдокласс. Псевдоклассы
14. 3. Комбинированные селекторы
15. Это «соседний» селектор. Он поможет нам выбрать все теги с классом .dog, которые находятся на одном
16. Это соседний селектор. Он поможет нам выбрать первый тег с классом .dog, который находятся на одном
17. Селектор говорит, что правило должно применится к тегу у которого есть класс .cat но только если
18. Селектор говорит, что правило должно применится к тегу у которого есть класс .cat но только если
19. 4. Порядковый селектор :nth-child(n)
20. text 1 text 2 text 3 text 4 text 5 text 6 text 7 text 8
21. 5. Каскадирование Специфичность Как браузер разрешает противоречия?
22. К одному тегу могут применятся несколько правил, но что если они противоречат друг другу?
23. В случае противоречия браузер отдаёт предпочтение одному из стилевых свойств. У правил есть приоритеты. Порядок приоритетов
24. 6. Немного практики
25. Воспроизведём оформление компонента на базе готовой HTML-разметки Необходимо воспроизвести стили макета. Без внесения изменений в файл
26. Будет полезным
27. Узнать о селекторах по атрибуту https://webref.ru/css/selector/attr
28. Домашнее задание
29. Пройти игру! https://flukeout.github.io/
30. Реализуйте этот компонент По возможности максимально близко к макету. Font Awesome и Google Fonts вам помогут.
31. К следующему занятию…
33. Скачать презентацию

Слайд 2

Селекторы в CSS
CSS селектор, в составе правила, говорит браузеру к каким

тегам необходимо применить правило применить, т.е. задать условие, по которому браузер определит, подходит тег чтобы применить к нему правило или нет.

h3 { color: red; margin: 16px auto; }

CSS селектор, говорит к каким тегам (элементам) будет применятся описываемый стиль (css selector).

Слайд 3

1. Простые селекторы

Слайд 4

Скачайте шаблоны
Скачайте архив с шаблонами которые нам понадобятся: https://github.com/filebase-xyz/css-selectors/archive/v2021.zip

Слайд 5

Немного практики
Откройте проект из каталога (из архива): ./css-selectors-master/demo-template

Слайд 6

Селектор CSS по названию (типу) тега
Стиль применяется ко всем тегам указанного

типа (имени).

Слайд 7

Селектор по имени класса

.имя-класса – селектор, который позволяет выбрать теги

у которых есть искомый класс. Если у тега несколько классов, то среди имеющихся должен быть искомый.

Слайд 8

Селектор по атрибуту id (знак ‘#’)

#идентификатор – css-селектор, который позволяет

выбрать теги у которых есть атрибут id равный заданному

Слайд 9

Тег и множество правил
Селектор определяет правила по которым браузер определяет теги

к которым будет применены стили. Тег может подходить под селекторы нескольких правил одновременно.

Слайд 10

2. Сложные селекторы

Слайд 11

Сложный селектор
Сложный селектор позволяет задать правило для тегов которые должны соответствовать

нескольким простым селекторам одновременно, например: иметь два определенных класса, или тег должен быть определенного типа и иметь определённый класс.

Слайд 12

Псевдокласс :not()
Селектор с отрицанием позволит выбрать все теги с классом .cat

за исключением тех, которые еще имеют и класс .dog Селектор отрицания может использоваться и в более сложных выражениях. :not() принимает только простой селектор!!!

Слайд 13

Псевдоклассы
Если вы встречаете в CSS-селекторе конструкцию записанную через двоеточие, то такую

конструкцию называют псевдокласс. Псевдоклассы используют для того, чтобы указать на тег основываюсь на его позиции в документе или динамическое состояние или на основании других отличительных особенностей.

Селектор:Псевдокласс {...}

Слайд 14

3. Комбинированные селекторы

Слайд 15

Это «соседний» селектор. Он поможет нам выбрать все теги с классом

.dog, которые находятся на одном уровне (прямые потомки одного родителя) и следуют за тегом с id равным tiger.

Селектор «соседей»

Слайд 16

Это соседний селектор. Он поможет нам выбрать первый тег с классом

.dog, который находятся на одном уровне (прямые потомки одного родителя) и следуют сразу же за тегом с id равным tiger.

Селектор первого соседа

Слайд 17

Селектор говорит, что правило должно применится к тегу у которого есть

класс .cat но только если у него среди родителей есть тег с классом .dog (вместо классов можно использовать id, название тегов или комбинированный селектор).

Селектор дочерних элементов (просто знак пробела) - когда нужно найти элемент вложенный в другой элемент

Слайд 18

Селектор говорит, что правило должно применится к тегу у которого есть

класс .cat но только если он прямой потомок тега с классом .dog (вместо классов можно использовать id, название тегов или комбинированный селектор).

Прямой селектор дочерних элементов (знак ‘>’) - когда нужно найти элемент – прямой потомок

Слайд 19

4. Порядковый селектор
:nth-child(n)

Слайд 20

text 1

text 2

text 3

text 4

text 5

text 6

text 7

text 8

text 9

text 10

p:nth-child(odd)

{
background: red;
}
p:nth-child(even) {
background: blue;
}
p:nth-child(5) {
background:purple;
}
p:first-child {
background: orange;
}
p:last-child {
background: #green;
}

Порядковый селектор

Если по селектору нашлось более одного элемента, то псевдокласс :nth-child позволяет уточнить порядковые номера элементов (среди потомков его родителя) которые нас интересуют. :first-child и :last-child указывают на элемент если он первый или последний потом своего родителя (соотвественно).

Слайд 21

5. Каскадирование
Специфичность
Как браузер разрешает противоречия?

Слайд 22

К одному тегу могут применятся несколько правил, но что если они

противоречат друг другу?

Слайд 23

В случае противоречия браузер отдаёт предпочтение одному из стилевых свойств. У

правил есть приоритеты.

Порядок приоритетов такой:

Наибольший приоритет имеют стили описанные прямо в теге в атрибуте style=“…”;
Далее следует правила у которых есть селектор по атрибуту id т.е. вида #report { … };
После этого следуют правила с селекторами по любым другим атрибутам (в том числе и атрибуту class т.е. вида .sometype { … });
Правила в селекторе которых просто название тега, например h1 { … }.

Если у нескольких правил одинаковый приоритет, то применяется то, которое встречается последним (т.е. идёт ниже, в коде, чем другие).

Команда !important записанная после какого-либо из стилевых правил делает его наиболее приоритетным из всех, независимо от того какой селектор применяется.

https://css-live.ru/css/nikto-ne-znaet-css-specifichnost-ne-kaskad.html

Слайд 24

6. Немного практики

Слайд 25

Воспроизведём оформление компонента на базе готовой HTML-разметки
Необходимо воспроизвести стили макета. Без

внесения изменений в файл index.html

Откройте проект из каталога (из архива): ./css-selectors-master/component-template

Слайд 26

Будет полезным

Слайд 27

Узнать о селекторах по атрибуту
https://webref.ru/css/selector/attr

Слайд 28

Домашнее задание

Слайд 29

Пройти игру!
https://flukeout.github.io/

Слайд 30

Реализуйте этот компонент
По возможности максимально близко к макету.
Font Awesome и Google

Fonts вам помогут.

Слайд 31

CSS Селекторы

Содержание

Селекторы в CSSCSS селектор, в составе правила, говорит браузеру к каким

1. Простые селекторы

Скачайте шаблоныСкачайте архив с шаблонами которые нам понадобятся: https://github.com/filebase-xyz/css-selectors/archive/v2021.zip

Немного практикиОткройте проект из каталога (из архива): ./css-selectors-master/demo-template

Селектор CSS по названию (типу) тегаСтиль применяется ко всем тегам указанного

Селектор по имени класса.имя-класса – селектор, который позволяет выбрать теги

Селектор по атрибуту id (знак ‘#’)#идентификатор – css-селектор, который позволяет

Тег и множество правилСелектор определяет правила по которым браузер определяет теги

2. Сложные селекторы

Сложный селекторСложный селектор позволяет задать правило для тегов которые должны соответствовать

Псевдокласс :not()Селектор с отрицанием позволит выбрать все теги с классом .cat

ПсевдоклассыЕсли вы встречаете в CSS-селекторе конструкцию записанную через двоеточие, то такую

3. Комбинированные селекторы

Это «соседний» селектор. Он поможет нам выбрать все теги с классом

Это соседний селектор. Он поможет нам выбрать первый тег с классом

Селектор говорит, что правило должно применится к тегу у которого есть

Селектор говорит, что правило должно применится к тегу у которого есть

4. Порядковый селектор:nth-child(n)

text 1text 2text 3text 4text 5text 6text 7text 8text 9text 10p:nth-child(odd)

5. КаскадированиеСпецифичностьКак браузер разрешает противоречия?

К одному тегу могут применятся несколько правил, но что если они

В случае противоречия браузер отдаёт предпочтение одному из стилевых свойств. У

6. Немного практики

Воспроизведём оформление компонента на базе готовой HTML-разметкиНеобходимо воспроизвести стили макета. Без

Будет полезным

Узнать о селекторах по атрибутуhttps://webref.ru/css/selector/attr

Домашнее задание

Пройти игру!https://flukeout.github.io/

Реализуйте этот компонентПо возможности максимально близко к макету.Font Awesome и Google

К следующему занятию…

Похожие презентации

Селекторы в CSS
CSS селектор, в составе правила, говорит браузеру к каким

Скачайте шаблоны
Скачайте архив с шаблонами которые нам понадобятся: https://github.com/filebase-xyz/css-selectors/archive/v2021.zip

Немного практики
Откройте проект из каталога (из архива): ./css-selectors-master/demo-template

Селектор CSS по названию (типу) тега
Стиль применяется ко всем тегам указанного

Селектор по имени класса

.имя-класса – селектор, который позволяет выбрать теги

Селектор по атрибуту id (знак ‘#’)

#идентификатор – css-селектор, который позволяет

Тег и множество правил
Селектор определяет правила по которым браузер определяет теги

Сложный селектор
Сложный селектор позволяет задать правило для тегов которые должны соответствовать

Псевдокласс :not()
Селектор с отрицанием позволит выбрать все теги с классом .cat

Псевдоклассы
Если вы встречаете в CSS-селекторе конструкцию записанную через двоеточие, то такую

4. Порядковый селектор
:nth-child(n)

text 1

text 2

text 3

text 4

text 5

text 6

text 7

text 8

text 9

text 10

p:nth-child(odd)

5. Каскадирование
Специфичность
Как браузер разрешает противоречия?

Воспроизведём оформление компонента на базе готовой HTML-разметки
Необходимо воспроизвести стили макета. Без

Узнать о селекторах по атрибуту
https://webref.ru/css/selector/attr

Пройти игру!
https://flukeout.github.io/

Реализуйте этот компонент
По возможности максимально близко к макету.
Font Awesome и Google

К следующему
занятию…