Fullstack разработка. Введение в CSS

Содержание

Слайд 2

em привязан к размеру шрифта, заданного в браузере по умолчанию или

em привязан к размеру шрифта, заданного в браузере по умолчанию или к

размеру шрифта родительского элемента. А ex это высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. То есть em также привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. 
Слайд 3

CSS (Cascading Style Sheets) CSS — это язык стилей, определяющий отображение HTML-документов.

CSS (Cascading Style Sheets)

CSS — это язык стилей, определяющий отображение HTML-документов.

Слайд 4

Исходный код документа

Исходный код документа

Слайд 5

Исходный код документа (результат)

Исходный код документа (результат)

Слайд 6

Содержимое стилевого файла

Содержимое стилевого файла

Слайд 7

Содержимое стилевого файла (результат)

Содержимое стилевого файла (результат)

Слайд 8

Типы стилей Стиль браузера; Стиль автора; Стиль пользователя.

Типы стилей

Стиль браузера;
Стиль автора;
Стиль пользователя.

Слайд 9

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

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это

оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.
Например, заголовок страницы, формируемый тегом

, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Слайд 10

Стиль автора Стиль, который добавляет к документу его разработчик. Этот стиль определяется файлом style.css

Стиль автора

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

файлом style.css
Слайд 11

Стиль пользователя Это стиль, который может включить пользователь сайта через настройки

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера.

Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление».
Слайд 12

Способы добавления стилей на страницу Связанные стили; Глобальные стили; Внутренние стили; Импорт CSS.

Способы добавления стилей на страницу

Связанные стили;
Глобальные стили;
Внутренние стили;
Импорт CSS.

Слайд 13

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

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

Слайд 14

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

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

Слайд 15

Внутренние (инлайн-) стили

Внутренние (инлайн-) стили

Слайд 16

Импорт CSS

Импорт CSS

Слайд 17

Базовый синтаксис CSS Selector (селектор) — указывает на тег, класс или

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

Selector (селектор) — указывает на тег, класс или идентификатор к

которому применяются стилевые параметры.
Property (свойство) — указывает, какое стилевое свойство применить к данному селектору (например: цвета, границы, размеры, шрифты и т.д.).
Value (значение) — указывает, какие именно значения установить для определённого свойства.
Слайд 18

Формы записи

Формы записи

Слайд 19

Разные значения у одного свойства

Разные значения у одного свойства

Слайд 20

Комментарии

Комментарии

Слайд 21

Размеры

Размеры

Слайд 22

Адреса

Адреса

Слайд 23

Представление цветов В шестнадцатиричном виде (пример: #FF00EE или в краткой форме:

Представление цветов

В шестнадцатиричном виде (пример: #FF00EE или в краткой форме: #F0E);
По названию константы (red, green, orange, olive и

т.д.);
С помощью функции rgb в десятичном представлении (например: rgb(128, 255, 0) или rgb(51%, 100%, 0) ).
С помощью функции rgba, где добавляется альфа-канал, позволяющий изменять прозрачность (например: rgba(128, 255, 0, 0.5)).
Слайд 24

Некоторые цвета

Некоторые цвета

Слайд 25

Классы

Классы

Слайд 26

Идентификаторы

Идентификаторы

Слайд 27

Идентификаторы и классы Идентификаторы и классы чувствительны к регистру.

Идентификаторы и классы

Идентификаторы и классы чувствительны к регистру.

Слайд 28

Контекстные селекторы

Контекстные селекторы

Слайд 29

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

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

Слайд 30

Дочерние элементы

Дочерние элементы

Слайд 31

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

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

Слайд 32

Универсальный селектор Стиль применяется ко всем тегам. Например, в данном случае

Универсальный селектор

Стиль применяется ко всем тегам.
Например, в данном случае стиль установит

красный цвет текста для всех элементов, которые находятся в теге 

:

Слайд 33

Селекторы атрибутов Стиль применяется к селектору, но только в том случае,

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

Стиль применяется к селектору, но только в том случае, если у

этого элемента имеется атрибут, значение которого равно указанному. Значение атрибута можно опустить — в таком случае стиль применится ко всем элементам, которые устанавливает селектор, у которых имеется указанный атрибут.
Слайд 34

Группирование Пример стилей для каждого селектора:

Группирование

Пример стилей для каждого селектора:

Слайд 35

Группирование Пример сгруппированных стилей:

Группирование

Пример сгруппированных стилей:

Слайд 36

Наследование Наследованием называется перенос правил форматирования для элементов, находящихся внутри других.

Наследование

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются

дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.