Что такое CSS

Сентябрь 13, 2022

Главная
Алгебра
Что такое CSS

Содержание

2. HTML + CSS HTML + CSS = Веб-страница HTML отвечает за структуру и содержание CSS отвечает
3. HTML
4. Что такое CSS? Cascading Style Sheets - каскадные таблицы стилей CSS - язык, который используется для
5. CSS-правило Стили страницы формируются с помощью списка CSS-правил
6. Селекторы Селекторы определяют, к какому элементу применить CSS-правило.
7. Виды селекторов - различные варианты обращения к элементу
8. Селектор тега
9. Селектор класса
10. Контекстные(вложенные) селекторы
11. Соседние селекторы 1 этаж 2 этаж 3 этаж 4 этаж .first + .item {…} - расположены
12. Селекторы по родственным связям Потомки: html p {…}, body p Дочерние (ближайшие потомки): div > p,
13. Псевдоклассы
14. Псевдоклассы для ссылок a:link { ... } - не посещенные ссылки a:visited { ... } -
15. селекторы По классу: .article-link {...} По имени тега: a {...} По идентификатору: #main-link {…} По любому
16. Итого HTML+CSS = web-страница HTML = структуру и содержание CSS = внешний вид CSS формируется списком
17. Загадка?
18. Каскадность
19. Каскадность Каскадность - к одному элементу могут применяться несколько css-правил (свойств) Конфликты свойств Правила для разрешения
20. Специфичность Чем меньше количество элементов попадает под данный селектор, тем он специфичней Рассчет специфичности: #id —>
21. Наследование Наследование - механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам Если бы не
22. Наследуемые стили Наследуются - параметры отображения текста (размер шрифта, тип шрифта, цвет и т.д.) font-size, font-family,
23. Не все стили наследуются Если бы свойство наследовалось:
24. Не наследуются Не наследуются - размеры, отступы, фоны, рамки - background, border, padding, margin, width, height…
25. Способы подключения CSS … ….
26. Что в итоге? Каскадность, наследование, специфичность Способы подключения CSS Итоговый вид элемента
28. Блочная модель документа
29. Блочные и строчные HTML страница состоит из вложенных друг в друга прямоугольников Блочные элементы Строчные элементы
30. Блочные элементы Всегда имеют форму прямоугольника По умолчанию тянется на всю ширину родителя Высота зависит от
31. Размеры блока width: 50%; - ширина содержимого блока height: 200px; - высота содержимого блока DANGER! Выпадение!
32. border: 2px solid red;
33. padding: 10px; Внутренний отступ от границы блока до содержимого
34. margin: 10px; Внешние отступы между границами блока и его родителем и соседям
35. Загадка Схлопывание внешних отступов
36. Блочные элементы width - ширина блока height - высота блока border - рамка padding - отступ
37. Инлайновые элементы
38. Инлайновые элементы Инлайновые = строчные Высота и ширина зависят от содержимого Следуя друг за дружкой, инлайновые
39. Блочно-строчные элементы
40. Блочно-строчные элементы Имеют форму прямоугольника Размеры определяются содержимым Размеры можно менять (width, height) Рисуются в той
41. Итого Блочная модель документа display: block; display: inline; display: inline-block; Свойства блочной модели: width - ширина
42. Полный размер блока width - задает ширину содержимого Общая ширина блока = width + 2 *
43. box-sizing: border-box
44. Итого Таким образом, итоговое значение ширины и высоты элемента отличается от значений, задаваемых в width и
45. Оформление текста
46. Абсолютные: 16px (пиксели) Относительные: 0.5em, 75% (относительно размера шрифта родителя), rem - относительно размера шрифта в
47. font-family Определяет шрифт и/или семейство шрифтов Выглядит так: font-family: "Times New Roman"; font-family: 'Cuprum', ‘Aria', sans-serif;
48. font-family: 'Open Sans', Helvetica, sans-serif
49. Оформление текста font-size font-family line-height font-weight font-style color
50. line-height Межстрочный интервал/высота строки line-height: 3.5; - множитель line-height: normal; - автоматический расчет line-height: 150%; line-height:
51. Прочее font-weight - насыщенность (жирность) шрифта: bold/normal/bolder/lighter font-style - начертание: normal / italic color: #ab12ff
52. Еще свойства для текста: text-transform - регистр text-decoration - подчеркивание/перечеркивание text-shadow - тень white-space - управляет
53. Подведем итог.
54. Спасибо за внимание!
57. Дополнение
58. Значения
59. css-правило .main-content h1{ color: #ace503; font-size: 20px; position: relative; } Селектор, далее в фигурных скобках правила
60. Какие бывают значения? Абсолютные - твердые .adv-text { font-size: 18px; } Относительные - зависят от других
61. Размеры Пиксели 20px em - 3em; - значение в пикселях вычисляется от размера шрифта родителя rem
62. Цвета color словами: red, lightcoral, green rgb: #98dd43, rgb(127,127,127), rgba(255, 255, 0. 0.5) hsl: hsl(159, 21%,
63. Ключевые слова display: block; vertical-align: top; color: red; text-decoration: line-through; TEXT-TRANSFORM: UPPERCASE;
65. Скачать презентацию

Слайд 2

HTML + CSS
HTML + CSS = Веб-страница
HTML отвечает за структуру

и содержание
CSS отвечает за внешний вид

Слайд 3

HTML

Слайд 4

Что такое CSS?
Cascading Style Sheets - каскадные таблицы стилей
CSS -

язык, который используется для оформления внешнего вида HTML-документов

Слайд 5

CSS-правило
Стили страницы формируются с помощью списка CSS-правил

Слайд 6

Селекторы
Селекторы определяют, к какому элементу применить CSS-правило.

Слайд 7

Виды селекторов - различные варианты обращения к элементу

Слайд 8

Селектор тега

Слайд 9

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

Слайд 10

Контекстные(вложенные) селекторы

Слайд 11

Соседние селекторы

1 этаж

2 этаж

3 этаж

4

этаж

.first + .item {…} - расположены рядом
.parent .first + .item {…} - вложенный и соседний

Слайд 12

Селекторы по родственным связям
Потомки: html p {…}, body p
Дочерние (ближайшие потомки):

div > p, body > div > p (удобно использовать с многоуровневыми списками)

Слайд 13

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

Слайд 14

Псевдоклассы для ссылок
a:link { ... } - не посещенные ссылки
a:visited {

... } - посещенные ссылки
a:hover { ... } - ссылки на которые наведен курсор
a:active { ... } - активная ссылка(кнопка мыши зажата на ссылке)

Слайд 15

селекторы

По классу: .article-link {...}
По имени тега:

a {...}
По идентификатору: #main-link {…}
По любому атрибуту: [target="_blank"] {...} или [class="article-link"] {…} (чаще всего используются в формах)
Селекторы можно комбинировать, уточняя выбор a.article-link {...} .article-link .article-item {…} - контекстные/вложенные

Слайд 16

Итого
HTML+CSS = web-страница
HTML = структуру и содержание
CSS = внешний

вид
CSS формируется списком CSS-правил
Селекторы - используем для поиска элементов и применения к ним стилей

Слайд 17

Загадка?

Слайд 18

Каскадность

Слайд 19

Каскадность
Каскадность - к одному элементу могут применяться несколько css-правил (свойств)
Конфликты

свойств
Правила для разрешения конфликтов:
Специфичность
Наследование
Порядок следования стилей

Слайд 20

Специфичность
Чем меньше количество элементов попадает под данный селектор, тем он специфичней
Рассчет

специфичности:
#id —> 100
.class —> 10
tag —> 1

#super .cold VS #super span

Слайд 21

Наследование
Наследование - механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам
Если

бы не было наследования:

Слайд 22

Наследуемые стили
Наследуются - параметры отображения текста (размер шрифта, тип шрифта, цвет

и т.д.) font-size, font-family, font-style, font-weight, color… Например: стили шрифта для всего документа задаем в body {…}
https://www.w3.org/TR/CSS21/propidx.html

Слайд 23

Не все стили наследуются
Если бы свойство наследовалось:

Слайд 24

Не наследуются
Не наследуются - размеры, отступы, фоны, рамки - background, border, padding, margin, width, height…

Слайд 25

Способы подключения CSS

….

Слайд 26

Что в итоге?
Каскадность, наследование, специфичность
Способы подключения CSS
Итоговый вид элемента

Слайд 27

Слайд 28

Блочная модель документа

Слайд 29

Блочные и строчные
HTML страница состоит из вложенных друг в друга прямоугольников
Блочные

элементы
Строчные элементы

Слайд 30

Блочные элементы
Всегда имеют форму прямоугольника
По умолчанию тянется на всю ширину родителя
Высота

зависит от содержимого
Блоку можно задавать размеры и отступы
До и после блочного элемента есть перенос строки
К блочным элементам относятся такие теги как:

,

Слайд 31

Размеры блока
width: 50%; - ширина содержимого блока
height: 200px; - высота содержимого

блока

DANGER! Выпадение!

Слайд 32

border: 2px solid red;

Слайд 33

padding: 10px;
Внутренний отступ от границы блока до содержимого

Слайд 34

margin: 10px;
Внешние отступы между границами блока и его родителем и соседям

Слайд 35

Загадка
Схлопывание внешних отступов

Слайд 36

Блочные элементы
width - ширина блока
height - высота блока
border - рамка
padding -

отступ от границы блока до содержимого
margin - отступ между границами блока и его родителем и соседям

К свойствам блочной модели относят те, которые влияют на размер элемента.

Слайд 37

Инлайновые элементы

Слайд 38

Инлайновые элементы
Инлайновые = строчные
Высота и ширина зависят от содержимого
Следуя друг за

дружкой, инлайновые элементы будут идти в одной строке, не вызывая переноса
Можно задавать только горизонтальные отступы
К строчным элементам относятся такие теги как: , , ,

Слайд 39