Введение в CSS. Селекторы. (Лекция 2)

Август 21, 2022

Главная
Информатика
Введение в CSS. Селекторы. (Лекция 2)

Содержание

2. Преимущества стилей 1) Разграничение кода и оформления Идея о том, чтобы код HTML был свободен от
3. Преимущества стилей 4) Ускорение загрузки сайта При хранении стилей в отдельном файле, он кэшируется и при
4. Сочетание разных методов
5. Типы носителей
6. Базовый синтаксис CSS
7. Создание стилей CSS P { color: #0000FF } P — это селектор. Он представляет собой имя
8. Комментарии CSS
9. Значения стилевых свойств Строки Числа
10. Абсолютные единицы Значения стилевых свойств Абсолютные значения размера являются простейшими значениями, поскольку они привязаны к физическим
11. Значения стилевых свойств В дополнение к абсолютным значениям размеров есть также относительные размеры. Они немного сложнее,
12. Цвет Значения стилевых свойств
13. Значения стилевых свойств Адреса Ключевые слова
14. Классы Тег.Имя класса { свойство1: значение; свойство2: значение; ... } .Имя класса { свойство1: значение; свойство2:
15. Классы
16. Классы
17. Идентификаторы #Имя идентификатора { свойство1: значение; свойство2: значение; ... }
18. Идентификатор совместно с тегом Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
19. Селектор потомка Тег1 Тег2 { ... }
20. Селектор потомка
21. Дочерние селекторы
22. Селектор 1 > Селектор 2 { Описание правил стиля } Дочерние селекторы
23. Соседние селекторы Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
24. Использование соседних селекторов
25. Селекторы атрибутов Простой селектор атрибута [атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля
26. Атрибут со значением Селекторы атрибутов [атрибут="значение"] { Описание правил стиля } Селектор[атрибут="значение"] { Описание правил стиля
27. Значение атрибута начинается с определённого текста Селекторы атрибутов [атрибут^="значение"] { Описание правил стиля } Селектор[атрибут^="значение"] {
28. Значение атрибута оканчивается определённым текстом Селекторы атрибутов [атрибут$="значение"] { Описание правил стиля } Селектор[атрибут$="значение"] { Описание
29. Значение атрибута содержит указанный текст Селекторы атрибутов [атрибут*="значение"] { Описание правил стиля } Селектор[атрибут*="значение"] { Описание
30. Одно из нескольких значений атрибута Селекторы атрибутов [атрибут~="значение"] { Описание правил стиля } Селектор[атрибут~="значение"] { Описание
31. Дефис в значении атрибута Селекторы атрибутов [атрибут|="значение"] { Описание правил стиля } Селектор[атрибут|="значение"] { Описание правил
33. Универсальный селектор * { Описание правил стиля }
34. Правила специфичности Существует 4 правила по которым вычисляется специфичность селекторов: 1) Самый высокий приоритет имеет атрибут
36. Скачать презентацию

Слайд 2

Преимущества стилей
1) Разграничение кода и оформления
Идея о том, чтобы код HTML

был свободен от элементов оформления вроде установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задаётся через стили. При подобном разделении работа над дизайном и версткой сайта может вестись параллельно.
2) Разное оформление для разных устройств
С помощью стилей можно определить вид веб-страницы для разных устройств вывода: монитора, принтера, смартфона, планшета и др. Например, на экране монитора отображать страницу в одном оформлении, а при её печати — в другом. Эта возможность также позволяет скрывать или показывать некоторые элементы документа при отображении на разных устройствах.
3) Расширенные по сравнению с HTML способы оформления элементов
В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.

Слайд 3

Преимущества стилей
4) Ускорение загрузки сайта
При хранении стилей в отдельном файле, он

кэшируется и при повторном обращении к нему извлекается из кэша браузера. За счёт кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов.
5) Единое стилевое оформление множества документов
Сайт это не просто набор связанных между собой документов, но и одинаковое расположение основных блоков, и их вид. Применение единообразного оформления заголовков, основного текста и других элементов создает преемственность между страницами и облегчает пользователям работу с сайтом и его восприятие в целом. Разработчикам же использование стилей существенно упрощает проектирование дизайна.
6) Централизованное хранение
Стили, как правило, хранятся в одном или нескольких специальных файлах, ссылка на которые указывается во всех документах сайта. Вместо того чтобы модифицировать десятки HTML-файлов, достаточно отредактировать один файл со стилем и оформление нужных документов сразу же поменяется.

Слайд 4

Сочетание разных методов

Слайд 5

Типы носителей

Слайд 6

Базовый синтаксис CSS

Слайд 7

Создание стилей CSS
P { color: #0000FF }
P — это селектор.

Он представляет собой имя тега

.
color — это атрибут стиля. Он задает цвет текста.
#0000FF — это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB

Пример

Слайд 8

Комментарии CSS

Слайд 9

Значения стилевых свойств
Строки
Числа

Слайд 10

Абсолютные единицы
Значения стилевых свойств
Абсолютные значения размера являются простейшими значениями, поскольку они

привязаны к физическим единицам, таким как дюймы, сантиметры или миллиметры. Самая популярная абсолютная единица измерения известна как пиксель и представлена в виде записи px.

Слайд 11

Значения стилевых свойств
В дополнение к абсолютным значениям размеров есть также относительные

размеры. Они немного сложнее, так как не являются фиксированными единицами измерения, а основаны на размере другого измерения

Относительные единицы

Слайд 12

Цвет
Значения стилевых свойств

Слайд 13

Значения стилевых свойств
Адреса
Ключевые слова

Слайд 14

Классы
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
.Имя класса {

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

Слайд 15

Классы

Слайд 16

Классы

Слайд 17

Идентификаторы
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Слайд 18

Идентификатор совместно с тегом
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ...

}

Слайд 19

Селектор потомка
Тег1 Тег2 { ... }

Слайд 20

Селектор потомка

Слайд 21

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

Слайд 22

Селектор 1 > Селектор 2 { Описание правил стиля }
Дочерние селекторы

Слайд 23

Соседние селекторы
Lorem ipsum dolor sit amet.

Lorem ipsum dolor `sit` amet.

Lorem ipsum

dolor sit amet, consectetuer adipiscing elit.

Селектор 1 + Селектор 2 { Описание правил стиля }

Слайд 24

Использование соседних селекторов

Слайд 25

Селекторы атрибутов
Простой селектор атрибута
[атрибут] { Описание правил стиля }
Селектор[атрибут] {

Описание правил стиля }

Слайд 26

Атрибут со значением
Селекторы атрибутов
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"]

{ Описание правил стиля }

Слайд 27

$Значение атрибута начинается с определённого текста Селекторы атрибутов [атрибут^="значение"] { Описание$

Значение атрибута начинается с определённого текста
Селекторы атрибутов
[атрибут^="значение"] { Описание правил стиля

}
Селектор[атрибут^="значение"] { Описание правил стиля }

Слайд 28

Значение атрибута оканчивается определённым текстом
Селекторы атрибутов
[атрибут$="значение"] { Описание правил стиля }

Селектор[атрибут$="значение"] { Описание правил стиля }

Слайд 29

Значение атрибута содержит указанный текст
Селекторы атрибутов
[атрибут*="значение"] { Описание правил стиля }

Селектор[атрибут*="значение"] { Описание правил стиля }

Слайд 30

Одно из нескольких значений атрибута
Селекторы атрибутов
[атрибут~="значение"] { Описание правил стиля }

Селектор[атрибут~="значение"] { Описание правил стиля }

Слайд 31

Дефис в значении атрибута
Селекторы атрибутов
[атрибут|="значение"] { Описание правил стиля }

Селектор[атрибут|="значение"] { Описание правил стиля }

[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }

Слайд 32

Слайд 33

Универсальный селектор
* { Описание правил стиля }

Слайд 34

Правила специфичности
Существует 4 правила по которым вычисляется специфичность селекторов:
1) Самый высокий

приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
2) Второе место занимает присутствие ID в селекторе(#some-id).
3) Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.
4) Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).
Все 4 правила сводятся в одну систему a-b-c-d(где а - наивысший приоритет) и образуют специфичность.

Введение в CSS. Селекторы. (Лекция 2)

Содержание

Преимущества стилей1) Разграничение кода и оформленияИдея о том, чтобы код HTML

Преимущества стилей4) Ускорение загрузки сайтаПри хранении стилей в отдельном файле, он

Сочетание разных методов

Типы носителей

Базовый синтаксис CSS

Создание стилей CSSP { color: #0000FF } P — это селектор.

Комментарии CSS

Значения стилевых свойствСтрокиЧисла

Абсолютные единицыЗначения стилевых свойствАбсолютные значения размера являются простейшими значениями, поскольку они

Значения стилевых свойствВ дополнение к абсолютным значениям размеров есть также относительные

ЦветЗначения стилевых свойств

Значения стилевых свойствАдресаКлючевые слова

КлассыТег.Имя класса { свойство1: значение; свойство2: значение; ... }.Имя класса {

Классы

Классы

Идентификаторы#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Идентификатор совместно с тегомТег#Имя идентификатора { свойство1: значение; свойство2: значение; ...

Селектор потомкаТег1 Тег2 { ... }

Селектор потомка

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

Селектор 1 > Селектор 2 { Описание правил стиля }Дочерние селекторы

Соседние селекторыLorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum

Использование соседних селекторов

Селекторы атрибутовПростой селектор атрибута[атрибут] { Описание правил стиля } Селектор[атрибут] {

Атрибут со значениемСелекторы атрибутов[атрибут="значение"] { Описание правил стиля } Селектор[атрибут="значение"]

Значение атрибута начинается с определённого текстаСелекторы атрибутов[атрибут^="значение"] { Описание правил стиля

Значение атрибута оканчивается определённым текстомСелекторы атрибутов[атрибут$="значение"] { Описание правил стиля }

Значение атрибута содержит указанный текстСелекторы атрибутов[атрибут*="значение"] { Описание правил стиля }

Одно из нескольких значений атрибутаСелекторы атрибутов[атрибут~="значение"] { Описание правил стиля }

Дефис в значении атрибутаСелекторы атрибутов[атрибут|="значение"] { Описание правил стиля }

Универсальный селектор* { Описание правил стиля }

Правила специфичностиСуществует 4 правила по которым вычисляется специфичность селекторов:1) Самый высокий

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

Преимущества стилей
1) Разграничение кода и оформления
Идея о том, чтобы код HTML

Преимущества стилей
4) Ускорение загрузки сайта
При хранении стилей в отдельном файле, он

Создание стилей CSS
P { color: #0000FF }
P — это селектор.

Значения стилевых свойств
Строки
Числа

Абсолютные единицы
Значения стилевых свойств
Абсолютные значения размера являются простейшими значениями, поскольку они

Значения стилевых свойств
В дополнение к абсолютным значениям размеров есть также относительные

Цвет
Значения стилевых свойств

Значения стилевых свойств
Адреса
Ключевые слова

Классы
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
.Имя класса {

Идентификаторы
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Идентификатор совместно с тегом
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ...

Селектор потомка
Тег1 Тег2 { ... }

Селектор 1 > Селектор 2 { Описание правил стиля }
Дочерние селекторы

Соседние селекторы
Lorem ipsum dolor sit amet.

Lorem ipsum dolor `sit` amet.

Lorem ipsum

Селекторы атрибутов
Простой селектор атрибута
[атрибут] { Описание правил стиля }
Селектор[атрибут] {

Атрибут со значением
Селекторы атрибутов
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"]

Значение атрибута начинается с определённого текста
Селекторы атрибутов
[атрибут^="значение"] { Описание правил стиля

Значение атрибута оканчивается определённым текстом
Селекторы атрибутов
[атрибут$="значение"] { Описание правил стиля }

Значение атрибута содержит указанный текст
Селекторы атрибутов
[атрибут*="значение"] { Описание правил стиля }

Одно из нескольких значений атрибута
Селекторы атрибутов
[атрибут~="значение"] { Описание правил стиля }

Дефис в значении атрибута
Селекторы атрибутов
[атрибут|="значение"] { Описание правил стиля }

Универсальный селектор
* { Описание правил стиля }

Правила специфичности
Существует 4 правила по которым вычисляется специфичность селекторов:
1) Самый высокий