Конспект каскадных таблиц стилей CSS

дальнейшее содержание публикации - черновик!

Selectors Level 4
W3C Working Draft, 11 November 2022 //www.w3.org/TR/selectors

Зміст

Основы

Предусмотрено три способа определения стилей. В html-документе допускается одновременное применение всех трех способов:

  • External (внешние) размещаются в отдельных файлах .css, содержащих произвольный набор правил, который может использоваться несколькими html-документам
  • Internal (внутренние) размещаются в html-документе внутри тегов <style>...</style>, перекрывают внешние определения и действуют в границах документа или фрейма.
    Стандарт предписывает размещать css-определения в html-документе внутри тега <style>...</style> в заголовке <head>, тем не менее браузеры обрабатывают их и в любом месте <body>.
  • Inline (встроенные) размещаются в атрибуте style элемента, перекрывают внешние и внутренние определения стилей в пределах элемента.
    <... style="..." ... >

При явном переопределении стиля предыдущее определение вытесняется с учетом иерархии, поэтому стиль internal вытесняет external, а его вытесняет inline, но только для тэга и его потомков. Логические приоритеты применения будут описаны ниже.

Правило

В теге <style> можно размесить произвольное число css-правил, каждое из которых состоит из селектора и произвольного набора деклараций. Каждая декларация включает имя свойства и назначенное свойству значение:

selector
{

declaration

property : value ;
}

/

Селекторы

Селектор элемента HTML

Свойства стиля можно назначить html-элементу по зарезервированному для него имени, например для параграфа <p>:

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

Селектор * устанавливает свойства стиля каждого элемента:

Селектор идентификатора [#]

Селектор #<identity> назначает свойства стиля элементу документа по его ID:

Селектор класса [.]

Селектор .<class name> назначает свойства стиля классу, который можно применить в произвольном элементе, в т.ч. в тексте параграфа:

Селектор <element name>.<class name> определяет свойство для сочетания определенного html-элемента и класса:

//

Комбинатор /Combinator

Следующие селекторы относятся к комбинаторам, которые позволяют выбрать элемент по виду отношения селектора с другими селекторами.

Селектор потомков ( ) /Descendant Selector

Селектор потомков соответствует всем элементам, которые являются потомками указанного элемента, независимо от уровня.

Дочерний селектор (>) /Child Selector

Дочерний селектор > соответствует непосредственно дочерним элементам.
Например, <p> внутри <h1> выведет мелкий подстрочный текст под заголовком, который не занимает место после заголовка:

Смежный братский селектор (+) /Adjacent Sibling Selector

Селектор соседних элементов используется для выбора элемента, который находится непосредственно после заданного элемента. Селектор может применяться каскадом.
Пример селектора абзаца <p> после заголовка <h1> и следующего за ним <p>:

Общий братский селектор (~) /General Sibling Selector

Общий селектор родственных элементов выбирает все элементы, которые следуют в том же уровне за выбранным элементом.

Селектор псевдо-класса (:) /Pseudo-class selector

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

  • :active Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.
  • :link Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход ранее.
    • Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдо-класс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.
  • :focus Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст
  • :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
  • :visited применяется к посещённым ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно
  • :disabled !!! отключённый элемент, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.
  • :root соответствует корневому элементу дерева документа, и в документе HTML выбирает элемент <html>
  • :first-child выбирает первый дочерний элемент
  • :last-child выбирает последний дочерний элемент
  • :nth-child(n) выбирает дочерний элемент с заданным порядковым номером
    :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
    :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
    :nth-of-type(n) выбирает элемент с заданным номером по порядку среди элементов такого же типа в группе родителя
    :only-of-type выбирает элемент, если это единственный элемент такого типа в группе родителя
    :only-child выбирает элемент, который является единственным дочерним элементом
  • :first-of-type выбирает первый элемент этого типа в группе родителя
    :last-of-type выбирает последний элемент этого типа в группе родителя
  • :lang(..) Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang, он обычно добавляется к тегу <html>. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах

Селектор псевдо-элемента (::) /Pseudo-elements selector

Элемент, который не был задан разметкой, но может быть выделен одним из предопределенных правил становится  псевдо-элементом, который может быть выбран селектором псевдо-элемента. Правила выделения псевдо-элемента для селектора:

  • ::first-letter Определяет стиль первого символа в тексте элемента, к которому добавляется.
  • ::first-line Задает стиль первой строки форматированного текста.
  • ::before Применяется для отображения желаемого контента до элемента, к которому он добавляется.
  • ::after Используется для вывода желаемого контента после элемента, к которому он добавляется.
  • ::selection Применяет стиль к выделенному пользователем фрагменту текста.

//

Псевдо-класс языка :lang()

!!!

Псевдо-класс соответствия :is()

Список селекторов рассматривается как !!! Селектор is() заменил прежний :matches() и еще более ранний :any().

Псевдо-класс отрицания :not()

Селектор представляет элементы, которые не соответствуют списку указанных селекторов. Поскольку он предотвращает выбор определенных элементов, он известен как псевдо-класс отрицания.

Селектор :has()

// !!!

Селектор :where()

Псевдокласс в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка

Селектор атрибута ([]) /Attribute selector

Семейство селекторов атрибута позволяет выбирать элементы, у которых есть некоторый атрибут или если значение атрибута соответствует условию:

  • [target] - атрибут существует у элемента
  • [target="_blank"] - атрибут имеет точно заданное значение
  • [title~="flower"] - значение включает определенное слово
  • [class^="top"] - значение начинается с фрагмента
  • [class$="test"] - значение заканчивается фрагментом
  • [class*="te"] - значение включает фрагмент
  • [type|="checkbox-radio-range"] - значение совпадает с одним из значений в списке разделенном дефисом

ChatGPT!!! В CSS "i" после закрывающей скобки "[type="checkbox" i]" обозначает флаг "case-insensitive". Таким образом, селектор будет соответствовать любому регистру символов для типа "checkbox".

Список значений атрибута

Выбор элемента по значению атрибута из заданного множества реализуется селектором |=:

Сочетание селекторов атрибутов

Выбор элементов по значениям нескольких атрибутов реализуется последовательным указанием селекторов:

//

Порядок определений

Порядок определения стилей имеет значение! Например, определение сделанное в обратном порядке не работает:

 

Приоритет определений /Specificity Hierarchy

Для тех случаев, когда различные селекторы конкурируют в определении значения атрибута элемента, существует порядок приоритета типов селекторов, в котором определения верхних типов селекторов подавляют определения последующих:

  1. Определения встроенного стиля /Inline styles : <... style="background-color: orange;">
  2. Селекторы идентификатора IDs: #red
  3. Селекторы классов, псевдо-классов, атрибутов: .green, :hover, [href]
  4. Селекторы элементов и псевдо-элементов: h1, :before

Важное определение /!important Rule

Правило !important применяется, чтобы переопределить ВСЕ предыдущие правила стиля этого свойства элемента, включая встроенные, но кроме тех, которые тоже определены как !important:

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

Каскадность  и специфичность — это механизмы, которые контролируют, !!!! какое именно правило применяется, иногда CSS не применяется, таблице стилей больший уровень спецификации.

  1. Селектор элемента устанавливает минимальную специфичность.
  2. Селектор класса +
  3. Селектор # ++
  4. https://developer.mozilla.org/ru/docs/Web/CSS/Specificity
  5. https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

При равной специфичности применяется стиль определенный последним.

Кастомное свойство /custom property

Любое значение применимое к css-свойствам можно сохранить в специально созданном для этого свойстве (подобие переменной). Имя кастомного свойства должно начинаться с --.

Значение кастомного свойства может использоваться в каскаде следующих css-определений. Доступность кастомного значения определяется иерархией объектов соответствующих селекторов. Определение в селекторе :root будет доступно для всех объектов во всех селекторах, аналогично в селекторах html и body для объектов документа.

Функции

//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
Функции значений CSS вызывают обработку данных или вычисление для получения значения свойства CSS. Для вычисления значения функции могут принимать входные аргументы.

Функция var()

Функция var(variable) возвращает значение кастомного css-свойства:

Функция attr()

Функция attr(property) возвращает значение свойства элемента.
Спецификация предусматривает несколько вариантов применения для свойств различных типов.
Фактическое применения в Chrome 120.0.6099.200 дает отрицательный результат, кроме примера:

Функция counter()

Функция counter(property) включает вложенные счетчики, возвращая объединенную строку текущих значений именованных счетчиков, если таковые имеются:

Функция counters()

Функция counter(property) включает вложенные счетчики, возвращая объединенную строку текущих значений именованных счетчиков, если таковые имеются. Обычно он используется с псевдоэлементами, но теоретически его можно использовать везде, где используется значение  типа <string>. Функция имеет две формы counters(name, string) или counters(name, string, style):

Функция calc()

Функция calc(expression) вычисляет арифметическое выражения для определения значения атрибута динамически во время компоновки документа в окне. Выражение может содержать арифметические операции   + ,  - ,  * ,  /  над величинами в предусмотренных единицах и/или безразмерными величинами. Синтаксис обязывает отделять знаки операций слева и справа пробелами:

Использование calc() предпочтительно даже в тех случаях, когда можно обойтись %, с целью повышения читабельности кода.

CSS: полное руководство по функции calc() //habr.com

Функции max() и min()

Функции max(value1, value2, ...) и min(value1, value2, ...) выбирают соответственно наибольшее и наименьшее значение из списка:

Функция clamp()

Функция clamp(min, expression, max) вычисляет арифметическое выражения для определения значения атрибута аналогично calc(), но не позволяет результату выйти из диапазона заданного в min и max:

https://habr.com/ru/company/ruvds/blog/501634/

Функция color-mix()

Функция color-mix(!!!) :

Функция color-contrast()

Функция color-contrast(!!!) вычисляет арифметическое выражения для определения значения атрибута аналогично calc(), но не позволяет результату выйти из диапазона заданного в min и max:

@Правила

Медіа-запити /@import

Правило @import CSS используется для импорта правил стиля из других допустимых таблиц стилей. Правило @import должно быть определено в верхней части таблицы стилей перед любым другим правилом at (кроме @charset и @layer) и объявлением стиля, иначе оно будет проигнорировано.

Syntax
@import url;
@import url list-of-media-queries;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) list-of-media-queries;

Где

url <string>,  <url> или функция url() представляющие абсолютный или относительный путь расположение ресурса для импорта

list-of-media-queries Список медиа-запросов, разделенных запятыми, которые определяют зависимые от медиа условия для применения правил CSS, определенных в связанном URL-адресе. Если браузер не поддерживает ни один из этих запросов, он не загружает связанный ресурс.

layer-name Is the name of a cascade layer into which the contents of the linked resource are imported.

Медіа-запити /@media

//developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Медиа-запросы применяют стили CSS в зависимости от характеристик устройства.
@media <media-query-list> { <stylesheet> }
//

@media type { ... }

  • all Подходит для всех устройств.
  • screen Предназначен в первую очередь для цветных компьютерных экранов.
  • print Предназначен для постраничного материала и для документов, просматриваемых на экране в режиме предварительного просмотра
  • speach Предназначен для синтезаторов речи

Медиа-характеристика

!!! медиа запрос характеристики

@media (property:value) { ... }

  • orientation отражает ориентацию устройства
    • {portrain|landscape}
  • resolution
    • {dpi | dpcm | dppx | x }
      • dppx = x  = devicePixelRatio
      • dpi = devicePixelRatio * 96
      • dpcm = dpi / " в сантиметрах
      • в Google Chrome на PC разрешение равно 96dpi, но при масштабировании страницы разрешение динамически увеличивается пропорционально масштабу
      • в Google Chrome на Xiaomi Redmi Note 7 6.3" 2340x1080 (19.5:9) 409ppi разрешение равно 264dpi и масштабирование не влияет
      • в Google Chrome на Motorola Moto G9 Play 6.5" 1600х720 (20:9) 270ppi разрешение равно
        168dpi
    • min-resolution
    • max-resolution
  • aspect-ratio использует соотношение ширины к высоте.
    • значение задает безразмерная пропорция
    • mix-aspect-ratio
    • max-aspect-ratio
    • применимо к произвольному элементу:
  • (monochrome)
  • hover отражает способность устройства наводить курсор на элементы
  • ({max-width|max-height|min-width|min-height}: ...px)

@media screen and (max-width: 600px) or !!! {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
padding: 20;
}
}

!!!Комбинирование характеристик

И Стили для разрешения от 300dpi до 600dpi

ИЛИ Стили для разрешения 300dpi или меньше, или 600dpi или больше

@if @when @else

//

!!!

медиа в !!!

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

<link rel="stylesheet" media="screen and (color)" href="screen-color.css">

Каскадный слой @layer

Новое правило CSS 7 предоставляет возможность явного объявления и определения каскадных слоев при организации стилей, что помогает контролировать порядок применения стилей и упрощает поддержку кода.

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

Свойства

Компоновка

Отображение (Display)

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

  • inline - Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег <span>
  • block - Элемент генерирует структурный блок, как и тег <div>
  • flex - Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов
  • grid - Отображает элемент как контейнер сетки на уровне блока
  • contents - Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемента следующего уровня в DOM
  • inline-block - Элемент генерирует строковый блок
  • inline-flex - Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов
  • inline-grid - Отображает элемент как контейнер сетки встроенного уровня
  • inline-table - Элемент определяет структурный блок, который генерирует строковый блок
  • list-item - Элемент генерирует структурный блок, который отображается как элемент списка <li>
  • table - Элемент генерирует структурный блок. На странице ведет себя аналогично <table>
  • table-caption - Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично <caption>
  • table-cell - Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично <th> и <td>
  • table-column-group - Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>
  • table-column - Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — <col>
  • table-footer-group - Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично <tfoot>
  • table-header-group - Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>
  • table-row - Элемент является строкой ячеек. Пример — <tr>
  • table-row-group - Элемент объединяет одну или несколько строк
  • none - не генерирует контейнер, удаляется со страницы
  • inherit - наследует свойство от родительского элемента
  • initial - Устанавливает для этого свойства значение по умолчанию
  • run-in -  Отображает элемент как блочный или встроенный, в зависимости от контекста

Геометрия и размеры

Семейство

min-width, min-height

Позволяет реализовать "прилипания" блоков к правой или нижней границе экрана с помощью функции calc().

Поля /margin

...поля соседних block-элементов сливаются (collapse) по размеру наибольшего, но этого не происходит внутри flexbox.

Граница /border

//

Отступ /padding

Габариты

Width and Min-width, Max-width Height max-height min-height

зависит от свойства box-sizing (дивись box-*).

 

Контур (Outline)

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

outline: 5px solid yellow;
outline-offset: 15px;

Граница (Border)

Семейство свойств

border-

//

border-radius

border-radius: 10px 100px 10px 100px / 100px 10px 100px 20px;

border-collaps

Свойство border-collaps: {collapse | separate}; для ячеек таблиц устанавливает режим совмещения границ.

Непрозрачность opacity

opacity: 0.3;

Положение

visibility Определяет, является ли элемент видимым. 2

Поплавок float

!!!

Позиция position

Положение элемента на странице и его роль в общей компоновке !!! position

  • static по умолчанию компонует элемент в общем потоке в соответствии с его содержанием, размерами, границей, отступами и другими свойствами
  • relative компонует элемент в общем потоке документа, как static, но отображает со смещением, кроме того устанавливает новый контекст позиционирования для дочерних элементов
    • смещение положения использует top, right, bottom и left и не влияет на положение других элементов (выделяется так же как для static)
    • новый контекст позиционирования смещает дочерние элементы наложения, когда значение z-index не auto.
    • влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено
  • absolute элемент исключается из потока компоновки документа, и располагается относительно своего ближайшего спозиционированного предка, если такой есть; в противном случае он помещается относительно исходного содержащего блока; конечная позиция определяется значениями top, right, bottom, и left
  • fixed элемент исключается из потока компоновки документа, и располагается и позиционируется относительно содержащего блока, установленного viewport; конечная позиция определяется значениями top, right, bottom и left.
    При печати fixed-элемент помещается в одно и то же место на каждой странице
  • sticky Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.Это значение всегда создаёт новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению

Слой z-index

!!!

auto

object.style.zIndex="1"

Тексты и типографика

/

  • font-family - изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства
    • sans-serif - шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
    • serif - семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки - декоративные штрихи и черточки по краям букв.
    • monospace - семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
    • cursive - шрифты, имитирующие рукописный текст.
    • fantasy - художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.
  • font-size -
    • по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.
  • font-style -
    • normal - стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
    • italic - курсивное начертание
    • oblique - наклонное начертание
  • font-weight -
  • text-indent смещение начала первой строки, отрицательные значения допускаются
  • text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым
    • blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
    • line-through Создает перечеркнутый текст (пример).
    • overline Линия проходит над текстом (пример).
    • underline Устанавливает подчеркнутый текст (пример).
    • none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
    • inherit Значение наследуется у родителя.
  • text-transform Для управления строчными и прописными буквами в тексте используется свойство
  • letter-spacing Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство :
  • color, в качестве значения указав нужный вам цвет
  • text-shadow: 2px 2px 3px #000; добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:
    • смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
    • смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
    • размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
    • цвет для тени
  • text-align можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:
    • left - выравнивает текст по левому краю.
    • right - выравнивает текст по правому краю.
    • center - выравнивает текст по центру.
    • justify - выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.
  • background: background-color background-image background-repeat background-position; -
    • background-color
    • background-image
    • background-repeat
      • no-repeat - фоновое изображение не повторяется
      • repeat-x - повторяет фоновое изображение только по горизонтали
      • repeat-y - повторяет фоновое изображение по вертикали
      • repeat - фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали
    • background-position
      • top left
        top center
        top right
        center left
        center center
        center right
        bottom left
        bottom center
        bottom right

//

Содержание

Содержание content

//developer.mozilla.org

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

inherit

Единицы размеров

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333...px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

1em текущий размер шрифта

% процентная доля такого же свойства родителя
fr доля (fraction) используется при натуральном дроблении родительского размера пропорционально долям
em относительно размера шрифта, применяется каскадом, т.е. em-размер применяется к родительскому значению.
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem относительно размера шрифта элемента <html>.

vw (view width) – 1% ширины окна
vh (view height) – 1% высоты окна
vmin наименьшее из (vw, vh), в IE9 обозначается vm
vmax наибольшее из (vw, vh)

Единицы mm, cm, pt, pc предусмотрены спецификацией, но не используются. Они являются производными от пикселя. Их реальные размеры не соответствуют метрическим стандартам:

  • mm (мм) = 3.8px
  • cm (см) = 38px
  • in (дюйм) = 96px = 2.54cm
  • pt (типографский пункт) = 4/3 px
  • pc (типографская пика) = 16px = 12 pt

Источник: //www.w3.org

Исключения и особые случаи

При установке свойства margin-left в %, за 100% процентов берётся ширина родительского блока (а не не родительский margin-left).
line-height

При установке свойства line-height в %, процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height.

Для width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

 

Цвет

Значение свойств цвета color, background, border-color и других может быть задано несколькими способами:

  • именем цвета: red, orange, yellow, green...
  • цветовым RGB кодом: #f00, #ffb000...
  • функциями
    • rgb(), rgba(),
    • hsl(hue, saturation, lightness), hsla(hue, saturation, lightness, alpha)
      • оттенок задается углом на цветовом круге (red-yellow-green-cyan-blue-magenta-red) и может быть задан в произвольных единицах: 1turn = 360deg = 400grad = ~6.28rad.
    • linear-gradient()...

Свойство совмещения цветов mix-blend-mode

//developer.mozilla.org/ru/docs/Web/CSS/mix-blend-mode

CSS-свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с низлежащими слоями.

Компоновка

//

Позиционирование position

Свойство position устанавливает базовую точку позиционирования элемента

  • absolute позиционирование элемента в абсолютных координатах страницы исключает его из влияния на компоновку других элементов. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
  • fixed
    По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
  • relative
    Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
  • static
    Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
    inherit
    Наследует значение родителя
Превышение overflow

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

  • visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
  • hidden Отображается только область внутри элемента, остальное будет скрыто.
  • scroll Всегда добавляются полосы прокрутки.
  • auto Полосы прокрутки добавляются только при необходимости.
  • inherit Наследует значение родителя.

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

//

Рамка border
  • border-radius позволяет закруглять углы элементов, закругление окружностью определяется значением радиуса, закругление эллипсом двумя радиусами (горизонтальным и вертикальным):

    Свойства:
    • border-top-left-radius
      border-top-right-radius
      border-bottom-right-radius
      border-bottom-left-radius
  • border-image-source задает путь к изображению рамки;
  • border-image-slice задает отступы от краев картинки до четырех линий, которые «разрезают» ее на части; ключевое словоfill означет, что средняя часть картинки будет заполнена (обчно прозрачная);
  • border-image-repeat задает способ заполнения фоном боковых сторон рамки;
    • repeat — повторять,
    • stretch растягивать, round заполнить целым числом фона (при необходимости, масштабировать),
    • space заполнить область рамки целым числом фона, при необходимости добавить пустое пространство);
  • border-image-width задает ширину видимой области рамки-картинки;
  • border-image-outset позволяет отодвинуть рамку за пределы элемента, при этом немного масштабируя картинку;
  • border-image краткая запись всех свойств
    border-image: source slice width outset repeat;
Фон background

Семейство атрибутов background

  • background-image: url("bgdesert.jpg");
  • background-size задает размеры фонового изображения
    • 300px auto — первый — это ширина фонового изображения, второй — высота;
    • contain — изображение полностью помещается в границы фона, но может не закрывать весь фон;
    • cover — изображение закроет всю фоновую область, но часть изображения может обрезаться;
  • background-origin расположение и размеры области отображения фонового изображения.
    • content-box — область фона = области содержимого, фон НЕ вылазит на отступы и НЕ вылазит на рамки;
    • padding-box — область фона = области содержимого + отступы, но фон НЕ вылазит на рамки (по умолчанию);
    • border-box — область фона = размеру блока + отступы + рамки.
  • background-position: left 50px top 100px; /* слева 50px, сверху 100px */
  • background-clip управляет тем, как обрезается фон:
    • content-box — фон обрезается по содержимому (по отступы и рамки)
    • padding-box — фон обрезается по содержимому + оступы (до рамок)
    • border-box — фон не обрезается (по умолчанию).
  • background-repeat  определяет способ повторение :
    • round — фон повторяется так, чтобы в области поместилось целое число рисунков; если это не удается сделать, то фоновые рисунки масштабируются;
    • space — фон повторяется столько раз, чтобы полностьюзаполнить область; если это не удается, между картинкамидобавляется пустое пространство.
  • background-blend-mode
    • normal
      The final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping.
    • multiply
      The final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change. The effect is like two images printed on transparent film overlapping
    • screen
      The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen
    • overlay
      The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter. This blend mode is equivalent to hard-light but with the layers swapped
    • darken
      The final color is composed of the darkest values of each color channel
    • lighten
      The final color is composed of the lightest values of each color channel
    • color-dodge
      The final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color. This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to create a fully lit color
    • color-burn
      The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value. A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image. This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black
    • hard-light
      The final color is the result of multiply if the top color is darker, or screen if the top color is lighter. This blend mode is equivalent to overlay but with the layers swapped. The effect is similar to shining a harsh spotlight on the backdrop
    • soft-light
      The final color is similar to hard-light, but softer. This blend mode behaves similar to hard-light. The effect is similar to shining a diffused spotlight on the backdrop*.*
    • difference
      The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color
    • exclusion
      The final color is similar to difference, but with less contrast. As with difference, a black layer has no effect, while a white layer inverts the other layer's color
    • hue
      The final color has the hue of the top color, while using the saturation and luminosity of the bottom color
    • saturation
      The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect
    • color
      The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground
    • luminosity
      The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to color, but with the layers swapped
  • background-attachment
    • fixed
      The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with background-clip: text.)
    • local
      The background is fixed relative to the element's contents. If the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them. 
    • scroll
      The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)
    • два варианта параметризации:
      background-attachment: local;
      background-attachment: local, scroll;
    • //

Множественный фон можно задать так:

Бокс box-*

Группа свойств box-* устанавливает свойства компоновки и оформления прямоугольника блока. Большая часть  из 11 свойств устарела, но 3 остаются актуальными:

box-sizing: content-box | border-box | padding-box | inherit

  • content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
  • padding-box Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
  • border-box Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
  • inherit Наследует значение родителя.

box-shadow: none;

  • /* A color and two length values */
    /* <color> | <length> | <length> */
    box-shadow: red 60px -16px;
  • /* Three length values and a color */
    /* <length> | <length> | <length> | <color> */
    box-shadow: 10px 5px 5px black;
  • /* Four length values and a color */
    /* <length> | <length> | <length> | <length> | <color> */
    box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
  • /* inset, length values, and a color */
    /* <inset> | <length> | <length> | <color> */
    box-shadow: inset 5em 1em gold;

box-decoration-break

  • slice Первоначально элемент визуализируется так, как если бы его блок не был фрагментирован, после чего рендеринг этого гипотетического блока разбивается на части для каждой строки/столбца/страницы. Обратите внимание, что гипотетический блок может быть разным для каждого фрагмента, поскольку он использует свою собственную высоту, если разрыв происходит в линейном направлении, и свою ширину, если разрыв происходит в направлении блока. Подробности смотрите в спецификации CSS
  • clone Каждый фрагмент блока визуализируется независимо с указанной границей, заполнением и полем, охватывающим каждый фрагмент. Border-radius, border-image и box-shadow применяются к каждому фрагменту независимо. Фон также рисуется независимо для каждого фрагмента, а это означает, что фоновое изображение с параметром «background-repeat:no-repeat», тем не менее, может повторяться несколько раз
Пробелы white-space

Свойство white-space управляет тем, как обрабатываются пробельные символы внутри элемента

  • normal
    Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
  • nowrap
    Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
  • pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
  • pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
  • pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
  • break-spaces Поведение идентично pre-wrap со следующими отличиями:Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
    Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
    Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).
  • inherit
    Наследует значение родителя.
Обработка normal nowrap pre pre-wrap pre-line break-spaces
Новые строки объединяются в одну
Новые строки сохраняются как в источнике
Пробелы и табуляция объединяются в один пробел
Пробелы и табуляция сохраняются как в источнике
Перенос текста по словам переносится
Перенос текста по словам не переносится
Пробелы в конце строки удаляются
Пробелы в конце строки сохраняются как в источнике
Пробелы в конце строки висят
Пробелы в конце строки переносятся
Разрыв break-before, break-after

// !!! Свойство break-before определяет обработку разрыва страницы, столбца или области перед сгенерированным полем (если поля нет, свойство игнорируется).

  • Общие разрывы
    • auto Allows, but does not force, any break (page, column, or region) to be inserted right before the principal box.
    • avoid Avoids any break (page, column, or region) from being inserted right before the principal box.
    • always (Experimental) Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.
    • all (Experimental) Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.
  • Разрывы страниц
    • avoid-page Avoids any page break right before the principal box.
    • page Forces a page break right before the principal box.
    • left Forces one or two page breaks right before the principal box, whichever will make the next page into a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.
    • right Forces one or two page breaks right before the principal box, whichever will make the next page into a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.
    • recto (Experimental) Forces one or two page breaks right before the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)
    • verso (Experimental) Forces one or two page breaks right before the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a right page in a right-to-left spread.)
  • Разрывы колонок
    • avoid-column Avoids any column break right before the principal box.
    • column Forces a column break right before the principal box.
  • Разрывы областей
    • avoid-region (Experimental) Avoids any region break right before the principal box.
    • region (Experimental) Forces a region break right before the principal box.
Размер

px, cm, etc., or in percent %

Размер шрифта

Благоговейный SASS

Метаязык SASS (Syntactically Awesome Stylesheets) основан на  CSS и предназначен для увеличения уровня абстракции CSS-кода и упрощения разработки каскадных таблиц стилей. SASS добавляет к CSS константы и примеси. Это облегчает поддержку целостности данных внутри большого набора стилей. Константы позволяют установить значение и использовать его внутри стилей, с помощью примесей то же самое можно сделать с блоком атрибутов стиля.

!!! SCSS — немного практики, часть I https://habr.com/ru/post/140612/

Приклади

Пример каскадных селекторов для конструкции вокруг <input type="checkbox"> :

 

Джерела

Leave a Reply