inherit в CSS


CSS: inherit, initital, unset, all

Сегодня я расскажу о четырех интересных ключевых словах CSS. Начнем!

Ключевое слово: inherit

Сразу рассмотри пример:

В результате элемент span будет наследовать свойство font-size от родительского элемента. Если у родительского элемента не определено свойство font-size, тогда элемент span будет использовать вычисленное у родителя свойство font-size (которое может быть унаследовано от другого родителя).

Слово inherit может пригодиться, когда вы хотите присвоить одно и тоже значение на кучу дочерних элементов. Например:

Теперь все элементы div внутри module будут наследовать значение свойства box-shadow.

Ключевое слово: initial

Ключевое слово initial впервые появилось в CSS3. Каждое CSS свойство имеет начальное значение или значение по умолчанию.

Определяя значение свойство используя ключевое слово initial, вы говорите браузеру: «используй значение свойства по умолчанию».

Например, вы можете захотеть использовать значение цвета по умолчанию:

Элемент example будет иметь цвет такой же, как установлен в body. Таким образом мы сбросили другой цвет этого элемента, например, который наследовался от родительского элемента и был красным.

Что касается поддержки браузерами: initial работает в последних версиях Chrome и Firefox. Насчет остальных браузеров я не уверен.

Ключевое слово: unset

Различие между unset и initial в том, что значения, которые могли быть унаследованы элементом, сбрасываются.

Свойство: all

Свойство all сбрасывает все свойства элемента.

В спецификации сказано:


«Данное свойство может использоваться для элементов виджетов на странице, где нежелательно наследовать стили страницы».

Спасибо за внимание!

Подписывайтесь на рассылку! ��

Автор статьи: Alex. Категория: CSS
Дата публикации: 29.09.2013

none и inherit

Я уже не раз говорил, что я не договариваю о некоторых значениях CSS свойств, и как правило, не договариваю я о двух. Эти два значения есть у большинства CSS свойств, за редким исключением они у некоторых не работают, но по сути есть везде. Это «none» и «inherit». Теперь давайте разберемся по очереди как они работают.

«None» отменяет значение которое мы уже задали. Допустим у нас есть «box», где задается «background».

Дальше, мы пишем следующее:

В этом случае «background» отменяется и задаваться не будет.

Таким образом мы можем сбрасывать какие-то значения свойств.

С «inherit» немножечко сложнее. В этом случае, значение берется у родителя этого блока.

Давай немножко усложним текущую ситуацию.

Для «box_2» мы создадим размер шрифта 20 пиксель.

У нас на странице появится текст размером 20 пикселей.

Ну что будет если мы зададим значение «inherit»?

Тогда текст станет размером 16 пикселей. Почему? Потому что мы для этого бокса берем значение родительского бокса. В данном случае это «box_1» у него значение не задано, у него шрифт (стандарт) 16 пикселей.

А если мы для «box_1» зададим какой-то размер шрифта допустим 30 пикселей.


Текст станет размером 30 пикселей, а значит значение font-size для box_2 назначается от box_1.

То есть с помощью «inherit» мы можем сбрасывать значение. Но это только в том случае, если у родителя не задано css-свойство, которое мы хотим сбросить.

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

CSS Inherit Ключевое слово

пример

Установите текст-цвет отображался синим цветом , за исключением тех внутри элементов с классом = «экстра»:

.extra span <
color: inherit;
>

Илон Маск рекомендует:  Что такое код floodfill

Определение и использование

Наследовать ключевое слово указывает, что свойство должно наследует свое значение от своего родительского элемента.

Наследовать ключевое слово можно использовать для любого свойства CSS, а также на любой HTML-элемент.

Версия: CSS3
Синтаксис JavaScript: object .style. Свойство = «унаследовать» Попробуй

Поддержка браузеров

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

Ключевое слово
inherit 1,0 8.0 1,0 1,0 4.0

Примечание: Ключевое слово Inherit не поддерживается в IE7 и более ранних версий. IE8 требует! DOCTYPE.

CSS Синтаксис

Похожие страницы


CSS начальная Ключевое слово: начальное ключевое слово

CSS inherit Keyword

Example

Set the text-color for elements to blue, except those ins :

.extra span <
color: inherit;
>

Definition and Usage

The inherit keyword specifies that a property should inherit its value from its parent element.

The inherit keyword can be used for any CSS property, and on any HTML element.

Version: CSS3
JavaScript syntax: object.style.property=»inherit» Try it

Browser Support

The numbers in the table specifies the first browser version that fully supports the inherit keyword.

Keyword
inherit 1.0 8.0 1.0 1.0 4.0

Note: The inherit keyword is not supported in IE7 and earlier. IE8 requires a !DOCTYPE.

CSS inherit Keyword

CSS inherit keyword applies computed value of the property from its parent element.

CSS inherit keyword applied to any CSS property. The inherit keyword can be used for reinforces the default behavior, and override another rule.

Usages


The following table outline the usages and version history of inherit keyword.

Applies to: all elements
Version: CSS2
JavaScript Syntax: object.style.property = «inherit»

Syntax

Here is a syntax for the CSS inherit keyword

Example

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 8+
  • Opera 4+
  • Safari 1+

Note: The inherit keyword is not supported in IE7 and earlier version.

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

What is meant by “inherit” in css?

How does inherit work here?


Specifically, I need to understand this inherit code example, from w3schools:

How does inherit work in this tag? I need clear answer.

3 Answers 3

Let’s break down the example code.

So, the first span block is saying «color all span elements blue by default, and give them a 1px solid black border».

The .extra span block is a more specific rule than the span block, and the most-specific block describing a particular element will take precedence over less-specific blocks. However, any span tag in this HTML page will first apply the most general block ( span <> ), and then apply the other matching blocks in order of specificity on top of each previous block in the chain. So, tags contained inside an element of class extra , will first have color: blue and border: 1px solid black applied to them. After the first span <> block is applied, the .extra span <> block will be applied. Since .extra span says nothing about borders, the border from the span <> block will be used. This is a large part of where the «Cascading» part of «Cascading Style Sheets» comes from.

Now, with the basics out of the way, what does inherit do? As W3Schools says:

The inherit keyword specifies that a property should inherit its value from its parent element.

Let’s look at the HTML again:

In this case, the parent element is the

It’s important to not get confused and think that inherit inherits from other CSS-rules up the chain (like span <> ): no, it inherits from the properties of its parent element,

Илон Маск рекомендует:  Что такое код mysql_list_processes

Edit

I also found a blog article that covers this a bit more comprehensively, including, as @steveax mentioned in a comment below, how color is inherited by default and can be a bad example. But, as mentioned in this blog post, most browsers use a default stylesheet that colors links blue, and in such a case, the color: inherit property can override this, causing link color to be the same as the parent element. We can see this by modifying our original example (you can do this in the TryIt Editor and see for yourself):

Let’s add a new CSS block:

Now let’s change our

As you can see, the link is now green instead of blue. If we remove our .extra a <> block, the link becomes blue.

Отключаем нежелательные HTML-элементы с помощью CSS


Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и «вечный» font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.

Есть несколько решений проблемы. Одно из них — вывод предупреждающего изображения с помощью CSS, когда изпользуются нежелательные тэги. Подробные обьяснения этого способа есть здесь и здесь. Второе решение — «вырезание» нежелательных тегов и атрибутов на стороне сервера. Этот способ является наиболее эффективным, другое дело что не всегда есть контроль за сервером где расположен сайт.
Идея состоит в том, чтобы сохранить естественный каскад и наследие стилей во всех браузерах, элегантно «отключая» HTML, нежелательный к использованию клиентом. И тогда клиент перестанет использовать его, потому что нежелательные тэги просто перестанут «работать». Элегантный и ненапрягающий клиента способ, который направит его по верному пути.
Нежелательные HTML-тэги и атрибуты:

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

будет превалировать над этим кодом:

Соответственно цвет текста внутри тэга font будет цветом, наследуемым по каскаду, а не синим, как задано в коде. То что надо. Но как вы наверняка знаете — у Internet Explorer есть проблемы с наследуемыми значениями. И в седьмой версии тоже. Так что за работу:
Expressions и currentStyle в помощь:

Работает? Отлично, поехали дальше:

Все чудесно, кроме того что Opera 9 не наследует значение для font-family. К счастью font нас тоже устроит:

С этим разобрались. Перейдем к свойству font-size. Здесь нужна деликатность, так как значение размера шрифта наследуется по отношению к вычисляемому (computed) значению. Предыдушие expression‘ы здесь не сработают, так как если для body выставлено значение свойства font-size, равное 2em, то вычисление значения размера шрифта начнется от этой точки. Браузер проверит значение font-size для родительского элемента тэга font, которое равняется 2em и представит вычисляемое значение, равное 4em (2em от 2em). А это не то что нам нужно. Решение простое. Нужно использовать начальное значение font-size, равное 100% для всех браузеров. Давайте добавим несколько свойств нежелательному тэгу basefont, чтобы и его утихомирить. Вот полный список правил для «укрощения» тэгов font и basefont:

Двигаемся дальше. Давайте воспользуемся базовой техникой, чтобы отменить тэги center, s, strike и u:

Свершилось! Мы «отключили» большинство нежелательных тэгов, используя только CSS и expression’ы.
А как же атрибуты? HTML4 включает в себя некоторое количество нежелательных атрибутов, которые могут изрядно попортить нервы. Давайте их тоже «повыключаем». Начнем с align:

Все бы хорошо, но IE6 не поддерживает селекторы атрибутов. Посему, нам надо модифицировать expression, для того чтобы он проверял наличие атрибута align у тэга. Вот что получилось:

Илон Маск рекомендует:  Что такое код asp getnextdescription

Далее на очереди атрибуты тэга img. Помимо атрибута align, мы хотим отключить атрибуты border, vspace и hspace. Так как значения margin и border не наследуются, то здесь применимо простое правило:

Вот здесь мы как раз сталкиваемся с неразрешимой проблемой для IE6. vspace и hspace не равнозначны свойству margin в нем, поэтому IE6 будет продолжать отображать их. Единственное решение, которое пришло мне в голову это написать маленький скриптик, который будет просто удалять эти атрибуты при загрузке документа:

Я бы предпочел не использовать javascript, но в данном случае я просто не вижу другой альтернативы. Так что пусть будет. Теперь добьем атрибут type в тэге ol:

А теперь атрибут bgcolor для body:

Таблицы. Финальный шаг. В таблицах, в HTML4/4.01, есть ряд нежелательных атрибутов, которые активно использовались для верстки страниц. Но мы же не хотим, чтобы клиент использовал таблицы для верстки? Поэтому давайте отключим атрибуты width, height, bgcolor, valign и border:

Подведем итоги:
Используя CSS-правила и минимальный javascript, нам удалось «отключить» большинство нежелательных тэгов и атрибутов, элегантно сохраняя естественное наследование. Нам не нужно «учить» клиента, он в любом случае должен будет использовать правильную разметку. С учетом одной, очень важной ремарки — очень важно предоставить клиенту достаточное количество описаных CSS-классов, чтобы он не был ограничен в работе с разметкой.
Все стили вместе:

«text-decoration» и «inherit»


значение свойства «text-decoration» не переопределяется указанным непосредственно: none (хотя если, например, указать не «none», а «overline»: http://jsf >

HTML5
23.10.2015, 23:51

text-decoration
Всем привет! Возникла проблема с толщиной подчеркивания: в FF и IE нормальная толщина,а в Chrome.

Не применяет text-decoration: none
Добрый день! Делаю верстку письма и столкнулся с такой проблемой — в яндекс-почте никак не могу.

не работает text-decoration none
Здравствуйте уважаемые форумчане, столкнулся с такой вот проблемой, не работает «text-decoration.

Не убирается text-decoration?
Всем добрый вечере. Каждый раз сталкиваюсь с такой проблемой. Вот все, что есть HTML и CSS: .

CSS: Наследование стилей

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

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

Наследуемые свойства можно переопределить, применив индивидуальное правило для нужного элемента:

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

CSS Inherit ключевое слово

примеров

Настройки цвет элемента текст синий, за исключением тех класса = «лишних» элементов:

Поддержка браузеров

Цифры в таблице представляют первый браузер для поддержки номер версии имущества.

属性
inherit 1.0 8.0 1.0 1.0 4.0

Определение и использование

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

Ключевые слова могут быть использованы, чтобы наследовать любой CSS свойство любого HTML-элемента.

Версия: CSS3
Синтаксис JavaScript: объект .style. Свойство = «Наследовать»попробовать

CSS Синтаксис

Статьи по Теме

CSS начальное ключевое слово: Начальное Ключевое слово

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL