Возможности "чистого" CSS

без программирования (без JavaScript)

"The Mine"

"Игра в 0 строк кода на чистом JS"

• Подборки других игр на CSS:
  • https://codepen.io/collection/AKkZro
  • https://dzone.com/articles/css3-games-collection
• И в заключение полу-оффтоп: игра и без JS, и без CSS на "чистом" HTML
  • Пятничный JS: игра в 0 строк JS и CSS (Крестики-нолики)

Подключение стилей к документу HTML

• Внешние (External) стили
• Внутренние (internal) стили
• Inline стили

Внешние (External) стили

Внешний стиль содержит CSS в отдельном файле с расширением .css. Вероятно, это наиболее распространенный и удобный способ подключения стилей к документу. Такой файл можно подключать к нескольким HTML документам, применяя к ним общий стиль.

 <link rel="stylesheet" href="styles.css">

Внутренние (internal) стили

Внутренний стиль располагается внутри самого HTML документа, в элементе <style>.

Inline стили

Inline стили- это декларации CSS, которые влияют на один конкретный HTML элемент и содержатся в его атрибуте %lt;style%gt;.

 
Hello World!
 
This is my first CSS example

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

Cинтаксис правила стиля

 style-rule ::=
 selectors-list {
  properties-list
 }

 selectors-list ::=
   selector[:pseudo-class] [::pseudo-element]
   [, selectors-list]

 properties-list ::=
   [property : value] [; properties-list]

 strong {
   color: red;
 }

 div.menu-bar li:hover > ul {
   display: block;
 }

@-правила (at-rules)

Начинаются с символа "@", за которым следует идентификатор, и включает в себя все до следующей ";" или следующего блока CSS.

 /* General structure */
 @IDENTIFIER (RULE);
 /* Example: tells browser to use UTF-8 character set */
 @charset "utf-8";

Типы селекторов

• Селекторы типа, класса и идентификатора
• Селекторы атрибутов
• Селекторы псевдо-классов и псевдо-элементов
• Комбинаторы

Селекторы типа, класса и идентификатора

В эту группу входят селекторы, указывающие на HTML элементы, такие как <h1>

 h1 { }

а также класс:

 .box { }

и идентификатор:

 .box { }

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

Эти селекторы позволяют выбирать элементы на основе наличия определенного элемента

 a[title] { }

или его значения

 a[href="https://example.com"] { }

Селекторы псевдо-классов и псевдо-элементов

Эта группа селекторов включает псевдо-классы, которые характеризуют определенные состояния элемента. Например, псевдо-класс :hover выбирает элемент только если над ним находится указатель мыши

 a:hover { }

Также в эту группу входят псевдо-элементы, которым выделяют определенную часть элемента, а не сам элемент. Например, ::first-line выбирает первую строку текста внутри элемента, действуя как если бы элемент <span> содержал бы в себе первую строку текста, и затем был выбран селектором

 p::first-line { }

Комбинаторы (combinators)

Эта группа селекторов комбинирует другие селекторы для того, чтобы указывать элементы. Пример ниже выбирает параграфы, которые являются прямыми дочерними элементами <article>, используя комбинатор ">"

 article > p { }

Базовые селекторы

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

Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.

Селекторы по типу элемента

Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.

Селекторы по классу

Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
Синтаксис: .имяКласса
Пример: селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index").

Селекторы по идентификатору

Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе.
Синтаксис: #имяИдентификатора
Пример: селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc").

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

Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Пример: селектор [autoplay] выберет все элементы, у которых есть атрибут autoplay (независимо от его значения).
Ещё пример: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".
Ещё пример: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".

Комбинаторы

Комбинатор запятая

Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента - и <div> и <span>.

Комбинатор потомков

Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.

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

Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет только дочерние элементы <li>, которые находятся внутри, на первом уровне вложенности по отношению к элементу <ul>.

Комбинатор всех соседних элементов

Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.

Комбинатор следующего соседнего элемента

Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой <li> элемент, который находится непосредственно после элемента <ul>.

Псевдоклассы и псевдоэлементы

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

Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам <a> которые имеют статус "посещённые".
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус.

Псевдоэлементы

Знак :: представляет сущности, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца <p>.

Введение в каскадирование стилей (CSS Cascade)

Каскадирование - алгоритм, определяющий, как объединять значения свойств стилей, полученных из разных источников.

Основные источники (origin) стилей: Стили пользовательские, авторские и пользовательского агента (user-agent)

• Стили пользовательского агента (браузера, user-agent stylesheets) - встроены в браузер и задают стиль по умолчанию для всех документов. *
• Авторские стили (Author stylesheets) - наиболее распространенный тип стилей. Определяют стили как часть дизайна конкретной веб страницы или сайта (на сервере).
• Пользовательские стили (User stylesheets) позволяют пользователю браузеру переопределить авторские стили (в самом браузере).

Каскадирование - какие правила участвуют в каскадировании

В каскадировании участвуют только те объявления CSS, которые представляют собой пары свойство-значение.

Это значит, что @-правила (at-rules), в которых содержатся сущности, отличные от деклараций, например, @font-face, содержащее дескрипторы, не участвуют в каскадировании. В этом случае только само правило целиком участвует в каскадировании, т.е. @font-face, идентифицируемый его дескриптором font-family. В случае, если объявлено несколько правил @font-face с одним и тем же дескриптором, в учет принимаются только наиболее подходящие @font-face.

Аналогичным образом декларации, содержащиеся в @keyframes, не участвуют в каскадировании - только правило целиком.

Обработка %import и charset подчиняется другим алгоритмам и не участвует в каскадировании.

Порядок каскадирования

1. Сначала отфильтровываются правила из различных источников для выделения только тех правил, которые применяются к данному элементу, то есть тех правил, селекторы которых соответствуют данныму элементу и которые являются частью соответствующего @-правила (at-rule) @media.
2. Затем правила сортируются в соответствии с их важностью (т.е. флагом !important) и их источником (origin)

   	Origin	Importance
   1	Пользовательского агента (user agent)	normal
   2	Пользовательсие (user)	normal
   3	Авторские (author)	normal
   4	CSS Animations	see below
   5	Авторские (author)	!important
   6	Пользовательские (user)	!important
   7	Пользовательского агента (user agent) *	!important

3. В случае совпадения, для выбора правила определяется его специфичность.

Обратите внимание, что порядок для правил, отмеченных !important, противоположен.

Порядок каскадирования - пример

User-agent CSS:

li { margin-left: 10px }

 li { margin-left: 0 } /* This is a reset */

 @media screen {
   li { margin-left: 3px }
 }

 @media print {
   li { margin-left: 1px }
 }

{ margin-left: 1em }

 

   
1st
   
2nd
 

Порядок каскадирования - пример

В примере выше, должны применяться объявления внутри правил li and .specific. Ни одно из них не объявлено как !important, поэтому у авторских стилей (author style sheets) более высокий приоритет, чем у пользовательских (user style sheets) или пользовательского агента (user-agent stylesheet). Таким образом, выбор осуществляется среди следующих деклараций:

margin-left: 0

margin-left: 3px

margin-left: 1px

margin-left: 3px

Вопрос:

 .red { color: red; }
 .blue { color: blue; }

<div class="red blue">red blue</div>
<div class="blue red">blue red</div>

Дополнительная информация:

• Cascade and inheritance - MDN
• Никто не знает CSS: специфичность — не каскад (ru)

Наследование (inheritance)

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

Свойства CSS могут быть разделены на две категории:

• унаследованные (inherited) свойства, которые по умолчанию равны вычисленному значению родительского элемента
• неунаследованные (non-inherited) свойства, которые по умолчанию равны начальному (initial) значению свойства

Унаследованные свойства (Inherited properties)

p { color: green; }

This paragraph has emphasized text in it.

Результат:

Неунаследованные свойства (Non-inherited properties)

p { border: medium solid; }

This paragraph has emphasized text in it.

Результат:

Дополнительная информация:

• Cascade and inheritance - MDN

Специфичность (Specificity)

• Специфичность используется для определения, какие значения свойств CSS наиболее подходят данному элементу и таким образом будут применены к нему.
• Это вес, который определяется для данной декларации CSS на основе числа, связанного с каждым из типов селекторов в селекторе.
• Если у нескольких деклараций одна и та же специфичность, применяется последняя.
• Специфичность применяется только если один и тот же элемент подходит под несколько деклараций.

Типы селекторов по возрастанию специфичности

1. Селекторы типов (h1) псевдо-элементов (::before)
2. Селекторы классов (.example) ([type="radio"]) и псевдо-классов (:hover)
3. Селекторы идентификаторов (#example);

Универсальные селекторы (*), комбинаторы (+, >, ~, ' ', ||) и псевдо-класс отрицания (:not() не влияют на специфичность. (Но селекторы, объявленные внутри :not() - влияют)

Специфичность (Specificity) и !important

• Если правило отмечено как !important, такая декларация имеет больший приоритет чем любая другая декларация.
• Рекомендуется только ограниченное использование.

Подробнее о специфичности

• Cascade and inheritance - MDN
• Specifics on CSS Specificity - CSSTricks
• Каскадирование и специфичность CSS (ru)
• Никто не знает CSS: специфичность — не каскад (ru)
• Картинка для запоминания "SpeciFISHity"
  

Стилизация текста

• Основы стилей для текста и для шрифтов
• Стили списков
• Стили ссылок
• Веб шрифты

Единицы измерения

Веб-шрифты