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

HTML CSS
Простое наследование CSS

В CSS обзор каждого определения свойства CSS указывает, наследуется ли свойство по умолчанию («Наследуется: Да») или нет («Наследуется: Нет»). Это определяет, как вычисляется значение, когда вы не указываете значение для атрибута элемента. —— МДН

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

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

Наследуется ли свойство по умолчанию

Начальное значение относится к значению по умолчанию, когда свойство не имеет указанного значения.Например, значения этих операторов являются значениями по умолчанию:background-color: transparent,left: auto,float: none,width: autoЖдать.

Наследование css очень простое, делится на наследование по умолчанию и ненаследуемое по умолчанию, но все свойства можно установить с помощьюinheritРеализовать наследование.

Если значение не указано, наследуемое свойство по умолчанию принимает вычисленное значение того же свойства родительского элемента (эквивалентно настройкеinherit), свойства, которые не наследуются по умолчанию, принимают начальное значение свойства (когда это эквивалентно установкеinitial).

Свойства, которые наследуются по умолчанию ("Наследуется: Да"):

  • Все элементы наследуют по умолчанию: видимость, курсор
  • Наследование свойств текста по умолчанию: интервал между буквами, интервал между словами, пробел, высота строки, цвет, шрифт, семейство шрифтов, размер шрифта, стиль шрифта, вариант шрифта, вес шрифта, отступ текста, выравнивание текста, тень текста, преобразование текста, направление
  • Элементы списка наследуются по умолчанию: list-style, list-style-type, list-style-position, list-style-image.
  • Элементы таблицы наследуются по умолчанию: border-collapse

Свойства, которые не наследуются по умолчанию ("Унаследовано: Нет"):

  • Все элементы не наследуются по умолчанию: все, отображать, переполнять, содержать
  • Свойства текста по умолчанию не наследуются: вертикальное выравнивание, оформление текста, переполнение текста.
  • Свойства блока по умолчанию не наследуются: ширина, высота, отступы, поля, границы, минимальная ширина, минимальная высота, максимальная ширина, максимальная высота.
  • Свойства фона не наследуются по умолчанию: background, background-color, background-image, background-repeat, background-position, background-attachment
  • По умолчанию свойства позиционирования не наследуются: float, clear, position, top, right, bottom, left, z-index.
  • Свойства контента по умолчанию не наследуются: content, counter-reset, counter-increment
  • Свойства контура по умолчанию не наследуются: стиль контура, ширина контура, цвет контура, контур
  • Свойства страницы по умолчанию не наследуются: размер, разрыв страницы до, разрыв страницы после.
  • Звуковые свойства по умолчанию не наследуются: пауза-до, пауза-после, пауза, метка-до, метка-после, метка, воспроизведение-во время

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

Следует отметить, что значение по умолчанию некоторых атрибутов будет основано на элементеdisplayВычисляется значение атрибута, напримерvertical-alignатрибут, если онdisplay: inlineэлемент, его вычисленное значение выравнивается по базовой линииvertical-align: baseline,еслиdisplay: inline-blockэлемент, его вычисленное значение равноvertical-align: bottom. Для получения подробной информации см.эта статья.

Четыре общих значения свойств

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

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

  • inherit

При установке этого свойства дочерний элемент имеет те же свойства, что и родительский элемент. По сути, это «включение наследования».

  • initial

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

  • unset

Сбросить свойство до его естественного значения, т. е. если свойство унаследовано естественным образом, то оноinherit, иначе иinitialТакой же.

  • revert

Указывает, что используется значение по умолчанию атрибута элемента, определенного в таблице стилей. Если он явно установлен в пользовательской таблице стилей, он устанавливается в соответствии с этим; в противном случае, в соответствии с настройкой стиля в таблице стилей, определяемой браузером; в противном случае он эквивалентен unset . (значение атрибутаrevertПоследняя версия мейнстримабраузерслужба поддержки)

добавлен css3allАтрибут, значение которого может быть одним из четырех вышеперечисленных, означает сбросить значение всех атрибутов элемента, сбросить его до исходного значения или наследовать значение. Когда автор будетdivэлемент установленall: unsetПосле этого произошли странные вещи, в это времяdivизdisplayРасчетное значение оказалосьinline~~ (demo) Более поздний запросMDNтолько что узналdisplayНачальное значениеinline, вы можете увидеть это в браузере Chrome,div/p/h2Начальное значение тега etc сбрасывается стилем пользовательского агента производителя браузера.

Пример

Эти общие значения атрибутов могут иметь множество магических применений, например:

  1. использоватьinheritРеализуйте следующее отражение изображения:адрес 

div::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit; // 背景图片继承，这一般人想不到吧...
    transform: rotateX(180deg);
}
  1. использоватьinitialсброс настроекleftзначение по умолчаниюauto:адрес 
div {
  position: absolute;
  left: 20px;
  top: 20px;
}
div + div {
  left: initial;
  right: 20px;
}

примерdivзадаватьleft, div2rightДля вступления в силуleftсбросить на исходное значениеinitial(илиunset).

  1. использоватьunsetСбросьте свойство до его предыдущего значения, когда оно не было установлено:адрес

примерpпомеченcolorявляется свойством наследования по умолчанию, поэтому в настоящее времяcolor: unsetэквивалентноcolor: inherit.pпомеченborderАтрибуты не унаследованы по умолчанию, поэтому в это времяborder: unsetэквивалентноborder: initial.

.unset {
  border: unset;
  color: unset;
}

Суммировать

Наследование css действительно простое, достаточно запомнить те, которые наследуются по умолчанию, а остальные по умолчанию не наследуются. В дополнение к элементам, связанным с текстом, унаследованные элементы по умолчанию имеют толькоvisibility、cursorОн чаще используется и его легче запомнить.

постскриптум

Эта статья действительно упоминаетсяэта статья, но когда я читал исходный текст, я действительно не до конца понимал, что такое наследование CSS, поэтому я потратил много времени на проверку множества документов, чтобы разобраться в своих идеях, и, наконец, понял, что наследование CSS — это так просто. Он делится на два типа: наследование по умолчанию и ненаследование по умолчанию. Извините, что не прикрепил ссылку на исходный текст в начале, но в исходном тексте 60 глав, я просто выбрал точки знаний одной из глав, чтобы реорганизовать, чтобы сделать себя более понятным и чтобы всем было легче понять наследование. css. А я сам хочу дядю Мышь завершитьARTSЭту статью я писал вбивая в план, а последние две статьи, которые я опубликовал на Наггетсах, тоже имеют следы плагиата.Никак я не хорош на своем уровне.Также очень действенный способ научиться верить что полностью перевариваешь чужие вещи в свои.

Я был 996 в последние несколько месяцев, и время плохое.Нелегко выжать немного, чтобы написать статью.Конечно, я надеюсь, что друзья-копатели могут признать это. Хотя это всего лишь вопрос заимствования, я обобщу и обработаю часть содержания, чтобы ему было легче его понять, сделать более уместным и легче запомнить. Недавно я собираюсь переработать свои знания css, поэтому следующие несколько статей точно будут о css, и будет несколько изздесь, я также прочитаю «Секреты CSS» и «Мир селекторов CSS» и напишу собственное резюме. Если все так любят читать, никто не будет читать статьи, которые я пишу. Но на самом деле это не так. Поэтому моя статья на данный момент написана для тех читателей, кто не читал так много книг, и я искренне надеюсь, что пока я могу совершенствоваться сам, я могу помочь всем вместе совершенствоваться и помогать всем учиться лучше.

Категории