Наследование и каскадирование 2020 год

28. Наследование и каскадирование

В лекции рассматриваются две фундаментальные концепции CSS — Наследование и каскадирование.

Введение

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

Две концепции тесно связаны, но тем не менее различны. Наследование связано с тем, как элемент в разметке HTML наследует свойства своих элементов предков (в которых он содержится) и передает их своим потомкам, в то время как каскадирование имеет дело с объявлениями CSS, которые применяются к документу, и как конфликтующие правила переопределяют друг друга.

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

Лекция имеет следующее содержание:

Почему наследование полезно

Как работает наследование

Порядок исходного кода

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

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

Не все свойства CSS наследуются, так как для некоторых из них это не имеет смысла. Например, поля не наследуются, так как маловероятно, что элементу потомку могут понадобиться такие же поля, как и его предку. В большинстве случаев здравый смысл подскажет, какие свойства наследуются, а какие нет, но для абсолютной уверенности необходимо проверить свойство в итоговой таблице свойств в спецификации CSS 2.1 (http://www.w3.org/TR/CSS21/propidx.html).

Почему наследование полезно

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

Используя наследование можно, например, определить свойства шрифта для элементов html или body, и они будут унаследованы всеми другими элементами. Можно определить цвета фона и переднего плана для определенного контейнерного элемента, и цвет переднего плана будет автоматически унаследован элементами потомками в этом контейнере. Фоновый цвет не наследуется, но начальное значение для background-color будет transparent, что означает, что фон предка будет просвечивать. Эффект будет аналогичен тому, который был бы получен при наследовании фонового цвета, но посмотрите, что произойдет, если бы наследовались фоновые изображения! Каждый потомок имел бы такое же фоновое изображение, как и его предок, и результат выглядел бы как некоторая головоломка, собранная человеком с больной головой, так как фон «начинался» бы для каждого элемента.

Каскадность и наследование

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

Информация: Каскадность и наследование

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

Три основных источника информации о стилях образовывают каскад. К ним относятся следующие:

  • Стили разметки браузера по умолчанию.
  • Стили, указанные пользователем при чтении документа.
  • Стили, связанные с документом их автором. Их можно указывать в трех местах:
  1. Во внешнем файле: в этом учебном руководстве обсуждается преимущественно этот метод указания стилей.
  2. В начале документа (раздел заголовок документа): используйте этот метод только для стилей в пределах этой страницы.
  3. Для конкретного элемента в теле документа: это наименее поддерживаемый метод, но может быть использован для тестирования.

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

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

Часть стиля может происходить от измененных настроек браузера или измененного файла определения стиля. В Firefox настройки можно изменить в диалоге Предпочтения или же указать стили в файле userContent.css в профиле браузера.

Часть стиля приходит из таблиц стилей, связываемых с документом вики-сервером.

поскольку они являются дочерними. Таким же образом элемент определяет собой абзац текста.»>

наследует большую часть стиля элемента .

Читать еще:  Наследники россии минус 2020 год

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

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

These are not the only priorities that apply. A later page in this tutorial will explain more.

CSS также предоставляет способ переопределения стиля в авторском документе для читателя с помощью ключевого слова !important .

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

Если вы хотите знать все детали каскадирования и наследования, ознакомьтесь с документом Assigning property values, Cascading, and Inheritance в спецификации CSS.

Записки инженера

Доступным языком заметки по IT технологиям

Наследование, каскадирование и специфичность CSS

Данный пост я написал больше для себя, дабы укрепить полученные знания из разных источников. Здесь, я выложу переработанную информацию на тему «наследования, каскадирования и специфичности в CSS» в удобном для понимания виде, с примерами и комментариями.

Но для начала разберемся, что означает само понятие Cascading Style Sheets, данный вопрос кстати могут задать на собеседование, разбираемся…

Cascading Style Sheets переводиться как «каскадная таблица стилей». Расшифровывать данное понятие будем с конца.

Что такое стиль?

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

Что такое таблица стилей?

Это набор стилей, пример

Почему каскадная таблица стилей?

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

Под каскадированием понимается принцип, при котором результирующий стиль строиться каскадно, т.е. поэтапно шаг за шагом, проходя некоторые этапы — каскады. Браузер просматривает каскад таблиц стилей, сначала таблицы с наименьшим приоритетом, далее с более высоким приоритетом и т.д. по возрастанию. Если к одному html тэгу обращены несколько стилей, то применяться будет тот, который имеет наибольший приоритет (т.е. находиться в таблице с наибольшим приоритетом). Пример рассмотрим позже, когда будем разбираться с приоритетами.

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

Все элементы наследники body, будут иметь текст красного цвета.

Разберемся с приоритетами

Перечислим таблицы стилей по возрастанию приоритетов

  1. наименьший приоритет имеют таблицы стилей расположенные в недрах самого браузера, они играют роль стилей по умолчанию
  2. чуть важнее идут по приоритету таблицы стилей созданные пользователем в настройках браузера (что редкость)
  3. далее стили web страницы, и что характерно, таблицы стилей web страницы могут быть объявлены тремя способами, каждый из способов создает таблицу со своим приоритетом, перечислим их по возрастанию:

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

3.2. таблицы помещенные в сам html документ, между тэгами , имеют более высокий приоритет чем таблицы в 3.1

3.3. таблицы стилей которые располагаются в атрибуте style=» … «, более приоритетны чем таблицы 3.2

3.4. самый высоки приоритет у стилей с меткой на конце «!important»

По важности таблицы стилей согласно данным пунктам можно записать так:

3.4>3.3>3.2>3.1>3>2>1

Пример, есть три стиля на web странице

    первый стиль расположен в файле main.css с содержимым

Каскад строился таким образом: стиль в main.css заменил стиль для p, который располагается в браузере в качестве «по умолчанию», т.к. он имеет приоритет выше; далее стиль в «победил» стиль для p указанным main.css; у нас есть еще стиль в атрибуте самого тэга p, т.к. он по приоритету выше чем стиль color:red указанный в , то он заменяет его, в итоге результирующий стиль будет color:green.

А что такое специфичность?

С приоритетами стилей из разных таблиц все понятно, но может возникнуть вопрос, а что если к одному html тэгу обращается несколько стилей из одной таблицы? Например к заголовку h1, в файле main.css будет прописано

h1 в html документе будете расположен так:

Какого цвета будет заголовок h1? Ответ: голубого

Оказывается стили в одной таблицы не всегда равны по приоритету между собой, важность стиля определяет такое понятие как специфичность. Это означает что чем специфичные селектор, тем более приоритетный стиль, в нашем случае селектор «article h1″ более специфичный чем «h1».

Определить специфичность приоритетом можно по следующему правилу:

Специфичность селектору будем выражать в баллах, следующим образом:

  • селектор за каждый идентификатор получает — 100 баллов (пример идентификатора «#id«)
  • селектор за каждый класс, либо псевдо класс — 10 баллов (пример класса и псевдокласса «.my«, «:href«)
  • селектор за каждый тег получает— 1 балл (пример «h1«)
Читать еще:  Наследование внуками вместо умершего отца 2020 год

В нашем случае первый селектор «h1» имеет 1 балл, а второй селектор «article h1» имеет 2 балла, следовательно стиль color:blue важнее чем color:red, поэтому в результате цвет заголовка будет голубой.

Приведу пример специфичностей селекторов, в левом столбце селекторы, в правом «баллы специфичности»

#my p#id 201 балл
#my #id 200 балл
#my p 101 балл
#id 100 балл
.wrapper .content p 21 балл
.content div p 12 балл
.content p 11 балл
p 1 балл

После всего сказанного …

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

  1. Вопрос про приоритеты, специфичность стилей идет только тогда, когда к одному элементу применяется два и более стилей, т.е. когда возникает конфликт стилей.
  2. Конфликт стилей будет только тогда, когда стили указывают на один элемент непосредственно. Например, если мы обозначим для тэга articleчто цвет текста должен быть голубым, а потом для его дочернего элемента h1 что цвет текста должен быть зеленым , то результат для h1 будет зеленый , никакого конфликта не возникает. Правило задающее стиль непосредственно элементу «не конкурент» правилу унаследованное от родительского элемента, он всегда важнее.
  3. Если два и более конфликтующих правила одинаковы по специфичности (одинаковые баллы), то применяется тот который написан последним.

Вам будет интересно:

Буду признателен если вы поделитесь данным постом

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

Введение

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

Две концепции тесно связаны, но тем не менее различны. Наследование связано с тем, как элемент в разметке HTML наследует свойства своих элементов предков (в которых он содержится) и передает их своим потомкам, в то время как каскадирование имеет дело с объявлениями CSS , которые применяются к документу, и как конфликтующие правила переопределяют друг друга.

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

Лекция имеет следующее содержание:

  • Наследование
    • Почему наследование полезно
    • Как работает наследование
    • Пример наследования
    • Принудительное наследование

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

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

    Не все свойства CSS наследуются, так как для некоторых из них это не имеет смысла. Например, поля не наследуются, так как маловероятно, что элементу потомку могут понадобиться такие же поля, как и его предку. В большинстве случаев здравый смысл подскажет, какие свойства наследуются, а какие нет, но для абсолютной уверенности необходимо проверить свойство в итоговой таблице свойств в спецификации CSS 2.1 (http://www.w3.org/TR/CSS21/propidx.html).

    Почему наследование полезно

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

    Используя наследование можно, например, определить свойства шрифта для элементов html или body , и они будут унаследованы всеми другими элементами. Можно определить цвета фона и переднего плана для определенного контейнерного элемента, и цвет переднего плана будет автоматически унаследован элементами потомками в этом контейнере. Фоновый цвет не наследуется, но начальное значение для background-color будет transparent , что означает, что фон предка будет просвечивать. Эффект будет аналогичен тому, который был бы получен при наследовании фонового цвета, но посмотрите, что произойдет, если бы наследовались фоновые изображения! Каждый потомок имел бы такое же фоновое изображение, как и его предок, и результат выглядел бы как некоторая головоломка, собранная человеком с больной головой, так как фон «начинался» бы для каждого элемента.

    Как работает наследование

    Каждый элемент в документе HTML будет наследовать все наследуемые свойства своего предка, за исключением корневого элемента ( html ), который не имеет предка.

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

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

    1. Скопируйте следующий документ HTML в новый файл в текстовом редакторе и сохраните его как inherit.html .

    Если открыть этот документ в Web-браузере, то вы увидите достаточно скучный документ, выведенный согласно используемому по умолчанию в браузере оформлению.

    Размер текста станет также меньше, только три четверти от того, что было в нестилизованной версии.

    Определенное нами правило CSS применимо только к элементу html . Мы не определили никаких правил для заголовков или параграфов, тем не менее весь текст теперь выводится шрифтом Verdana размером 75% от размера по умолчанию. Почему? В связи с наследованием.

    Свойство font является сокращенным свойством, которое задает целый ряд связанных с текстом свойств. Мы определили только два из них — размер шрифта и семейство шрифта — но это правило эквивалентно следующему:

    Все эти свойства наследуются, поэтому элемент body будет наследовать их из элемента html , а затем передавать дальше своим потомкам — заголовкам и параграфам.

    Но подождите секунду! Происходит что-то подозрительное с наследованием размера шрифта, не так ли? Размер шрифта элемента html задается как 75%, но 75% от чего? И не будет ли размер шрифта тела ( body ) составлять 75% размера шрифта его предка, а размеры шрифта заголовка и параграфа не будут ли составлять 75% от размера шрифта элемента body ?

    Наследуемое значение не является определенным значением — значением, написанным в таблице стилей — а является так называемым вычисляемым значением. Вычисляемое значение будет, в случае размера шрифта, абсолютным значением, измеренным в пикселях. Для элемента html , который не имеет элемента предка, из которого он наследует, значение процента для размера шрифта связано с используемым по умолчанию размером шрифта, заданным в браузере. Большинство современных браузеров задают по умолчанию размер шрифта как 16px. 75% от 16 равно 12, поэтому вычисленное значение для размера шрифта элемента html будет, вероятно, 12px. И именно это значение наследуется в теле и передается дальше в заголовок и параграф.

    (Размер шрифта заголовка будет больше, так как браузер применяет некоторое свое собственное встроенное оформление. Смотрите обсуждение каскадирования ниже.)

    Теперь фон стал ярко голубым, а весь текст белым. Правило применяется к элементу html — всему документу — фон которого будет голубым. Белый цвет переднего плана наследуется элементом body и передается всем наследникам body — в данном случае заголовку и параграфу. Они не наследуют фон, но он будет по умолчанию прозрачным, поэтому окончательный визуальный результат будет белый текст на синем фоне.

    Это правило задает размер шрифта заголовка. Указанный процент применяется к наследованному размеру шрифта — 75% от размера по умолчанию в браузере, который по нашему предположению будет 12px — поэтому размер заголовка будет 300% от 12px, или 36px.

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

    Можно определить принудительное наследование — даже для свойств, которые не наследуются по умолчанию — используя ключевое слово inherit . Однако это должно использоваться с осторожностью, так как Microsoft Internet Explorer (включая версию 7) не поддерживает это ключевое слово.

    Следующее правило заставит все параграфы наследовать все свойства фона от своих предков:

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

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

    Чтобы вывести этот список ссылок как горизонтальное меню, можно использовать следующий код CSS:

    Здесь в правиле для #nav цвет фона всего списка задается как синий. Оно также задает цвет переднего плана как белый, и это наследуется каждым элементом списка и каждой ссылкой. Это правило для элементов списка задает правую границу, но не определяет цвет границы, что означает, что будет использоваться наследованный цвет переднего плана (белый). Для ссылок используется color:inherit , чтобы принудительно реализовать наследование и переопределить используемый по умолчанию в браузере цвет ссылок.

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

Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector