Какое свойство используется для наследования стилей родителя

 div < color: green; border: 1px solid red; >span 
пример

 div < color: green; border: 1px solid red; >span 
пример

Домашнее задание: в комментариях предложить свой пример использования значений inherit, initial и unset, а то у меня фантазия уже исчерпана 🙂

5 комментариев:

Анонимный Здравствуйте!
Не подскажите почему так?
https://jsfiddle.net/og96q6x5/

Почему этот негодяй Н2 сдвигает жёлтый ДИВ в низ. Я вообще хотел без красного. Он жёлтый сдвинул. Я его ещё в один ДИВ так он сдвинул и жёлтый и красный.
Почему?
NMitra Здравствуйте, насколько я поняла вас не устраивает схлопывание? Посмотрите http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Там есть решения проблемы Анонимный Спасибо Вам. Эту пробелку я уже нарыл как решать это схлопывание. Или как у Вас или чистящим ДИВом.

Не у меня другое.
Вот получилось. Что и хотел.
Вроде получилось его усмирить с display:inline-block.
https://jsfiddle.net/og96q6x5/2/

Но вопрос остался. Разве находясь внутри ДИВа он не должен двигаться по этому диву. Никого не трогать?
И почему при display:inline margiņ-top: Не работает?
https://jsfiddle.net/og96q6x5/1/
Анонимный Спасибо Нашёл.
vertical-align: с display:inline; и display:inline-block;

Даа. Как всё это забавно.
NMitra И почему при display:inline margiņ-top не работает? — Потому что он не блочный, у него нет высоты height

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

Описание каждого CSS-свойства говорит наследуется ли оно по умолчанию («Наследуется: да/нет»). Наследование контролирует, что происходит, если значение свойства элемента не определено.

Наследуемые свойства

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

Типичный пример наследуемого свойства color (en-US). Стили:

p  color: green; > 

p>В этом параграфе em>подчёркнутый текстem>.p> 

слова «подчёркнутый текст» станут зелёными, т.к. тег em унаследовал значение свойства color (en-US) от элемента p , а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).

Ненаследуемые свойства

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

Пример ненаследуемого свойства border . Стили:

p  border: medium solid; > 

p>В этом параграфе em>подчёркнутый текстem>.p> 

у слов «подчёркнутый текст» не будет рамки (т.к. начальное значение border-style (en-US): none ).

Замечание

Ключевое слово inherit позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

Смотрите также

• CSS документация
• Ключевые концепции CSS
  • Синтаксис CSS
  • @-правила
  • комментарии
  • специфичность
  • наследование
  • блочная модель
  • режимы компоновки
  • модели визуального форматирования
  • Схлопывание отступов
  • Значения
    • начальные
    • вычисленные
    • используемые
    • действительные

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 7 авг. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

    inherit

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

    Синтаксис

    HTML5 CSS2.1 IE Cr Op Sa Fx

         div < border: 1px solid green; padding: 10px; >p 
    Внимание, запрашиваемая страница не найдена!
      

    Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

    CSS по категориям

    

    Поля

    

    Анимация

    

    Градиент

    

    Скруглённые уголки

    

    Изображения

    

    Псевдоэлементы

    

    Псевдоклассы

    

    Печать

    

    Контент

    

    Интерфейс

    

    Таблица

    

    Отступы

    

    Список

    

    Текст

    

    Шрифт

    

    Форматирование

    

    Размеры

    

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

    

    Границы

    

    Цвет и фон

    Селекторы

    • Селекторы тегов
    • Идентификаторы
    • Классы
    • Мультиклассы
    • Универсальный селектор
    • Вложенные селекторы
    • Дочерние селекторы
    • Соседние селекторы
    • Родственные селекторы
    • Селекторы атрибутов
    • [атрибут=»значение»]
    • [атрибут^=»значение»]
    • [атрибут$=»значение»]
    • [атрибут*=»значение»]
    • [атрибут~=»значение»]
    • [атрибут|=»значение»]

    Урок 9. Уроки CSS. Наследование css-свойств, каскадирование

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

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

    Какие css-свойства (стили) наследуются

    font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.

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

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

    В некоторых ситуациях имеются исключения. Например, мы хотим все же получить значение для свойства от родительского элемента. Тогда можно использовать конструкцию свойство : inherit; Для любого свойства будет принято значение от родителя. Этот механизм называется принудительное наследование.

    Каскадирование CSS, каскадные таблицы стилей

    Мы уже знаем о расшифровке аббревиатуры CSS, с таблицей стилей все в принципе понятно, а что же такое каскадная? Каскадирование — один из базовых механизмов при работе с css-правилами. Для одного и того же элемента может быть задано множество пересекающихся стилей. Стили могут задаваться через атрибут style, через селектор тега, класса, идентификатора, могут наследоваться от родителя и т.д. Вопрос в том, какие же стили применяться к элементу в конечном итоге, давайте разбираться.

    На выбор стилей для элемента влияют несколько факторов. Приоритет, специфичность, порядок кода. Специфичность простым языком можно описать так, чем конкретнее (точнее) задан селектор, тем он специфичнее. Т.е. чем меньше выбираем элементов для данного правила, тем специфичность больше.

    Теперь на примерах:

    • Если задаем стили для элемента по одинаковому селектору, по тегу, по классу, например, то применяются те свойства, которые стоят ниже в css-файле. Ведь специфичность и приоритет в этом случае будут одинаковы.
    • Если одно правило в качестве селектора использует класс, а другое тег с уточняющим классом, то применяются стили второго правила, т.к. более специфичный. Например, для зададим правила с использованием селекторов .firstи p.second. В конечном итоге приоритетными будут свойства второго селектора.
    • Если в качестве селектора использовать идентификатор (id), то такие правила будут приоритетнее. Это происходит потому что элемент с данным Id единственный на страницу, значит специфичность его больше.
    • Еще более приоритетны свойства записанные через атрибут style
    • Чтобы переопределить стили через атрибут style можно использовать ключевое слово !important применимое к любому свойства. Оно переопределяет все. Однако злоупотреблять им не стоит, использовать в крайних случаях

    Перекрестное наследование стилей

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

    • Вынесем общие стили в основной класс .button
    • Зададим вспомогательные стили еще в нескольких классах. Например, .button-red и .button-blue
    • Пропишем у всех сходных элементов базовый класс, а следом при необходимости один или несколько вспомогательных

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

    Дата публикации: 17.01.2018 .

    Похожие публикации:

    1. Azurewave что это
    2. Как закомментировать строку в cmd
    3. Какая сложность
    4. Фоллаут невада где найти спецключ