Наследование и каскадирование 8 18 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, что означает, что фон предка будет просвечивать. Эффект будет аналогичен тому, который был бы получен при наследовании фонового цвета, но посмотрите, что произойдет, если бы наследовались фоновые изображения! Каждый потомок имел бы такое же фоновое изображение, как и его предок, и результат выглядел бы как некоторая головоломка, собранная человеком с больной головой, так как фон «начинался» бы для каждого элемента.

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

Доступным языком заметки по 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»

Читать еще:  Покупка унаследованной квартиры 2020 год

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

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«)

В нашем случае первый селектор «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 , чтобы принудительно реализовать наследование и переопределить используемый по умолчанию в браузере цвет ссылок.

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

    Правительство РФ рассмотрит проект бюджета на 2020 год и плановый период 2021 и 2022 годов

    МОСКВА, 19 сентября. /ТАСС/. Кабинет министров под председательством премьер-министра Дмитрия Медведева соберется в четверг на очередное заседание. Как сообщила пресс-служба правительства, на повестку дня вынесен пакет вопросов, касающихся федерального бюджета на предстоящую трехлетку, бюджетов государственных фондов, а также прогноз социально-экономического развития России на 2020 год и период 2021-2022 годов.

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

    Бюджет и макропрогноз

    Минэкономразвития РФ в этом году дважды пересматривало макропрогноз на 2019-2024 годы, с учетом которого формируются параметры федерального бюджета. Последний раз макропрогноз корректировался в начале сентября.

    Несмотря на то что министерство сохранило свои оценки роста ВВП в 2019 году на уровне уже заложенных в бюджете 1,3%, прогноз на 2020 год в апреле был снижен до 1,7% с 2%. При этом в 2021-2022 годах, согласно ожиданиям Минэкономразвития, экономика будет расти на 3,1-3,2%.

    Министерство также серьезно понизило свои ожидания по инфляции на ближайшие годы. Уже в 2019 году рост цен в РФ ожидается на уровне 3,8% (ранее в бюджет закладывались 4,3%), а в 2020-м замедлится до 3% против прогнозируемых ранее 3,8%. К целевому уровню в 4% — именно такой показатель является таргетом ЦБ — инфляция придет в 2021 году и сохранится на нем до 2024 года.

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

    В июне правительственная комиссия по бюджетным проектировкам утвердила профицит федерального бюджета РФ в 2020 году в размере 1,335 трлн рублей, ожидая доходы на уровне 20,333 трлн рублей, а расходы — 18,998 трлн. В 2021 году, как ожидается, доходы федерального бюджета составят 20,97 трлн рублей, расходы — 20,043 трлн, а профицит — 0,927 трлн. На 2022 год доходы определены на уровне 21,772 трлн рублей, расходы — 21,172 трлн, профицит — 0,6 трлн.

    Согласно поправкам в бюджет на 2019 год, опубликованным ранее, профицит федерального бюджета РФ в текущем году составит 1,7% ВВП, или 1,881 трлн рублей. При этом прогнозируемый объем ВВП — 109,086 трлн рублей, уровень инфляции — не выше 4,3%. Объем программы внутренних заимствований составит 1,578 трлн рублей, внешних — 155 млрд рублей, дополнительных нефтегазовых доходов — 3,17 трлн рублей.

    Прогнозируемый объем доходов федерального бюджета в 2019 году составит 20,174 трлн рублей, расходов — 18,293 трлн. Верхний предел внутреннего госдолга РФ на 1 января 2020 года должен уменьшиться до 11,329 трлн рублей. Объем государственного внешнего долга планируется сократить до $64,3 млрд, или €55,4 млрд.

    Поправки в законы

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

    Также на повестку дня вынесен вопрос о страховых тарифах на обязательное социальное страхование от несчастных случаев на производстве и профессиональных заболеваний на 2020 год и на плановый период 2021 и 2022 годов. Предлагается установить, что в ближайшую трехлетку страховые взносы будут уплачиваться в порядке и по тарифам, определенным законом от 22 декабря 2005 года.

    Вынесенные на рассмотрение законодательные инициативы касаются и закона о МРОТ. Законопроектом предлагается установить минимальный размер оплаты труда с 1 января 2020 года в размере 12130 рублей в месяц, что составляет 100% величины прожиточного минимума за второй квартал 2019 года. Повышение МРОТ относительно уровня, установленного с 1 января 2019 года (11280 рублей в месяц), составит 850 рублей (7,5%).

    Правительство также рассмотрит основные направления таможенно-тарифного регулирования на 2020 год и на плановый период 2021 и 2022 годов, а также проект основных направлений единой государственной денежно-кредитной политики на предстоящие три года.

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

    На заседании кабмина в четверг рассмотрят и ряд вопросов о распределении субсидий. Речь пойдет, в частности, о выделении МЧС из резервного фонда правительства в 2019 году до 252 млн рублей для предоставления Хабаровскому краю средств на социальную поддержку пострадавших от паводков в июле — сентябре.

    Минюсту России предлагается выделить из резервного фонда правительства 600 млн рублей на увеличение оплаты труда работников, обслуживание специального криминалистического оборудования и содержание недвижимости. Минэкономразвития из того же источника может быть направлено 1 млрд рублей на предоставление субсидии фонду «Талант и успех» для приобретения имущества РЖД, расположенного на земельных участках, которые предлагается включить в границы создаваемого инновационного научно-технологического центра «Сириус». Росфинмониторингу из резервного фонда правительства предусматривается выделить 247 млн рублей.

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