Лекция3.2

CSS — Cascading Styles Sheet
Каскадные таблицы стилей (CSS) используется для задания внешнего вида элементов HTML или других текстовых форматов. Наиболее удобный способ записи стилей заключается в использовании отдельного файла с расширением «.css», но можно их включать непосредственно в HTML код.

Хокон Виум Ли
Учёный, специалист в области информатики, предложивший каскадные таблицы стилей (CSS). В англоязычных текстах его часто называют howcome, а норвежское имя считается трудночитаемым.
В 1994 году предложил концепцию каскадных таблиц стилей.
В 2006 году в Университете Осло защитил диссертацию по теме «Каскадные таблицы стилей».
https://web.archive.org/web/20080906003804/http://people.opera.com/howcome/

ПРИМЕР СТИЛЕЙ
Тег
через атрибут color задает зеленый цвет.

ПРИМЕР СТИЛЕЙ
Тег
через атрибут color задает красный цвет. Установка размера текста (font-size) с помощью пикселей (30 px) дает вам полный контроль над размером текста. Изменять цвет необходимо несколько раз.

ПРИМЕР СТИЛЕЙ
Тег
предназначен для определения строчных элементов документа. HTML class позволяет присвоить класс элементу «primary» (его имя). Изменения цвета происходит в одном месте. CSS font-size устанавливает размер шрифта.

ПРИМЕР СТИЛЯ CSS
CSS color: red позволяет устанавливать красный цвет для всех страниц где есть класс элемента «primary».

СТИЛЬ
В этой записи h1 описывает HTML тег, для которого задается стиль, а в фигурных скобках приводится описание самого стиля.
Описание стиля состоит из нескольких записей, которые заканчиваются точкой с запятой. Одна запись описывает некоторое свойства стиля, в примере задается свойство цвета текста (blue - синий).

РАЗДЕЛЕНИЕ СТРУКТУРЫ И ВНЕШНЕГО ВИДА

ПРИМЕРЫ CSS

ПРИМЕРЫ CSS

ПРИМЕРЫ CSS

ПРИМЕРЫ CSS

ПРИМЕРЫ CSS

ПРИМЕРЫ CSS

ПРЕИМУЩЕСТВА CSS
Простота последующего изменения дизайна, изменяя css файл.
Несколько дизайнов страницы с одним и тем же HTML-кодом (светлая&темная тема страницы).
Уменьшение времени загрузки страниц сайта.
Уменьшение загрузки сайта, так как кода становится меньше.
Кэширование CSS-файлов в браузере.
Дополнительные возможности стилизации страниц которых не было в HTML.

СИНТАКСИС CSS-ПРАВИЛА
селектор
свойство
значение
правило
описание

СХЕМА РАБОТЫ БРАУЗЕРА
CSS COM дерево накладывается на DOM дерево=результирующее дерево.

ТИПЫ СЕЛЕКТОРОВ
Базовые селекторы.
Комбинаторы.
Псевдоклассы.
Псевдоэлементы.

БАЗОВЫЕ СЕЛЕКТОРЫ
Базовых селекторов существует 5 видов:
1. Color green применяется ко всем тегам
.
2. Стиль по классу: для всех элементов у которых есть .text сделаем границу 3px dotted (точечную) #00f (синего цвета).

БАЗОВЫЕ СЕЛЕКТОРЫ
class – это атрибут, а “text” – значение.
Если несколько class для одного элемента может быть несколько, разделяются они пробелом “text secondary”.
ID – идентификатор. “footer” – имя идентификатора может быть только одно. “footer” имя, которое мы придумали.

БАЗОВЫЕ СЕЛЕКТОРЫ
2. Для одного элемента можно задавать несколько class. Селектор .text.secondary содержит font-size(размер шрифта) 20px.
3. Кроме класса можно задать любому элементу id (идентификатор). ID у элемента может быть только один. Для #footer стили background-collor (цвет фона элемента) #000 (black), #fff (white).

БАЗОВЫЕ СЕЛЕКТОРЫ
4. Можно задавать стили в зависимости от атрибутов элементов. Атрибуты записываются в квадратных скобках. «text-decoration: none», т.е убрать подчеркивание у которых есть атрибут target=“_blank”.
5. Универсальный селектор. * применится ко всем тегам.

БАЗОВЫЕ СЕЛЕКТОРЫ
target=“_blank”, т. е ссылка должна открываться в новой вкладке.

КОМБИНАТОРЫ
1. Дочерний элемент часто используется. Применить цвет красный (color: red) ко всем элементам «p», которые находятся внутри элементов с классом «.content».
2. Применять к непосредственным детям «.content > p».
3. Применять к соседним элементам «.content + p».
4. Применять к следующим элементам «li ~ li».

КОМБИНАТОРЫ
1. Как видно в примере “content” содержит 3 раза тег
. Два раза тег
находятся внутри “content”. Один тег
не находится внутри “content”, поэтому цвет текста не стал красным.

ПСЕВДОКЛАССЫ

ПСЕВДОКЛАССЫ
Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.
Псевдоклассы — это ключевые слова, которые начинаются с двоеточия.
:pseudo-class-name

ПРИМЕР CSS
Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в примере справа:

ПРОСТОЙ ПРИМЕР ПСЕВДОКЛАССА
Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса :first-child — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML.

ПСЕВДОКЛАССЫ
:last-child — находит любой элемент, являющийся последним в его родителе.
:only-child — находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.
:invalid — находит любые
или
элементы, контент которых не проходит валидацию (en-US), в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.
Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML.

ПСЕВДОКЛАСС :last-child

ПСЕВДОКЛАСС :last-child
Результат.

ПСЕВДОКЛАСС :invalid
Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.

ПСЕВДОКЛАСС :invalid
Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.

ПСЕВДОКЛАСС :only-child
Синтаксис.
parent child:only-child {
property: value;
}

ПСЕВДОКЛАСС :only-child
Пример со списком.

ПСЕВДОКЛАСС :only-child

ДИНАМИЧЕСКИE ПСЕВДОКЛАССЫ
:hover — он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
:focus — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.
Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя.

ДИНАМИЧЕСКИE ПСЕВДОКЛАССЫ

ПСЕВДОКЛАССЫ

ПСЕВДОЭЛЕМЕНТЫ

ПСЕВДОЭЛЕМЕНТЫ
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия ::.

ПСЕВДОЭЛЕМЕНТЫ

НАСЛЕДОВАНИЕ

НАСЛЕДОВАНИЕ
Во всех современных браузерах есть просмотр DOM дерева, инспектор HTML.
HTML: Элемент у которого class «content». Внутри него есть теги
и
с классом «footnote».
CSS: margin-left (отступ слева), font-size (размер шрифта).
Тег
унаследовал стили у своего родителя «content». Стили для отступов margin-left по-умолчанию не наследуется.

НАСЛЕДОВАНИЕ
Унаследовать ненаследуемое свойство с помощью «inherit». Для .footnot унаследовать свойство «margin-left».

НАСЛЕДУЕМЫЕ СТИЛИ
Это стили, которые относятся: к шрифту, к размеру, к цветам текста.

НЕНАСЛЕДУЕМЫЕ СТИЛИ
Это стили, которые относятся: к размеру, отступам, фоновые картинки.

СПЕЦИФИЧНОСТЬ СЕЛЕКТОРОВ
К одному и тому же HTML элементу
можно применить стили с помощью разных селекторов.
Зеленый цвет для всех элементов у которых есть класс «.bar» и они должны находится внутри div. Все 3 селектора подходят.

СПЕЦИФИЧНОСТЬ СЕЛЕКТОРОВ
Цвет текста синий, так как для определение того, какое свойство будет в итоге у нас используется понятие специфичность селекторов или вес селектора. Вес «#foo .bar» больше, чем других.
Если специфичность одинаковая, то применялось свойство, которое написано ниже.

РАСЧЕТ СПЕЦИФИЧНОСТЬ
0001 – каждая цифра от 0 до 256-тиричное число. Каждый тег или псевдоэлемент добавляет единицу в 1 разряд.
0010 – Класс, псевдокласс, атрибут добавляет единицу во 2 разряд.

РАСЧЕТ СПЕЦИФИЧНОСТЬ
0100 – идентификатор добавляет единицу во 3 разряд.
1000 – инлайн-стили добавляет единицу в 4 разряд.

РАСЧЕТ СПЕЦИФИЧНОСТЬ
«#foo .bar» больше, чем другие селекторы.
Свойство «important» позволяет повысить специфичность.

РАСЧЕТ СПЕЦИФИЧНОСТЬ
Свойство «important» позволяет повысить специфичность. Поэтому текст стал оранжевым.

СЕЛЕКТОРЫ
:focus.
6

СЛОЖНЫЕ CЕЛЕКТОРЫ
ul > ul.

ПРОБЛЕМЫ
Селектор .text #name div.red.small { … }
Если захотите переиспользовать какие-то стили, которые описаны тут { … },
чтобы они использовались в другом месте вашего кода, то необходимо повторить структуру .text #name div.red.small.
Если переопределяете, то пишите более сложный селектор.

РЕШЕНИЕ
БЭМ (БЛОК, ЭЛЕМЕНТ, МОДИФИКАТОР) – компонентный подход в веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки.
Придумали его в Яндексе. БЭМ – широкая методология.

БЭМ
https://ru.bem.info/

ЗНАЧЕНИЯ АТРИБУТОВ