Каскадные таблицы стилей (CSS)

1.

C
S
S
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ
(CSS)

2.

КЛЮЧЕВЫЕ МОМЕНТЫ
CSS
- CSS расшифровывается как Cascading Style Sheets
- CSS используется для стилизации веб страниц
- CSS позволяет изменять размер шрифта, цвет или размер
различных элементов на веб – странице
- CSS предоставляет широкий набор возможностей для
стилизации, что позволяет веб – сайтам работать на разных
устройствах с разными размерами экранов
2

3.

СВЯЗЬ МЕЖДУ HTML И CSS
- HTML и CSS используются вместе для создания удобных и красивых
веб – сайтов
- HTML определяет структуру и содержание веб – страницы
- CSS определяет стиль отображаемого на веб – странице содержания
- Следуя принципу разделения задач, HTML заботится о содержании, а
CSS заботится о стиле этого содержания
3

4.

САЙТ БЕЗ
CSS
4

5.

САЙТ С
CSS
5

6.

СПОСОБЫ ДОБАВЛЕНИЯ CSS НА СТРАНИЦУ
ВСТРОЕННЫЙ CSS
ВНУТРЕННИЙ CSS
ВНЕШНИЙ CSS
6

7.

СИНТАКСИС
CSS
7

8.

СИНТАКСИС
CSS
8

9.

СИНТАКСИС
CSS
9

10.

CSS СЕЛЕКТОРЫ
- Для применения стилей CSS
необходимо использовать CSS селекторы
- Существует множество CSS селекторов,
например, по HTML тегам, классам, id и
другим
- Один селектор может выбирать один
или несколько HTML элементов
- Используя вложенные CSS селекторы
можно выбирать вложенные элементы
10

11.

ТИПЫ CSS
СЕЛЕКТОРОВ
Универсальный
селектор
Селектор типов
Селектор по ID
Групповой
селектор
Селектор классов
Селектор
атрибутов
11

12.

УНИВЕРСАЛЬНЫЙ
СЕЛЕКТОР
12

13.

СЕЛЕКТОР ТИПОВ
13

14.

СЕЛЕКТОР КЛАССОВ
14

15.

СЕЛЕКТОР ПО ID
15

16.

ГРУППОВОЙ
СЕЛЕКТОР
16

17.

СЕЛЕКТОР
АТРИБУТОВ
17

18.

КОМБИНАТОРЫ CSS
Комбинаторы позволяют объединить
несколько селекторов для выбора
элементов на основе их положения на
веб – странице или их отношения к
другим элементам
Два селектора могут быть соединены
путём добавления комбинатора между
ними
Комбинаторы позволяют выбирать
элементы более гибко
18

19.

ТИПЫ
КОМБИНАТОРОВ
Комбинатор
потомков
Комбинатор
прямых потомков
Комбинатор
соседнего родства
Комбинатор
общего родства
19

20.

КОМБИНАТОР
ПОТОМКОВ
20

21.

КОМБИНАТОР
ПРЯМЫХ ПОТОМКОВ
21

22.

КОМБИНАТОР
СОСЕДНЕГО РОДСТВА
22

23.

КОМБИНАТОР
ОБЩЕГО РОДСТВА
23

24.

ВОЗМОЖНОСТЬ ИСПОЛЬЗОВАНИЯ
НЕСКОЛЬКИХ КОМБИНАТОРОВ СРАЗУ
24

25.

БЛОЧНАЯ
МОДЕЛЬ
Каждый элемент, отображаемый на веб –
странице, можно рассматривать как блок (box)
Блок имеет четыре характеристики, которые
можно контролировать с помощью CSS
Характеристики влияют на отображение блока на
веб странице
25

26.

ЗОНЫ БЛОЧНОЙ МОДЕЛИ
26

27.

ЗОНЫ БЛОЧНОЙ МОДЕЛИ
27

28.

ШИРИНА И ВЫСОТА СОДЕРЖИМОГО
CSS свойство width задает ширину элемента
CSS свойство height устанавливает высоту
элемента
Width и height – это ширина и высота области
содержимого по умолчанию
28

29.

ШИРИНА И ВЫСОТА СОДЕРЖИМОГО
29

30.

ПРОЦЕНТЫ
30

31.

БЛОЧНАЯ
МОДЕЛЬ
BORDER
PADDING
MARGIN
31

32.

BORDER (ГРАНИЦА)
CSS свойство border определяет границу
элемента
Значение для свойства border состоит из трёх
частей, что позволяет стилизовать ширину, цвет и
стиль границы
32

33.

BORDER (ГРАНИЦА)
33

34.

ВАРИАНТЫ СВОЙСТВА BORDER
34

35.

ЗАКРУГЛЁННЫЕ УГЛЫ
35

36.

ВАРИАНТЫ BORDER - RADIUS
36

37.

PADDING
Padding – это пространство между содержимым
элемента и его границей
CSS свойство определяет внутренний отступ со
всех четырёх сторон элемента
Padding также может быть определён для каждой
стороны элемента отдельно: сверху, справа,
снизу, слева
37

38.

PADDING
38

39.

ВАРИАНТЫ PADDING
39

40.

MARGIN
40

41.

ВАРИАНТЫ СВОЙСТВА MARGIN
41

42.

АЛЬТЕРНАТИВН
АЯ БЛОЧНАЯ
МОДЕЛЬ
ПРОБЛЕМЫ В БЛОЧНОЙ
МОДЕЛИ
Свойства width и height устанавливают ширину и
высоту элемента по умолчанию
Padding и border добавляются к ширине и высоте
Таким образом, это означает, что элемент с
шириной 100px будет иметь реальную ширину
более 100px
42

43.

ПРИМЕР
43

44.

АЛЬТЕРНАТИВН
АЯ БЛОЧНАЯ
МОДЕЛЬ
CSS свойство box-sizing позволяет изменить
поведение в блочной модели по умолчанию
Значением box-sizing по умолчанию является
content-box, а это блочная модель по умолчанию
Альтернативной блочной моделью является
border-box
В альтернативной блочной модели ширина
границы и внутренний отступ не добавляются к
ширине и высоте. Они учитываются в общей
ширине и высоте
44

45.

ПРИМЕР
45

46.

СТИЛИЗАЦИЯ
ТЕКСТА CSS
Текст – один из самых важных компонентов веб –
страницы
CSS предоставляет множество свойств, которые
позволяют оформлять текст
Помимо стилизации стандартного шрифта на веб
– странице, мы также можем использовать другие
шрифты
46

47.

ЦВЕТ ТЕКСТА
47

48.

КУРСИВНЫЙ ТЕКСТ
48

49.

ЖИРНЫЙ ТЕКСТ
49

50.

РАЗМЕР ШРИФТА
50

51.

ВЫСОТА СТРОК
51

52.

РЕГИСТР ТЕКСТА
52

53.

ПОДЧЕРКИВАНИЕ И ПЕРЕЧЕРКИВАНИЕ
53

54.

ПОДЧЕРКИВАНИЕ И ПЕРЕЧЕРКИВАНИЕ
54

55.

ВЫРАВНИВАНИЕ ТЕКСТА
55