Универсальный селектор презентация

Содержание

1. Универсальный селектор
2. h1{color: navy;} body {
3. .bold {color: yellow;} h1.yellow{color: yellow;}
4. #header {color: blue;} #header.header {color: blue;}
6. h1 strong { color: red; }
7. Заголовок
8. Иван Иванов Иванович
9. Селекторы смежных элементов одного уровня
10. Селекторы смежных элементов одного уровня
11. Дочерние селекторы
12. :first-child {color: green;} :last-child {color: green;}
13. .contact p:only-child{color:red;}
14. :nth-child {…} Значения: – odd;
15. :first-of-type {…} :last-of-type {…} only-of-type
16. .contact strong:only-of-type {color: red;}
17. Псевдоклассы дочерних элементов
18. Селекторы атрибутов
19. Селекторы атрибутов
20. Селекторы атрибутов
21. Селекторы атрибутов
22. Селекторы атрибутов
23. Псевдоклассы 23
24. Псевдоклассы 24
25. Псевдоклассы 25
26. Псевдоклассы 26
27. Псевдоэлементы 27
28. Псевдоэлементы 28
29. Пседвоэлементы 29
30. Псевдоклассы 30
31. Псевдоклассы
32. Псевдоклассы
33. Псевдоклассы
34. Псевдоклассы
35. Псевдоклассы
36. Принципы каскадных правил
37. Принципы каскадных правил
38. Принципы каскадных правил
39. Принципы каскадных правил
40. Селекторы 1
41. Селекторы 2

Слайд 1
{font-weight: bold;}

.error {color: red;}

* div * { background: green; }

.title *

{font-weight: bold;}

Универсальный селектор

Слайд 2h1{color: navy;}

body {
background-color: white color: black; }

aside { …}

footer

p {
text-align: right;
font-size: 11px;
}

Селекторы элемента

Слайд 3.bold {color: yellow;}

h1.yellow{color: yellow;}

.class1 {font-weight: bold;}
.class2 {font-style: italic;}
Текст

.class1 {font-weight:

bold;}
.class2 {font-style: italic;}
.class3 {background: green;}
.class1.class2 {background: silver;}

Текст

Селекторы класса

Слайд 4#header {color: blue;}

#header.header {color: blue;}

#header .header {color: blue;}

p {color: green;

font-style: italic;}
p#p {color: red;}
p.p {color: yellow;}

Абзац 1

Абзац 2

Абзац 3

h1, p, .copyright, #banner {… }

Селекторы идентификатора

Слайд 5

Простой документ

Заголовок

Абзац с
важным
текстом.

Предок, потомок, родительский элемент, дочерний элемент, сестринский элемент.

Селекторы, имеющие отношение к дереву документа

Слайд 6
h1 strong { color: red; }

.StrongHeader{ color: red; }

.intro a {

color: yellow; }

footer p {
text-align: right;
font-size: 11px;
padding-right: 20px; }

#featured .innerblock a{color: red;}

Селекторы потомков

Слайд 7
Заголовок
Текст
Заголовок

Текст

Заголовок

Текст

…

…

.news h2 { color: red; }
.news p { color: blue; }

Селекторы потомков

Слайд 8
Иван Иванов Иванович

12345

45000, К. Маркса 12

.contact.name { font-weight: bold; }
.contact.phone { color: blue ;}
.contact.address { color: red; }

Селекторы потомков

Слайд 9
Селекторы смежных элементов одного уровня

9

– элемент_1 +элемент_2;
– элемент_1

~ элемент_2.

Заголовок

Текст первого блока

Текст второго блока

Слайд 10
Селекторы смежных элементов одного уровня

10

h2+div { color: red;

}

Название статьи

Ключевые слова

Аннотация

h2~div { color: red; }

Слайд 11
Дочерние селекторы

11

Заголовок
Текст

.article p { color: red;}
.article > p { color: green;}

Аннотация к статье

Ключевые слова

Текст статьи

Слайд 12:first-child {color: green;} :last-child {color: green;}

p:first-child{color:red;}
.contact p:first-child{color:red;}

Иван Иванов Иванович

12345

45000, К. Маркса 12

Петров Петр Петрович

12345

45000, К. Маркса 12

Псевдоклассы дочерних элементов

Слайд 13.contact p:only-child{color:red;}

Иван Иванов Иванович

12345

45000, К. Маркса 12

Петров Петр Петрович

12345

45000, К. Маркса 12

Данные 2010 года

Текст

Псевдоклассы дочерних элементов

Слайд 14:nth-child {…}

Значения:
– odd;
p:nth-child(odd) {background-color: green;}
– even;
p:nth-child(even) {background-color: blue;}
– ;

p:nth-child(5) {color: green;}
– <выражение> (an+b)
p:nth-child(2n+1) {background-color: blue;}
p:nth-child(-n+3) {color: green;}
p:nth-child(3n+3) {color: green;}
p:nth-child(n+3) {color: green;}

Псевдоклассы дочерних элементов

Слайд 15:first-of-type {…}

:last-of-type {…}

only-of-type {…}

:nth-of-type {…}

Псевдоклассы дочерних элементов

15

Слайд 16.contact strong:only-of-type {color: red;}

Иван Иванов

Иванович

12345

45000, К. Маркса 12

Петров Петр Петрович

12345

45000, К. Маркса 12

Данные 2010 года

Псевдоклассы дочерних элементов

Слайд 17
Псевдоклассы дочерних элементов

17

Слайд 18
Селекторы атрибутов

18

Синтаксис селектора атрибутов: элемент[атрибут]:

img[title]{};

.photo[title] {};

class="photo" title>Элемент 1

Элемент 2

Элемент 3

Элемент 1

Элемент 2

Элемент 3

Универсальный селектор презентация

Содержание

Слайд 1 *{font-weight: bold;}*.error {color: red;}* div * { background: green; }.title *

Слайд 2h1{color: navy;}body { background-color: white color: black; }aside { …} footer

Слайд 3.bold {color: yellow;}h1.yellow{color: yellow;}.class1 {font-weight: bold;}.class2 {font-style: italic;}Текст.class1 {font-weight:

Слайд 4#header {color: blue;}#header.header {color: blue;}#header .header {color: blue;}p {color: green;

Слайд 5 Простой документ

Заголовок

Слайд 6h1 strong { color: red; }.StrongHeader{ color: red; }.intro a {

Слайд 7 Заголовок Текст Заголовок

Заголовок

Текст

Слайд 8 Иван Иванов Иванович

Слайд 9Селекторы смежных элементов одного уровня 9 – элемент_1 +элемент_2;– элемент_1

Заголовок

Слайд 10Селекторы смежных элементов одного уровня 10 h2+div { color: red;

Название статьи

Слайд 11Дочерние селекторы 11 Заголовок Текст

Слайд 12:first-child {color: green;} :last-child {color: green;} p:first-child{color:red;}.contact p:first-child{color:red;}

Слайд 13.contact p:only-child{color:red;} Иван Иванов Иванович

Слайд 14:nth-child {…}Значения:– odd; p:nth-child(odd) {background-color: green;}– even; p:nth-child(even) {background-color: blue;}– ;

Слайд 15:first-of-type {…}:last-of-type {…}only-of-type {…}:nth-of-type {…}Псевдоклассы дочерних элементов 15

Слайд 16.contact strong:only-of-type {color: red;} Иван Иванов

Слайд 17Псевдоклассы дочерних элементов 17

Слайд 18Селекторы атрибутов 18 Синтак­сис селектора атрибутов: элемент[атрибут]: img[title]{};.photo[title] {};

Элемент 2

Элемент 3

Слайд 19Селекторы атрибутов 19 Синтак­сис селектора атрибутов: элемент [атрибут="значение"]: a[href="http://www.example.ru"]{}input[type="text"]{border: 4px double black;}

Слайд 20Селекторы атрибутов 20 Селектор атрибутов с совпадениями по подстроке «начинается

Слайд 21Селекторы атрибутов 21 Селектор атрибутов с совпадениями по подстроке «содержит экземпляр…».

Слайд 22Селекторы атрибутов 22 Синтаксис селектора атрибутов:

Слайд 23Псевдоклассы 23 :root:active; :link; :visited;:hover;:focus;:not;:lang;:empty

Слайд 24Псевдоклассы 24 a:link

Слайд 25Псевдоклассы 25 p:not(.phone):not(.address) { color: red; }

Слайд 26Псевдоклассы 26 :lang(ru) {color: red; }

Слайд 27Псевдоэлементы 27 ::first-letter; ::first-line; ::before; ::after; ::selection

Слайд 28Псевдоэлементы 28 p.tip:before {content: "ПОДСКАЗКА!" }.contact::before{content:"\2709";font-size: 30px;} .warning::before{ content: "Важно! "; font-weight:

Слайд 29Пседвоэлементы 29 ::selection {color: white; background-color: black;} p::selection {color: white; background-color:

Пседвоэлемент selection

Слайд 30Псевдоклассы 30 :valid:{}; :invalid:{}; :enabled:{}; :disabled :{}; :checked :{}; :valid:{}; :invalid:{};

Слайд 31Псевдоклассы 31 input:invalid {background: white; border: 2px solid red; }input:valid

Слайд 32Псевдоклассы 32 :disabled {opacity: 0.3;}

Слайд 33Псевдоклассы 33 :checked + span {color: red; font-weight: bold; }Выберите

Выберете уровень

Слайд 34Псевдоклассы 34 :in-range {border: 2px solid green;}:out-of-range {border: 2px solid

Слайд 35Псевдоклассы 35 :optional {border: 2px solid blue; }:required { border:

Слайд 36Принципы каскадных правил 36 Тип таблицы стилей.Последнее правило.Специфичность.Правило !important.

Слайд 37Принципы каскадных правил 37 Селекторы тегов оцениваются в 1 баллСелекторы классов, атрибутов оцениваются

Слайд 38Принципы каскадных правил 37 #css {color: red;} .green {color: green;}

Слайд 39Принципы каскадных правил 37 #css {color: red;} .green {color: green;}

Слайд 40Селекторы 1 P ~ I {color: red;}

Слайд 41Селекторы 2 P + I {color: red;}

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

Обратная связь

Что такое ThePresentation.ru?

Слайд 1
{font-weight: bold;}

.error {color: red;}

* div * { background: green; }

.title *

Слайд 2h1{color: navy;}

body {
background-color: white color: black; }

aside { …}

footer

Слайд 3.bold {color: yellow;}

h1.yellow{color: yellow;}

.class1 {font-weight: bold;}
.class2 {font-style: italic;}
Текст

.class1 {font-weight:

Слайд 4#header {color: blue;}

#header.header {color: blue;}

#header .header {color: blue;}

p {color: green;

Слайд 5

Простой документ

Слайд 6
h1 strong { color: red; }

.StrongHeader{ color: red; }

.intro a {

Слайд 7
Заголовок
Текст
Заголовок

Слайд 8
Иван Иванов Иванович

Слайд 9
Селекторы смежных элементов одного уровня

9

– элемент_1 +элемент_2;
– элемент_1

Слайд 10
Селекторы смежных элементов одного уровня

10

h2+div { color: red;

Слайд 11
Дочерние селекторы

11

Заголовок
Текст

Слайд 12:first-child {color: green;} :last-child {color: green;}

p:first-child{color:red;}
.contact p:first-child{color:red;}

Слайд 13.contact p:only-child{color:red;}

Иван Иванов Иванович

Слайд 14:nth-child {…}

Значения:
– odd;
p:nth-child(odd) {background-color: green;}
– even;
p:nth-child(even) {background-color: blue;}
– ;

Слайд 15:first-of-type {…}

:last-of-type {…}

only-of-type {…}

:nth-of-type {…}

Псевдоклассы дочерних элементов

15

Слайд 16.contact strong:only-of-type {color: red;}

Иван Иванов

Слайд 17
Псевдоклассы дочерних элементов

17

Слайд 18
Селекторы атрибутов

18

Синтаксис селектора атрибутов: элемент[атрибут]:

img[title]{};

.photo[title] {};

Слайд 19
Селекторы атрибутов

19

Синтаксис селектора атрибутов: элемент [атрибут="значение"]:

a[href="http://www.example.ru"]{}

input[type="text"]{border: 4px double black;}

Слайд 20
Селекторы атрибутов

20

Селектор атрибутов с совпадениями по подстроке «начинается

Слайд 21
Селекторы атрибутов

21

Селектор атрибутов с совпадениями по подстроке «содержит экземпляр…».

Слайд 22
Селекторы атрибутов

22

Синтаксис селектора атрибутов:

Слайд 23
Псевдоклассы

23

:root
:active;
:link;
:visited;
:hover;
:focus;
:not;
:lang;
:empty

Слайд 24
Псевдоклассы

24

a:link

Слайд 25
Псевдоклассы

25

p:not(.phone):not(.address) { color: red; }

Слайд 26
Псевдоклассы

26

:lang(ru) {color: red; }

Слайд 27
Псевдоэлементы

27

::first-letter;

::first-line;

::before;

::after;

::selection

Слайд 28
Псевдоэлементы

28

p.tip:before {content: "ПОДСКАЗКА!" }

.contact::before{content:"\2709";font-size: 30px;}

.warning::before{ content: "Важно! "; font-weight:

Слайд 29
Пседвоэлементы

29

::selection {color: white; background-color: black;}

p::selection {color: white; background-color:

Слайд 30
Псевдоклассы

30

:valid:{};
:invalid:{};
:enabled:{};
:disabled :{};
:checked :{};
:valid:{};
:invalid:{};

Слайд 31
Псевдоклассы

31

input:invalid {background: white; border: 2px solid red; }
input:valid

Слайд 32
Псевдоклассы

32

:disabled {opacity: 0.3;}

Слайд 33
Псевдоклассы

33

:checked + span {color: red; font-weight: bold; }

Выберите

Слайд 34
Псевдоклассы

34

:in-range {border: 2px solid green;}
:out-of-range {border: 2px solid

Слайд 35
Псевдоклассы

35

:optional {border: 2px solid blue; }
:required { border:

Слайд 36
Принципы каскадных правил

36

Тип таблицы стилей.
Последнее правило.
Специфичность.
Правило !important.

Слайд 37
Принципы каскадных правил

37

Селекторы тегов оцениваются в 1 балл
Селекторы классов, атрибутов оцениваются

Слайд 38
Принципы каскадных правил

37

#css {color: red;}
.green {color: green;}

Слайд 39
Принципы каскадных правил

37

#css {color: red;}
.green {color: green;}

Слайд 40
Селекторы

1

P ~ I {color: red;}

Слайд 41
Селекторы

2

P + I {color: red;}