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

1.2 Как организована эта спецификация

Эта спецификация содержит следующие
разделы:

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

Комбинация селекторов

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

Скажем, к примеру, мы хотим выбрать все элементы абзаца, которые находятся внутри элемента со значением атрибута класса hotdog и установить для них цвет фона как brown. Однако, если один из этих абзацев, случаем, содержит значение атрибута класса mustard, мы хотим установить его цвет фона как yellow. Наши HTML и CSS могут выглядеть следующим образом:

HTML

CSS

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

Первый комбинированный селектор выше, .hotdog р, включает в себя два селектора: класс и селектор типа. Эти два селектора разделяются пробелом. Ключевым селектором выступает селектор типа, нацеленный на элементы абзаца. Поскольку этот селектор сочетается с классом hotdog, полный комбинированный селектор выбирает только элементы абзаца, которые находятся внутри элемента с классом hotdog.

Второй селектор выше, .hotdog p.mustard, включает в себя три селектора: два класса и один селектор типа. Единственное различие между вторым и первым селекторами является добавление класса mustard в конце селектора абзаца. Поскольку новый класс mustard находится в правой части комбинированного селектора, то он ключевой, а все отдельные селекторы идущие перед ним теперь уточняющие.

Пробелы в селекторах

В предыдущем комбинированном селекторе, .hotdog p.mustard, есть пробел между классом hotdog и селектором абзаца, но не между селектором абзаца и классом mustard. Использование пробелов и отказ от них — это большая разница в селекторах.

Поскольку нет пробела между селектором абзаца и классом mustard, это значит что будут выбраны только абзацы с классом mustard. Если бы селектор абзаца был удалён, а класс mustard содержал пробелы с двух сторон, то был бы выбран любой элемент с классом mustard, а не только абзацы.

Лучше всего не писать селектор типа перед селектором класса. Как правило, мы хотим выбрать любой элемент с данным классом, а не только один тип элемента. С учётом этого наш новый комбинированный селектор будет лучше писать как .hotdog .mustard.

Читая комбинированный селектор справа налево — он нацелен на абзацы со значением атрибута класса mustard, который располагается внутри элемента с значением атрибута класса hotdog.

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

Специфичность в комбинированных селекторах

Вес специфичности комбинированных селекторов может быть вычислен путём подсчёта каждого отдельного типа селектора в их комбинации.

Взглянем на наш комбинированный селектор выше. Первый селектор, .hotdog р, содержит селектор класса и селектор типа. Зная, что баллы класса это 0-1-0, а баллы селектора типа это 0-0-1, суммарные комбинированные баллы будут 0-1-1, это определяется путём суммирования каждого вида селектора.

Второй селектор, .hotdog p.mustard, содержит два селектора класса и один селектор типа. У комбинированного селектора будут баллы 0-2-1. 0 в первой колонке показывает нулевое число идентификаторов, 2 во второй колонке — два селектора класса, а 1 в последней колонке — один селектор типа.

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

В общем, мы хотим, чтобы вы всегда держали вес специфичности селекторов в поле зрения. Чем больше растёт вес специфичности, тем более вероятно, что наш каскад сломается.

Виды и приоритет стилей CSS

В случае равенства специфичности селекторов сравниваемых правил, приоритет будет определяться по виду стиля,
расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Перечислим
основные виды стилей в порядке возрастания их приоритета.

Стиль браузера обладает наиболее низким приоритетом и применяется по
умолчанию к элементам html-кода, к которым не применяется другое форматирование, говоря проще – к
«голому» html-коду.
Стиль пользователя устанавливается в настройках браузера пользователем и
по сути представляет собой измененный пользователем стиль браузера по умолчанию. Так что, если пользователь изменил стиль браузера, то по
умолчанию станет применяться стиль пользователя.
Стиль автора устанавливается автором страницы (программистом) и обладает
еще большим приоритетом. Именно он нас и будет больше всего интересовать.

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

Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей
ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т.е. раньше).
Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента
«link» ниже в коде этого документа. Соответственно, если таблица подключена в коде
документа выше, то приоритет ее стилей будет ниже.
Стили внутренних таблиц (расположены внутри контейнеров
«style») имеют приоритет перед стилями внешних таблиц, но только если они
расположены в коде ниже, чем элемент «link», при помощи которого была подключена
внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые
встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько
элементов «style», то большим приоритетом обладают стили тех таблиц, которые
расположены в коде документа ниже.
Еще большим приоритетом обладают встроенные стили, которые преобладают над правилами с любой специфичностью
селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.

Пролог (в котором едва обошлось без драки)

Прошедшие выходные ознаменовались небольшой драмой в веб-сообществе. Началась она с безобидного «теста» по CSS в твиттере Макса Штойбера, разработчика styled-components и react-boilerplate:

44% из свыше 14 тысяч ответивших выбрали вариант «первый див синий, второй красный». Правильный ответ, конечно же — оба дива синие: из правил с одинаковой специфичностью применяется последнее в CSS-коде, порядок классов в HTML-разметке на это никак не влияет.

Реакция на опрос, а особенно на его результаты, была довольно бурной. Кто-то искал в вопросе дальнейший подвох и придирался к незакрытым тегам или отсутствию контента (без которого цвету, а не фону, не к чему примениться, и формально оба дива будут прозрачными:). Но во многих ответах сквозила мысль, что ни к чему разработчикам тратить время на эту путаницу, и как хорошо, мол, что нынешние инструменты типа CSS-in-JS позволяют не забивать голову такой ерундой и «сосредоточиться на главном». А такие «каверзные вопросы», мол, годятся лишь для того, чтоб «срезать» неугодных кандидатов на собеседованиях.

Многих евангелистов CSS эта мысль просто возмутила. Эрик Мейер, автор легендарной «книги с рыбами», в запале написал:

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

Тут закономерно возмутились уже JS-разработчики: что это за язык такой, для входа в который непременно нужно показать знание каких-то странных и нелогичных шаманских ритуалов, почему-то называемых «самыми основами», хотя без них можно прекрасно обходиться? Эхо той битвы прокатывается по твиттеру до сих пор, почти не утихая.

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

Что дальше?

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

Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь! Это, безусловно, самая сложная вещь из тех, что мы до сих пор изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной. Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.

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

Обзор: Building blocks
Далее

1.5 Авторские права

Copyright 1997 World Wide
Web Consortium, (Massachusetts
Institute of Technology, Institut
National de Recherche en Informatique et en Automatique, Keio University). Все Права
Зарезервированы.

Документы на сайте W3C
предоставляются для копирования на основе
следующей лицензии.
Получая, используя и/или копируя этот
документ или документ W3C, на который в
данном документе имеется ссылка, Вы
согласны с тем, что Вы прочитали, поняли и
согласны со следующими положениями и
условиями:

Разрешение на использование, копирование
и распространение содержания этого
документа или документа W3C, на который в
данном документе имеется ссылка, на любых
носителях для любых целей и без оплаты или
арендной платы даётся с условием, что Вы
включите нижеследующую информацию во ВСЕ
копии документа или его части, которые Вы
используете:

Ссылка URI на оригинальный документ W3C.
Уведомление о предшествующих авторских
правах оригинального автора, если они
отсутствуют, в форме: «Copyright World Wide Web Consortium, (Massachusetts Institute of
Technology, Institut National de
Recherche en Informatique et en Automatique, Keio University). Все Права Зарезервированы.»
Если они указаны, СТАТУС документа W3C.

Если место позволяет, необходимо включать
полный текст этого УВЕДОМЛЕНИЯ.
Дополнительно должны быть приписаны
заверения для владельцев авторских прав на
любое программное обеспечение, документы
или другие объекты или продукты, которые Вы
создали в соответствии с выполнением
содержимого данного документа или любой
его части.

Вы не имеете права, в соответствии с
данной лицензией, создавать модификации
или выдержки.

ЭТОТ ДОКУМЕНТ ДАЁТСЯ «AS IS\КАК ЕСТЬ»
И ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ ДАЮТ НИКАКИХ
УКАЗАНИЙ ИЛИ ГАРАНТИЙ, ЯВНЫХ ИЛИ КОСВЕННЫХ,
ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯ, ГАРАНТИИ
РЕАЛИЗУЕМОСТИ, ПРИГОДНОСТИ ДЛЯ КОНКРЕТНЫХ
ЦЕЛЕЙ, НЕНАРУШЕНИЕ ЗАКОНА ИЛИ ИМЕНОВАНИЕ, —
ЧТО СОДЕРЖИМОЕ ДАННОГО ДОКУМЕНТА ПОДХОДИТ
ДЛЯ ЛЮБЫХ ЦЕЛЕЙ, НИ ЧТО ВЫПОЛНЕНИЕ ТАКОГО
СОДЕРЖИМОГО НЕ ВЫЗОВЕТ НАРУШЕНИЯ
ПАТЕНТОВ КАКОЙ-ЛИБО ТРЕТЬЕЙ СТОРОНЫ,
АВТОРСКИХ ПРАВ, ТОРГОВЫХ МАРОК И ДРУГИХ
ПРАВ.

ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ НЕСУТ
ОТВЕТСТВЕННОСТИ ЗА ЛЮБОЙ ПРЯМОЙ, КОСВЕННЫЙ,
СПЕЦИАЛЬНЫЙ ИЛИ ВОЗМОЖНЫЙ ВРЕД, НАНЕСЁННЫЙ
ИЗ-ЗА КАКОГО-ЛИБО ИСПОЛЬЗОВАНИЯ ДАННОГО
ДОКУМЕНТА ИЛИ ВЫПОЛНЕНИЯ ИЛИ РЕАЛИЗАЦИИ
ЕГО СОДЕРЖИМОГО.

Имена и торговые марки владельцев
авторских прав НЕ могут использоваться для
публичных целей и рекламы данного
документа или его содержимого без
специального письменного разрешения.
Наименование авторских прав в данном
документе всегда остаётся за их
владельцами.

предыдущий следующий
свойства
индекс

14.4 Каскады таблиц стилей

Каскадные языки таблиц стилей, такие как CSS, позволяют использовать информацию о стиле из нескольких источников. Однако не все языки таблиц стилей поддерживают каскады. Чтобы определить каскад, авторы указывают последовательность элементов и/или . Каскад информации таблиц стилей производится в порядке указания элементов в разделе .

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

В следующем примере мы определяем две альтернативные таблицы стилей с именем «compact». Если пользователь выбирает стиль «compact», агент пользователя должен применять обе внешние таблицы, а также постоянную таблицу «common.css». Если пользователь выбирает стиль «big print», применяться будут только альтернативная таблица «bigprint.css» и постоянная таблица «common.css».

<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">

Вот пример каскада, в котором задействованы оба элемента —
и .

<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.1
Каскады, зависящие от устройств

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

В следующем примере мы определяем каскад, в котором таблица стилей «corporate» представляется в нескольких версиях: одна для печати, другая для экранного представления, третья для речевых браузеров (полезная, например, при чтении электронной почты в машине). Таблица «techreport» применяется ко всем устройствам. Цветная rule, определяемая элементом , используется для печати и для экрана, но не для звукового представления.

<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.2 Наследование и каскады

Если агент пользователя собирается представлять документ, ему необходимо найти значения для свойств стиля, например, семейство шрифтов, начертание, размер шрифта, длину строки, цвет текста и т.д. Точный механизм зависит от языка таблиц стилей, но в общем применяется следующее:

Механизм каскадирования используется, если к элементу применяется ряд правил стиля. Этот механизм позволяет агенту пользователя сортировать правила по специфичности и определять, какое правило нужно применить. Если правило невозможно найти, следующий шаг зависит от наследования свойства. Не все свойства могут наследоваться. Для этих свойств язык таблиц стилей обеспечивает значения по умолчанию для использования в случае отсутствия явных правил для конкретного элемента.

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

Сортировка по важности

Фактически все правила разделяются на группы — !important и обычные. И далее сортируются только в пределах своей группы. Это как будто козыря сравниваются только с козырями, а обычные карты — с обычными. Козырная шестерка бъет любого простого туза. Точно так и тут: правила, отмеченные, как !important всегда получат более высокий приоритет.

Чтобы окончательно нас запутать, сортировку по важности смешали с сортировкой по источнику. Логика такая: если читатель в своей таблице отметил правило, как !important, то значит ему очень нужен этот стиль! И даже авторский !important не должен перебить такое правило

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

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

важные объявления читателя;
важные объявления автора;
обычные объявления автора;
обычные объявления читателя;
объявления агента пользователя;

6.1 Специфицированные, вычисленные и текущие значения

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

Конечное значение свойства является результатом трёхступенчатого процесса вычисления: значение определяется по спецификации («специфицированное значение»), затем, если необходимо, выводится абсолютное значение («вычисленное значение») и наконец — трансформируется в соответствии с ограничениями локальной среды («реальное значение»).

6.1.1 Специфицированные значения

ПА обязаны сначала назначить свойству специфицированное значение на основе следующих механизмов (по приоритету):

Если , использовать его.
Иначе, если свойство , использовать значение элемента-предка, обычно — вычисленное значение.
Иначе, использовать начальное значение свойства. Начальное значение каждого свойства указано в определении свойства.

Не имея предков, корневой элемент не может использовать значения, унаследованные от элемента-предка; в этом случае используется, если необходимо, начальное значение.

6.1.2 Вычисленные значения

Специфицированные значения могут быть абсолютными (т.е. не специфицированными относительно других значений: ‘red’ или ‘2mm’) или относительными (т.е. специфицированными относительно других значений: ‘auto’, ‘2em’, ‘12%’). Для абсолютных значений не требуется никаких вычислений, чтобы найти вычисленное значение.

Относительные значения, с другой стороны, обязаны быть трансформированы в вычисленные значения: процентные рассчитываются относительно данного значения-ссылки (каждое свойство определяет соответствующее значение), значения с указанием единиц измерения (em, ex, px) должны быть сделаны абсолютными путём применения подходящих по размеру шрифтов или в пикселах, значения ‘auto’ должны высчитываться по формулам, данным для каждого свойства, ключевые слова (‘smaller’, ‘bolder’, ‘inherit’) должны быть замещены в соответствии со своими определениями.

В большинстве случаев элементы наследуют вычисленные значения. Однако есть некоторые свойства, чьи специфицированные значения могут наследоваться (например, числовое значение свойства ). В тех случаях , когда дочерние элементы не наследуют вычисленные значения, это описывается в определении свойства.

6.1.3 Реальные значения

Вычисленное значение в принципе готово для использования, но ПА могут не иметь возможности использовать такое значение в имеющемся окружении. Например, ПА могут иметь возможность представлять рамки лишь размером в целое число пикселов и, следовательно, должны сделать приближение до вычисленной ширины. Реальное значение — это вычисленное значение после выполнения некоторого приближения.

Метод связывания (Linking) в CSS

Это самый надежный и самый эффективный способ использования каскадных таблиц стилей.

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

Чтобы подключить к странице файл с таблицами стилей, надо использовать элемент в секции :

Задание css1_1.

Используя метод встраивания определите цвет текста элемента h1.
Используя метод вложения определите задний фон страницы.
Используя метод связывания определите написание параграфа курсивным стилем.

Работайте над текстом:

<body>
<h1>В моей душе<h1>
<p>
Я хочу быть ребенком, наивным и смелым,<br>
Ничего не бояться и верить в добро.<br>
Я бы снова писала по черному белым:<br>
Два плюс два - ну, четыре, конечно равно! 
<p>