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

Ноябрь 21, 2021

Главная
Информатика
Универсальный селектор

Содержание

2. h1{color: navy;} body { background-color: white color: black; } aside { …} footer p { text-align:
3. .bold {color: yellow;} h1.yellow{color: yellow;} .class1 {font-weight: bold;} .class2 {font-style: italic;} Текст .class1 {font-weight: bold;} .class2
4. #header {color: blue;} #header.header {color: blue;} #header .header {color: blue;} p {color: green; font-style: italic;} p#p
5. Простой документ Заголовок Абзац с важным текстом. Предок, потомок, родительский элемент, дочерний элемент, сестринский элемент. Селекторы,
6. h1 strong { color: red; } .StrongHeader{ color: red; } .intro a { color: yellow; }
7. Заголовок Текст Заголовок Текст Заголовок Текст … … .news h2 { color: red; } .news p
8. Иван Иванов Иванович 12345 45000, К. Маркса 12 .contact.name { font-weight: bold; } .contact.phone { color:
9. Селекторы смежных элементов одного уровня 9 – элемент_1 +элемент_2; – элемент_1 ~ элемент_2. Заголовок Текст первого
10. Селекторы смежных элементов одного уровня 10 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, К. Маркса
13. .contact p:only-child{color:red;} Иван Иванов Иванович 12345 45000, К. Маркса 12 Петров Петр Петрович 12345 45000, К.
14. :nth-child {…} Значения: – odd; p:nth-child(odd) {background-color: green;} – even; p:nth-child(even) {background-color: blue;} – ; p:nth-child(5)
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
17. Псевдоклассы дочерних элементов 17
18. Селекторы атрибутов 18 Синтаксис селектора атрибутов: элемент[атрибут]: img[title]{}; .photo[title] {}; Элемент 1 Элемент 2 Элемент 3
19. Селекторы атрибутов 19 Синтаксис селектора атрибутов: элемент [атрибут="значение"]: a[href="http://www.example.ru"]{} input[type="text"]{border: 4px double black;}
20. Селекторы атрибутов 20 Селектор атрибутов с совпадениями по подстроке «начинается с…». Синтаксис селектора атрибутов: элемент[атрибут^="значение"]: a[href^="http://"]{}
21. Селекторы атрибутов 21 Селектор атрибутов с совпадениями по подстроке «содержит экземпляр…». Синтаксис селектора атрибутов следующим образом:
22. Селекторы атрибутов 22 Синтаксис селектора атрибутов: элемент[атрибут$="значение"]: a[href$=".pdf"] {} a [href$=".mov"] {} a [href$=".doc"] {}
23. Псевдоклассы 23 :root :active; :link; :visited; :hover; :focus; :not; :lang; :empty
24. Псевдоклассы 24 a:link {color:blue; text-decoration:none} a:visited {color:pink; text-decoration:none} a:hover {color:red; text-decoration:overline} a:active {color:yellow; text-decoration:underline} input:hover {border:2px
25. Псевдоклассы 25 p:not(.phone):not(.address) { color: red; } Иван Иванов Иванович 12345 45000, К. Маркса 12 Петров
26. Псевдоклассы 26 :lang(ru) {color: red; } УГАТУ USATU ---
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: bold; } .warning::after
29. Пседвоэлементы 29 ::selection {color: white; background-color: black;} p::selection {color: white; background-color: black;} Пседвоэлемент selection Пседвоэлемент selection
30. Псевдоклассы 30 :valid:{}; :invalid:{}; :enabled:{}; :disabled :{}; :checked :{}; :valid:{}; :invalid:{}; :in-range:{}; :out-of-range:{}; :required:{}; :optional:{}; :read-only:{};
31. Псевдоклассы 31 input:invalid {background: white; border: 2px solid red; } input:valid {background: red; border: 2px solid
32. Псевдоклассы 32 :disabled {opacity: 0.3;}
33. Псевдоклассы 33 :checked + span {color: red; font-weight: bold; } Выберите технологию HTML5 CSS3 PHP XML
34. Псевдоклассы 34 :in-range {border: 2px solid green;} :out-of-range {border: 2px solid red; } Ваш возраст:
35. Псевдоклассы 35 :optional {border: 2px solid blue; } :required { border: 2px solid red; } Логин:
36. Принципы каскадных правил 36 Тип таблицы стилей. Последнее правило. Специфичность. Правило !important.
37. Принципы каскадных правил 37 Селекторы тегов оцениваются в 1 балл Селекторы классов, атрибутов оцениваются в 10
38. Принципы каскадных правил 37 #css {color: red;} .green {color: green;} p {color: black; font-weight: bold;} Основы
39. Принципы каскадных правил 37 #css {color: red;} .green {color: green;} p {color: black !important; } Основы
40. Селекторы 1 P ~ I {color: red;} Селекторы формальное описание элемента или группы элементов для которых
42. Скачать презентацию

Слайд 2

h1{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;}

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

class="phone">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] {};

title>Элемент 1

Элемент 2

Элемент 3

Элемент 1

Элемент 2

Элемент 3

Слайд 19

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

19

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

Слайд 20

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

20

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

с…». Синтаксис селектора атрибутов: элемент[атрибут^="значение"]:
a[href^="http://"]{}
a[href^="http://ugatu/ac.ru/"]{ color: red;}
УГАТУ |
ВЕСТНИК УГАТУ |
УГНТУ

Слайд 21

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

21

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

Синтаксис селектора атрибутов следующим образом: элемент[атрибут*="значение"]
a[href*="ugatu"]{ color: green;}
УГАТУ |
ВЕСТНИК УГАТУ |
УГНТУ
ВЕСТНИК УГАТУ_УГНТУ

Слайд 22

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

22

Синтаксис селектора атрибутов: элемент[атрибут$="значение"]:
a[href$=".pdf"] {}
a [href$=".mov"]

{}
a [href$=".doc"] {}

Слайд 23

Псевдоклассы

23

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

Слайд 24

Псевдоклассы

24

УГАТУ

Слайд 25

Псевдоклассы

25

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

class="name">Иван Иванов Иванович

12345

45000, К. Маркса 12

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

12345

45000, К. Маркса 12

Данные 2010 года

Слайд 26

Псевдоклассы

26

:lang(ru) {color: red; }

УГАТУ

USATU

lang="de">---

Слайд 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:$

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

28

p.tip:before {content: "ПОДСКАЗКА!" }
.contact::before{content:"\2709";font-size: 30px;}
.warning::before{ content: "Важно! "; font-weight:

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

Вестник УГАТУ включен в перечень рецензируемых научных изданий.

Слайд 29

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

29

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

black;}

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

Слайд 30

Псевдоклассы

30

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

:in-range:{};
:out-of-range:{};
:required:{};
:optional:{};
:read-only:{};

Слайд 31

Псевдоклассы

31

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

{background: red; border: 2px solid green;}

Слайд 32

Псевдоклассы

32

:disabled {opacity: 0.3;}

disabled value="Disabled" />

Слайд 33

Псевдоклассы

33

:checked + span {color: red; font-weight: bold; }
Выберите

технологию
HTML5
CSS3
PHP
XML

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

CSS2
CSS3

Слайд 34

Псевдоклассы

34

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

red; }
Ваш возраст:

Слайд 35

Псевдоклассы

35

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

2px solid red; }
Логин:

Пароль:

Слайд 36

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

36

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

Слайд 37

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

37

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

в 10 баллов
Селекторы псевдоклассов оцениваются в 10 баллов
Селекторы идентификаторов оцениваются в 100 баллов

Слайд 38

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

37

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

{color: black; font-weight: bold;}

Основы CSS 3

Слайд 39

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

37

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

{color: black !important; }

Основы CSS 3

Слайд 40

Селекторы

1

Селекторы формальное описание элемента или группы элементов для которых применяютсястилевые правила

Селектор элемента
Селектор класса
Селектор идентификатора

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

Содержание

h1{color: navy;}body { background-color: white color: black; }aside { …} footer p {

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

#header {color: blue;}#header.header {color: blue;}#header .header {color: blue;}p {color: green; font-style:

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

Заголовок

h1 strong { color: red; }.StrongHeader{ color: red; }.intro a {

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

Заголовок

Текст

Заголовок

Текст

Заголовок

Текст

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

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

Заголовок

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

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

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

Заголовок

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

.contact p:only-child{color:red;} Иван Иванов Иванович

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

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

.contact strong:only-of-type {color: red;} Иван Иванов Иванович

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

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

Элемент 2

Элемент 3

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

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

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

Селекторы атрибутов 22 Синтаксис селектора атрибутов: элемент[атрибут$="значение"]:a[href$=".pdf"] {}a [href$=".mov"]

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

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

Псевдоклассы 26 :lang(ru) {color: red; } УГАТУ USATU

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

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

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

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

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

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

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

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

Выберите

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

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

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

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

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

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

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

Селекторы 1 <br> P ~ I {color: red;}<br>

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

h1{color: navy;}
body {
background-color: white color: black; }
aside { …}
footer p {

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

.class1 {font-weight:

#header {color: blue;}
#header.header {color: blue;}
#header .header {color: blue;}
p {color: green; font-style:

h1 strong { color: red; }
.StrongHeader{ color: red; }
.intro a {

Заголовок

Текст

Заголовок

Текст

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

12345

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

9

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

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

10

h2+div { color: red;

Дочерние селекторы

11

Заголовок

Текст

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

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

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

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

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

15

.contact strong:only-of-type {color: red;}

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

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

17

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

18

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

title>Элемент 1

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

19

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

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

20

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

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

21

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

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

22

Синтаксис селектора атрибутов: элемент[атрибут$="значение"]:
a[href$=".pdf"] {}
a [href$=".mov"]

Псевдоклассы

23

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

Псевдоклассы

25

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

Псевдоклассы

26

:lang(ru) {color: red; }

УГАТУ

USATU

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

27

::first-letter;
::first-line;
::before;
::after;
::selection

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

28

p.tip:before {content: "ПОДСКАЗКА!" }
.contact::before{content:"\2709";font-size: 30px;}
.warning::before{ content: "Важно! "; font-weight:

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

29

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

Псевдоклассы

30

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

Псевдоклассы

31

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

Псевдоклассы

32

:disabled {opacity: 0.3;}

Псевдоклассы

33

:checked + span {color: red; font-weight: bold; }
Выберите

Псевдоклассы

34

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

Псевдоклассы

35

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

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

36

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

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

37

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

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

37

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

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

37

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

Селекторы

1