CSS. (Лекція 3) презентация

Июль 31, 2022

Содержание

2. CSS Лекція 3 Введение Селекторы Специфичность Важность Наследование Каскад Значения и единицы измерения Добавление CSS на
3. Вступ CSS - мова стилів, що визначає відображення HTML-документів. CSS працює зі шрифтами, кольором, полями, рядками,
4. Вступ HTML – це трафарет Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок
5. Вступ Розмітка, але вже з доданими тегами оформлення Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст
6. Вступ CSS: причини появи Надлишковість HTML Більше можливостей для оформлення Спрощення оформлення сторінки Поділ контенту і
7. Селектори селектор, селектор, селектор { /* блок объявления стилей */ свойство: значение; свойство: значение; свойство: значение;
8. Селектори p { font-saze: 12px; /* неизвестное значение (правильно font-size) */ color: ultraviolet; /* неизвестное значение
9. Селектори Групування селекторів h1, p { color: blue; } Універсальний селектор * { color: green; }
10. Селектори Селектори класів .caution { color: red; } Важливий заголовок Параграф, в якому є важливий текст
11. Селектори Множинні класи Червоний заголовок Червоний заголовок div.heading { font-size: 50px; } div.red { color: red;
12. Селектори Селектори ідентифікаторів Атрибут id – задає унікальний ідентифікатор елемента. Червоний заголовок div#heading { font-size: 50px;
13. Селектори Червоний заголовок div#heading { font-size: 50px; } div#red { color: red; }
14. Селектори Універсальний селектор * { color: red; } Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст
15. Селектори Комбінування селекторів div.myclass { color: red; } div.class1.class2 { color: red; } div#id1 { color:
16. Селектори Селектори атрибутів .italic { font-style: italic; } [class="italic"] { color: red; } Цей параграф буде
17. Селектори Простий вибір атрибутів [title] { color: red; } Вибір на підставі конкретного значення атрибуту a[target="_blank"]
18. Селектори псевдокласів Динамічні псевдокласи a:link { color: blue } a:active { color: red } a:hover {
19. Псевдокласи стану Якщо клікнути зміниться колір Під час наведення зміниться колір input: focus { background: blue;
20. Псевдокласи стану :enabled :disabled :checked :indeterminate :read-only :valid
21. Струкрурные пседвоклассы li:first-child { color: green; } Способы подключения CSS на страницу Связанные стили Глобальные стили
22. Струкрурные пседвоклассы Структурные псевдоэлементы :root :first-child/last-child :nth-child()/nth-last-child() :first-of-type/:last-of-type :nth-of-type()/nth-last-of-type() :only-child/only-of-type :empty
23. Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li 3.2 ul 3.1 li 4.1 li 4.2
24. Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li 3.2 ul 3.1 li 4.1 li 4.2
25. Струкрурные пседвоклассы :first-child { background-color :#FF00FF; color: yellow; }
26. Струкрурные пседвоклассы :last-child { background-color :#FF00FF; color: yellow; }
27. Струкрурные пседвоклассы :only-child { background-color :#FF00FF; color: yellow; }
28. Струкрурные пседвоклассы :nth-child(2n) { background-color :#FF00FF; color: yellow; }
29. Струкрурные пседвоклассы li:nth-of-type(2n) { background-color :#FF00FF; color: yellow; }
30. Струкрурные псевдоклассы :nth-of-type(2n) { background-color :#FF00FF; color: yellow; }
31. Селекторы псевдоэлементов ::first-letter { color: red } ::first-line { color: blue } Перший рядок Другий рядок
32. Селекторы псевдоэлементов body:before { content: '=початок='; color: green; } body:after { content: '=кінець='; color: red; }
33. Отношения родитель-потомок
34. Отношения родитель-потомок Селекторы потомков nav a { color: red; text-decoration: none; } Выбор дочерних элементов h1
35. Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li 2.3 ul 3.1 li 4.1 li 4.2
36. Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li 2.3 ul 3.1 li 4.1 li 4.2
37. Отношения родитель-потомок ul li { background-color :#FF00FF; color: yellow; }
38. Отношения родитель-потомок li li{ background-color :#FF00FF; color: yellow; }
39. Отношения родитель-потомок body > *{ background-color :#FF00FF; color: yellow; }
40. Отношения родитель-потомок li:first-child + li{ background-color :#FF00FF; color: yellow; }
41. Отношения родитель-потомок li:first-child ~ li{ background-color :#FF00FF; color: yellow; }
42. Отношения родитель-потомок li:not(:first-child){ background-color :#FF00FF; color: yellow; }
43. Специфичность h1 { color: red; } body h1 { color: green; }
44. Специфичность Значение специфичности : 0, 0, 0, 0. Для каждого указанного в селекторе значения идентификатора к
45. Специфичность Примеры: h1 { color: red; } /* 0, 0, 0, 1 */ p em {
46. Специфичность Специфичность с группированными селекторами h1, h2.section { color: silver; background: black; } h1 { color:
47. Специфичность Инлайн и !important /* 1, 0, 0, 0 */ div { color: green !important; }
48. Наследование Некоторые стили применяются не только к целевому элементу, но и к его потомкам Унаследованные стили
49. Наследование * { color: red; /* 0 0 0 */ } div { color: green; /*
50. Наследование Стили которые наследуются color cursor direction empty-cells font-family font-size font-weight font-style font-variant font letter-spacing list-style-type
51. Каскад h1 { color: red; } h1 { color: blue; } Найти все правила, содержащие селектор,
52. Каскад Сортировка по приоритетности и источнику Порядок применения: Стили браузера Стили пользователя и/или плагинов браузера Стили
53. Значения и единицы измерения Числовые значения: Целые числа (1, 2, 3...) Дробные числа (1.5) Процентные значения
54. Значения и единицы измерения Абсолютные единицы измерения длины Миллиметры (mm) Сантиметры (cm) Дюймы (in) Пункты –
55. Цвета Способы задания красного цвета Именованные цвета – red Функциональный – rgb(255, 0, 0) или rgba(255,
56. Цвета h1 { color: fuchsia; } p { background: yellow; } .red { color: #ff0000; }
57. Добавление CSS на страницу @import ( ) div { color: red } ">
58. Типы устройств
60. Скачать презентацию

Слайд 2

CSS Лекція 3
Введение
Селекторы
Специфичность
Важность
Наследование
Каскад
Значения и единицы измерения
Добавление CSS на страницу
Типы устройств

Слайд 3

Вступ
CSS - мова стилів, що визначає відображення HTML-документів.
CSS працює зі шрифтами,

кольором, полями, рядками, висотою, шириною, фоновими зображеннями, позиціонуванням елементів і багатьма іншими речами.
Основні етапи розвитку
CSS рівень 1 (1996, 1999) - параметри шрифтів, кольору, ...
CSS рівень 2 (12 травня 1998), CSS 2.1 (7 червня 2011) - блокова верстка, селектори, ...
CSS рівень 2.1 (7 червня 2011)
CSS рівнів 3 знаходиться в стадії розробки - трансформації, анімація, ...
CSS рівнів 4 розробляється з 29 вересня 2011 року.

Слайд 4

Вступ
HTML – це трафарет

Основний заголовок

Текст параграфа 1

Підзаголовок 1

Текст параграфа 2

Підзаголовок 1

Текст

параграфа 3

Слайд 5

Вступ
Розмітка, але вже з доданими тегами оформлення

color="red" face="Tahoma">Основний заголовок

Текст параграфа 1

Підзаголовок 1

Текст параграфа 2

Підзаголовок 2

Текст параграфа 3

Слайд 6

Вступ
CSS: причини появи
Надлишковість HTML
Більше можливостей для оформлення
Спрощення оформлення сторінки
Поділ контенту і

візуальної складової сторінки

Основний заголовок

Текст параграфа 1

Підзаголовок 1

Текст параграфа 2

Підзаголовок 1

Текст параграфа 3

Слайд 7

Селектори
селектор,
селектор,
селектор { /* блок объявления стилей */
свойство: значение;
свойство: значение;

свойство: значение;
свойство: значение;
свойство: значение
}

Слайд 8

Селектори
p {
font-saze: 12px; /* неизвестное значение (правильно font-size) */
color:

ultraviolet; /* неизвестное значение (нет такого цвета) */
}
h1 {
font: italic 40px Tahoma; /* три значения для одного свойства */
}

Слайд 9

Селектори
Групування селекторів
h1, p {
color: blue;
}
Універсальний селектор
* {
color: green;
}

Слайд 10

Селектори
Селектори класів
.caution {
color: red;
}
Важливий заголовок

Параграф, в

якому є важливий текст

Слайд 11

Селектори
Множинні класи
Червоний заголовок

Червоний заголовок

div.heading {
font-size: 50px;
}
div.red {

color: red;
}

Слайд 12

Селектори
Селектори ідентифікаторів
Атрибут id – задає унікальний ідентифікатор елемента.
Червоний заголовок

div#heading {
font-size: 50px;
}
div#red {
color: red;
}

Слайд 13

Селектори
Червоний заголовок

div#heading {
font-size: 50px;
}
div#red {
color:

red;
}

Слайд 14

Селектори
Універсальний селектор
* {
color: red;
}
Основний заголовок

Текст параграфа 1

Підзаголовок 1

Текст параграфа 2

Підзаголовок

Текст параграфа 3

Слайд 15

Селектори
Комбінування селекторів
div.myclass { color: red; }
div.class1.class2 { color: red; }
div#id1 {

color: red; }
div#id1.class1 { color: red; }
div#id1#id2 { color: red; }
*.class1 { color: red; }
.class1 { color: red; }

Слайд 16

Селектори
Селектори атрибутів
.italic {
font-style: italic;
}
[class="italic"] {
color: red;
}
Цей параграф буде

виділений курсивним шрифтом.

Цей параграф буде виділений курсивним шрифтом.

Слайд 17

Селектори
Простий вибір атрибутів
[title] { color: red; }
Вибір на підставі конкретного значення

атрибуту
a[target="_blank"] { color: red; }
Вибір по частковому значенню атрибута
* Будь-яка частина рядка
$ кінець рядка
^ початок рядка
[href*="google"] { color: red; }
[href^="https://"] { color: red; }
[href$=“google.com"] { color: red; }

Слайд 18

Селектори псевдокласів
Динамічні псевдокласи
a:link { color: blue }
a:active { color: red }
a:hover

{ color: green }
a:visited { color: purple }
a:focus { color: yellow }

Червоний заголовок

Слайд 19

Псевдокласи стану

Під час наведення зміниться колір
input: focus {
background: blue;
}
button: active {
background: green;
}
a: hover {
color: red;
}

Слайд 20

Псевдокласи стану
:enabled
:disabled
:checked
:indeterminate
:read-only
:valid

Слайд 21

Струкрурные пседвоклассы
li:first-child
{
color: green;
}
Способы подключения
CSS на страницу

Связанные стили

Глобальные стили

Внутренние стили

Слайд 22

Струкрурные пседвоклассы
Структурные псевдоэлементы
:root
:first-child/last-child
:nth-child()/nth-last-child()
:first-of-type/:last-of-type
:nth-of-type()/nth-last-of-type()
:only-child/only-of-type
:empty

Слайд 23

Струкрурные пседвоклассы
ul 1.1

li 2.1

li 2.2

li

3.2

li 4.1

li 4.2

li 4.3

p1.2

Слайд 24

Струкрурные пседвоклассы
ul 1.1

li 2.1

li 2.2

li

3.2

li 4.1

li 4.2

li 4.3

p1.2

Слайд 25

Струкрурные пседвоклассы
:first-child {
background-color :#FF00FF;
color: yellow;
}

Слайд 26

Струкрурные пседвоклассы
:last-child {
background-color :#FF00FF;
color: yellow;
}

Слайд 27

Струкрурные пседвоклассы
:only-child {
background-color :#FF00FF;
color: yellow;
}

Слайд 28

Струкрурные пседвоклассы
:nth-child(2n) {
background-color :#FF00FF;
color: yellow;
}

Слайд 29

Струкрурные пседвоклассы
li:nth-of-type(2n) {
background-color :#FF00FF;
color: yellow;
}

Слайд 30

Струкрурные псевдоклассы
:nth-of-type(2n) {
background-color :#FF00FF;
color: yellow;
}

Слайд 31

Селекторы псевдоэлементов
::first-letter { color: red }
::first-line { color: blue }
Перший рядок
Другий

рядок
Перший рядок
Другий рядок

Слайд 32

Селекторы псевдоэлементов
body:before {
content: '=початок=';
color: green;
}
body:after {

content: '=кінець=';
color: red;
}

Слайд 33

Отношения родитель-потомок

Слайд 34

Отношения родитель-потомок
Селекторы потомков
nav a { color: red; text-decoration: none; }
Выбор дочерних

элементов
h1 > strong { color: red; }
Выбор соседних элементов
h1 + p { margin-top: 0; }
Выбор сестринских элементов
li ~ li {color: blue; }
Селектор отрицания
td:empty { background: red; }
td:not(:empty) { background: green; }

Слайд 35

Отношения родитель-потомок
ul 1.1

li 2.1

li 2.2

li

2.3

li 4.1

li 4.2

li 4.3

p1.2

Слайд 36

Отношения родитель-потомок
ul 1.1

li 2.1

li 2.2

li

2.3

li 4.1

li 4.2

li 4.3

p1.2

Слайд 37

Отношения родитель-потомок
ul li {
background-color :#FF00FF;
color: yellow;
}

Слайд 38

Отношения родитель-потомок
li li{
background-color :#FF00FF;
color: yellow;
}

Слайд 39

Отношения родитель-потомок
body > *{
background-color :#FF00FF;
color: yellow;
}

Слайд 40

Отношения родитель-потомок
li:first-child + li{
background-color :#FF00FF;
color: yellow;
}

Слайд 41

Отношения родитель-потомок
li:first-child ~ li{
background-color :#FF00FF;
color: yellow;
}

Слайд 42

Отношения родитель-потомок
li:not(:first-child){
background-color :#FF00FF;
color: yellow;
}

Слайд 43

Специфичность
h1 {
color: red;
}
body h1 {
color: green;

}

Слайд 44

Специфичность
Значение специфичности : 0, 0, 0, 0.
Для каждого указанного в

селекторе значения идентификатора к специфичности добавляется 0, 1, 0, 0.
Для каждого указанного в селекторе имени класса, псевдокласса или атрибута к специфичности добавляется 0, 0, 1, 0.
Для каждого заданного в селекторе элемента и псевдоэлемента к специфичности добавляется 0, 0, 0, 1.
Универсальный селектор не учитывается

Слайд 45

Специфичность
Примеры:
h1 { color: red; } /* 0, 0, 0, 1 */
p

em { color: purple; } /* 0, 0, 0, 2 */
.grape { color: purple;} /* 0, 0, 1, 0 */
*.bright { color: yellow;} /* 0, 0, 1, 0 */
p.bright em.dark{ color: maroon;} /* 0, 0, 2, 2 */
#id216 { color: blue; } /* 0, 1, 0, 0 */
div#sidebar [href] { color: silver; } /* = 0, 1, 1, 1 */
* { color: yellow; } /* 0, 0, 0, 0 */
h1 {color: red;} /* 0, 0, 0, 1 */
body h1 {color: green;} /* 0, 0, 0, 2 (победитель) */

Слайд 46

Специфичность
Специфичность с группированными селекторами
h1, h2.section { color: silver; background: black; }
h1

{ color: silver; background: black; } /* 0, 0, 0, 1 */
h2.section { color: silver; background: black; } /* 0, 0, 1, 1 */
Специфичность селекторов идентификаторов и атрибутов
#uniq { color: green; } /* 0, 1, 0, 0 */
[id='uniq'] { color: red; } /* 0, 0, 1, 0 */

Слайд 47

Специфичность
Инлайн и !important
/* 1, 0, 0, 0 */

div {
color: green !important;
}
Инлайн стили по-умолчанию приоритетнее стилей в CSS ()
Стили в CSS с !important приоритетнее инлайн стилей
Инлайн стили с !important приоритетнее всего

Слайд 48

Наследование
Некоторые стили применяются не только к целевому элементу, но и к

его потомкам
Унаследованные стили не имеют специфичности, т.е их всегда перебивает любой селектор
Именно поэтому не рекомендуют пользоваться селектором *
div {
color: green; /* 0 0 1 */
}

CSS

- Каскадные таблицы стилей

Слайд 49

Наследование
* {
color: red; /* 0 0 0 */
}
div {
color:

green; /* 0 0 1 */
}

CSS

- Каскадные таблицы стилей

Слайд 50

Наследование
Стили которые наследуются
color
cursor
direction
empty-cells
font-family
font-size
font-weight
font-style
font-variant
font
letter-spacing
list-style-type
list-style-position
list-style-image
list-style
line-height
quotes
text-align
text-indent
text-transform
visibility
white-space
word-spacing

Слайд 51

Каскад
h1 { color: red; }
h1 { color: blue; }
Найти все правила,

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

Слайд 52

Каскад
Сортировка по приоритетности и источнику
Порядок применения:
Стили браузера
Стили пользователя и/или плагинов браузера
Стили

страницы
Стили страницы с !important
Стили пользователя и/или плагинов браузера с !important
Сортировка по порядку расположения:
h1 { color: red; }
h1 { color: blue; } /* имеет более высокий приоритет*/

Слайд 53

Значения и единицы измерения
Числовые значения:
Целые числа (1, 2, 3...)
Дробные числа (1.5)
Процентные

значения (50%)

Слайд 54

Значения и единицы измерения
Абсолютные единицы измерения длины
Миллиметры (mm)
Сантиметры (cm)
Дюймы (in)
Пункты –

используется в типографиях, 1 дюйм = 72 пункта (pt)
Пики – 12 пунктов (pc)
Абсолютные единицы удобны при определении CSS для печати. В вебе же практически не используются
Относительные единицы измерения длины
пикселы (px)
em – зависит от размера шрифта (em)
rem – зависит от размера шрифта корневого элемента (rem)
ex – зависит от высоты символа x в данном шрифте
ch – зависит от ширины символа 0 в данном шрифте
vh/vw – 1/100 высоты и ширины vieport'а соответственно
vmax – 1/100 от максимума между высотой и шириной vieport'а
vmin – 1/100 от минимума между высотой и шириной vieport'а

Слайд 55

Цвета
Способы задания красного цвета
Именованные цвета – red
Функциональный – rgb(255, 0, 0)

или rgba(255, 0, 0, 1)
Шестнадцатиричный – #ff0000 или #f00

Слайд 56

Цвета
h1 { color: fuchsia; }
p { background: yellow; }
.red { color:

#ff0000; }
.orange { color: #eea837; }
.red { color: #f00; } /* #f00 = #ff0000 */
.gray { color: #888; } /* #888 = #888888 */
p { color: rgb( 40%, 40%, 40% ); }
p { color: rgb( 102, 102, 102 ); }
p { color: rgba( 40%, 40%, 40%, 0.5 ); }
p { color: rgba( 102, 102, 102, 0.8 ); }

Слайд 57

Добавление CSS на страницу

Слайд 58

CSS. (Лекція 3) презентация

Содержание

CSS Лекція 3ВведениеСелекторыСпецифичностьВажностьНаследованиеКаскадЗначения и единицы измеренияДобавление CSS на страницуТипы устройств

ВступCSS - мова стилів, що визначає відображення HTML-документів.CSS працює зі шрифтами,

ВступHTML – це трафарет Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок 1 Текст

Основний заголовок

Підзаголовок 1

Підзаголовок 1

ВступРозмітка, але вже з доданими тегами оформлення color="red" face="Tahoma">Основний заголовок

Підзаголовок 1

Підзаголовок 2

ВступCSS: причини появиНадлишковість HTMLБільше можливостей для оформленняСпрощення оформлення сторінкиПоділ контенту і

Основний заголовок

Підзаголовок 1

Підзаголовок 1

Селекториселектор,селектор,селектор { /* блок объявления стилей */ свойство: значение; свойство: значение;

Селекториp { font-saze: 12px; /* неизвестное значение (правильно font-size) */ color:

СелекториГрупування селекторівh1, p { color: blue;}Універсальний селектор* { color: green;}

СелекториСелектори класів.caution { color: red;}Важливий заголовок Параграф, в

Важливий заголовок

СелекториМножинні класиЧервоний заголовокЧервоний заголовокdiv.heading { font-size: 50px;}div.red {

СелекториСелектори ідентифікаторівАтрибут id – задає унікальний ідентифікатор елемента. Червоний заголовок

Селектори Червоний заголовок div#heading { font-size: 50px;}div#red { color:

СелекториУніверсальний селектор* { color: red;}Основний заголовокТекст параграфа 1Підзаголовок 1Текст параграфа 2Підзаголовок

Основний заголовок

Підзаголовок 1

Підзаголовок

СелекториКомбінування селекторівdiv.myclass { color: red; }div.class1.class2 { color: red; }div#id1 {

СелекториСелектори атрибутів.italic { font-style: italic;}[class="italic"] { color: red;}Цей параграф буде

СелекториПростий вибір атрибутів[title] { color: red; }Вибір на підставі конкретного значення

Селектори псевдокласівДинамічні псевдокласиa:link { color: blue }a:active { color: red }a:hover

Псевдокласи стануЯкщо клікнути зміниться колір

Псевдокласи стану:enabled:disabled:checked:indeterminate:read-only:valid

Струкрурные пседвоклассыli:first-child{ color: green;}Способы подключения CSS на страницу Связанные стили

Струкрурные пседвоклассыСтруктурные псевдоэлементы:root:first-child/last-child:nth-child()/nth-last-child():first-of-type/:last-of-type:nth-of-type()/nth-last-of-type():only-child/only-of-type:empty

Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li

Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li

Струкрурные пседвоклассы:first-child { background-color :#FF00FF; color: yellow; }

Струкрурные пседвоклассы:last-child { background-color :#FF00FF; color: yellow; }

Струкрурные пседвоклассы:only-child { background-color :#FF00FF; color: yellow; }

Струкрурные пседвоклассы:nth-child(2n) { background-color :#FF00FF; color: yellow; }

Струкрурные пседвоклассыli:nth-of-type(2n) { background-color :#FF00FF; color: yellow; }

Струкрурные псевдоклассы:nth-of-type(2n) { background-color :#FF00FF; color: yellow; }

Селекторы псевдоэлементов::first-letter { color: red }::first-line { color: blue }Перший рядокДругий

Селекторы псевдоэлементовbody:before { content: '=початок='; color: green; }body:after {

Отношения родитель-потомок

Отношения родитель-потомокСелекторы потомковnav a { color: red; text-decoration: none; }Выбор дочерних

Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li

Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li

Отношения родитель-потомокul li { background-color :#FF00FF; color: yellow; }

Отношения родитель-потомокli li{ background-color :#FF00FF; color: yellow; }

Отношения родитель-потомокbody > *{ background-color :#FF00FF; color: yellow; }

Отношения родитель-потомокli:first-child + li{ background-color :#FF00FF; color: yellow; }

Отношения родитель-потомокli:first-child ~ li{ background-color :#FF00FF; color: yellow; }

Отношения родитель-потомок li:not(:first-child){ background-color :#FF00FF; color: yellow; }

Специфичностьh1 { color: red; }body h1 { color: green;

СпецифичностьЗначение специфичности : 0, 0, 0, 0. Для каждого указанного в

СпецифичностьПримеры:h1 { color: red; } /* 0, 0, 0, 1 */p

СпецифичностьСпецифичность с группированными селекторамиh1, h2.section { color: silver; background: black; }h1

СпецифичностьИнлайн и !important /* 1, 0, 0, 0 */

НаследованиеНекоторые стили применяются не только к целевому элементу, но и к

Наследование* { color: red; /* 0 0 0 */}div { color:

Каскадh1 { color: red; }h1 { color: blue; }Найти все правила,

КаскадСортировка по приоритетности и источникуПорядок применения:Стили браузераСтили пользователя и/или плагинов браузераСтили

Значения и единицы измеренияЧисловые значения:Целые числа (1, 2, 3...)Дробные числа (1.5)Процентные

Значения и единицы измеренияАбсолютные единицы измерения длиныМиллиметры (mm)Сантиметры (cm)Дюймы (in)Пункты –

ЦветаСпособы задания красного цветаИменованные цвета – redФункциональный – rgb(255, 0, 0)

Цветаh1 { color: fuchsia; }p { background: yellow; }.red { color:

Добавление CSS на страницу@import (<url to css>)div { color:</div></h2><div class="slides-content">red }

Типы устройств

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

CSS Лекція 3
Введение
Селекторы
Специфичность
Важность
Наследование
Каскад
Значения и единицы измерения
Добавление CSS на страницу
Типы устройств

Вступ
CSS - мова стилів, що визначає відображення HTML-документів.
CSS працює зі шрифтами,

Вступ
HTML – це трафарет

Основний заголовок

Текст параграфа 1

Підзаголовок 1

Текст параграфа 2

Підзаголовок 1

Текст

Вступ
Розмітка, але вже з доданими тегами оформлення

color="red" face="Tahoma">Основний заголовок

Вступ
CSS: причини появи
Надлишковість HTML
Більше можливостей для оформлення
Спрощення оформлення сторінки
Поділ контенту і

Селектори
селектор,
селектор,
селектор { /* блок объявления стилей */
свойство: значение;
свойство: значение;

Селектори
p {
font-saze: 12px; /* неизвестное значение (правильно font-size) */
color:

Селектори
Групування селекторів
h1, p {
color: blue;
}
Універсальний селектор
* {
color: green;
}

Селектори
Селектори класів
.caution {
color: red;
}
Важливий заголовок

Параграф, в

Селектори
Множинні класи
Червоний заголовок

Червоний заголовок

div.heading {
font-size: 50px;
}
div.red {

Селектори
Селектори ідентифікаторів
Атрибут id – задає унікальний ідентифікатор елемента.
Червоний заголовок

Селектори
Червоний заголовок

div#heading {
font-size: 50px;
}
div#red {
color:

Селектори
Універсальний селектор
* {
color: red;
}
Основний заголовок

Текст параграфа 1

Підзаголовок 1

Текст параграфа 2

Підзаголовок

Селектори
Комбінування селекторів
div.myclass { color: red; }
div.class1.class2 { color: red; }
div#id1 {

Селектори
Селектори атрибутів
.italic {
font-style: italic;
}
[class="italic"] {
color: red;
}
Цей параграф буде

Селектори
Простий вибір атрибутів
[title] { color: red; }
Вибір на підставі конкретного значення

Селектори псевдокласів
Динамічні псевдокласи
a:link { color: blue }
a:active { color: red }
a:hover

Псевдокласи стану

Псевдокласи стану
:enabled
:disabled
:checked
:indeterminate
:read-only
:valid

Струкрурные пседвоклассы
li:first-child
{
color: green;
}
Способы подключения
CSS на страницу

Связанные стили

Струкрурные пседвоклассы
Структурные псевдоэлементы
:root
:first-child/last-child
:nth-child()/nth-last-child()
:first-of-type/:last-of-type
:nth-of-type()/nth-last-of-type()
:only-child/only-of-type
:empty

Струкрурные пседвоклассы
ul 1.1

li 2.1

li 2.2

li

Струкрурные пседвоклассы
ul 1.1

li 2.1

li 2.2

li

Струкрурные пседвоклассы
:first-child {
background-color :#FF00FF;
color: yellow;
}

Струкрурные пседвоклассы
:last-child {
background-color :#FF00FF;
color: yellow;
}

Струкрурные пседвоклассы
:only-child {
background-color :#FF00FF;
color: yellow;
}

Струкрурные пседвоклассы
:nth-child(2n) {
background-color :#FF00FF;
color: yellow;
}

Струкрурные пседвоклассы
li:nth-of-type(2n) {
background-color :#FF00FF;
color: yellow;
}

Струкрурные псевдоклассы
:nth-of-type(2n) {
background-color :#FF00FF;
color: yellow;
}

Селекторы псевдоэлементов
::first-letter { color: red }
::first-line { color: blue }
Перший рядок
Другий

Селекторы псевдоэлементов
body:before {
content: '=початок=';
color: green;
}
body:after {

Отношения родитель-потомок
Селекторы потомков
nav a { color: red; text-decoration: none; }
Выбор дочерних

Отношения родитель-потомок
ul 1.1

li 2.1

li 2.2

li

Отношения родитель-потомок
ul 1.1

li 2.1

li 2.2

li

Отношения родитель-потомок
ul li {
background-color :#FF00FF;
color: yellow;
}

Отношения родитель-потомок
li li{
background-color :#FF00FF;
color: yellow;
}

Отношения родитель-потомок
body > *{
background-color :#FF00FF;
color: yellow;
}

Отношения родитель-потомок
li:first-child + li{
background-color :#FF00FF;
color: yellow;
}

Отношения родитель-потомок
li:first-child ~ li{
background-color :#FF00FF;
color: yellow;
}

Отношения родитель-потомок
li:not(:first-child){
background-color :#FF00FF;
color: yellow;
}

Специфичность
h1 {
color: red;
}
body h1 {
color: green;

Специфичность
Значение специфичности : 0, 0, 0, 0.
Для каждого указанного в

Специфичность
Примеры:
h1 { color: red; } /* 0, 0, 0, 1 */
p

Специфичность
Специфичность с группированными селекторами
h1, h2.section { color: silver; background: black; }
h1

Специфичность
Инлайн и !important
/* 1, 0, 0, 0 */

Наследование
Некоторые стили применяются не только к целевому элементу, но и к

Наследование
* {
color: red; /* 0 0 0 */
}
div {
color:

Каскад
h1 { color: red; }
h1 { color: blue; }
Найти все правила,

Каскад
Сортировка по приоритетности и источнику
Порядок применения:
Стили браузера
Стили пользователя и/или плагинов браузера
Стили

Значения и единицы измерения
Числовые значения:
Целые числа (1, 2, 3...)
Дробные числа (1.5)
Процентные

Значения и единицы измерения
Абсолютные единицы измерения длины
Миллиметры (mm)
Сантиметры (cm)
Дюймы (in)
Пункты –

Цвета
Способы задания красного цвета
Именованные цвета – red
Функциональный – rgb(255, 0, 0)

Цвета
h1 { color: fuchsia; }
p { background: yellow; }
.red { color:

Добавление CSS на страницу