выберите Параметры с ошибкой background:inherit
Когда я работал над стилизацией страницы с использованием background:inherit для некоторых элементов, я заметил, что по какой-то причине параметры выпадающего списка/выбора иногда теряют свой цвет фона (в Google Chrome). Я провел некоторое тестирование и выяснил, что это, по-видимому, связано с тем, имеет ли сам элемент select родителя или нет.
Вы можете понять, что я имею в виду, используя этот небольшой пример:
<div>
<select>
<option value="default">Default</option>
<option value="stitch">Option 1</option>
</select>
</div>
<div>
<div>
<select>
<option value="default">Default</option>
<option value="stitch">Option 1</option>
</select>
</div>
</div>Когда вы теперь нажимаете кнопку открыть оба выпадающих списка, я ожидаю, что они оба будут иметь синий цвет фона.
Мне было интересно, является ли это предполагаемым способом работы значения наследования и почему оно работает именно так.
html cssПоделиться Источник Dennis van Gils 12 июля 2018 в 21:12
2 ответа
- jqgrid выберите Параметры тега заказ
Я использую jqgrid в моем проекте rails с jqgrid__gem 35, Я добавил, выберите вариант тега как {‘true’ => ‘Active’, ‘false’ => ‘Inactive’} в jqgrid такой, @grid = JqGridRails::JqGrid.new(‘users_table’, :url => #, :height => ‘100%’, :width => 900, :caption => ‘User Listing’ )…
- выберите Параметры исчезают после открытия
После нажатия на кнопку Выбрать параметры отображаются только через секунду,а после того, как пользователь не может выбрать опцию для мастера.
Мы через Hogan.js и Bootstrap и другие элементы прекрасно работают, но на одной конкретной модальной он не работает, на другие модальности работает также…
Мы через Hogan.js и Bootstrap и другие элементы прекрасно работают, но на одной конкретной модальной он не работает, на другие модальности работает также…
1
Наследование значения здесь является непосредственным родительским свойством элемента Второй раскрывающийся div не имеет никакого цвета фона, и для выбора применяется белый фон по умолчанию.
пример кода — https://codepen.io/nagasai/pen/NBqeOg?editors=1010
Я создал еще один div с другим фоном и сделал выбор для наследования
<div> <select> <option value="default">Default</option> <option value="stitch">Option 1</option> </select> </div> <div> <div> <select> <option value="default">Default</option> <option value="stitch">Option 1</option> </select> </div> </div> <div> <div> <select> <option value="default">Default</option> <option value="stitch">Option 1</option> </select> </div> </div>
Поделиться Naga Sai A 12 июля 2018 в 21:28
0
Div наследует свойство от своего родителя!
<pre><div><!-- select's parent -->
<select>
<option value="default">Default</option>
<option value="stitch">Option 1</option>
</select>
</div>
<div>
<div><!-- select's parent -->
<select>
<option value="default">Default</option>
<option value="stitch">Option 1</option>
</select>
</div>
</div></pre>
Поделиться Martynas Miliauskas 12 июля 2018 в 21:24
Похожие вопросы:
Это див в выберите действительное?
Это допустимо, чтобы добавить элемент div в выберите теги? Используя Marionette, у меня есть compositeview, который использует select в качестве itemViewContainer.
Параметры динамически загружаются…
jQuery: выберите глобальный checkbox, когда все его параметры были выбраны
Я видел здесь несколько решений ‘check all’, но ни одно из них не работает наоборот: выберите глобальный checkbox, когда все его параметры уже выбраны. У меня есть список групп. Каждая группа имеет…
angularjs выберите Параметры с графиками?
Я сделал и angularJS выберите меню, которое работает нормально: <select name=s1 id=s1 multiple=multiple data-native-menu=false data-role=none ng-model=userlistSelect ng-options=u.userId as…
jqgrid выберите Параметры тега заказ
Я использую jqgrid в моем проекте rails с jqgrid__gem 35, Я добавил, выберите вариант тега как {‘true’ => ‘Active’, ‘false’ => ‘Inactive’} в jqgrid такой, @grid =…
выберите Параметры исчезают после открытия
После нажатия на кнопку Выбрать параметры отображаются только через секунду,а после того, как пользователь не может выбрать опцию для мастера. Мы через Hogan.js и Bootstrap и другие элементы…
выберите из с подстановочным знаком, в Q KDB
Я использую KDB с инструментом, который позволяет мне задавать запросы. С помощью этого инструмента можно изменять только параметры (значение фильтра) при взаимодействии с пользователем, а не…
Bootstrap выберите пользовательские динамические параметры
Я использую bootstrap select и сталкиваюсь с проблемой, когда хочу добавить динамические параметры с помощью Javascript. Список всегда пуст. Когда я снова переключаюсь на использование HTML,…
Выберите Параметры из выпадающего списка multi-select
Я использую select_tag из rails с функцией bootstrap multi-select. Я могу показать варианты. Но как выбрать параметры с помощью jquery при загрузке страницы? выберите код тега <%= select_tag…
html выберите элемент, параметры которого зависят от другого выбора
Ошибка: Пожалуйста, выберите конечную точку по умолчанию
Проходя через учебник по Treehouse, пытаясь создать навык Alexa с помощью Lambda и приходя со следующей ошибкой Пожалуйста, выберите и укажите, что это значит и как мне решить эту проблему ?
inherit | CSS | WebReference
Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено.
Синтаксис
Свойство: inherit;Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>inherit</title> <style> div { border: 1px solid green; padding: 10px; } p { border: inherit; padding: inherit; } </style> </head> <body> <div><p>Внимание, запрашиваемая страница не найдена!</p></div> </body> </html>
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.04.2020
Редакторы: Влад Мержевич
CSS — inherit
Значения свойств: inheritinitialunsetАдресВремяМедиа-запросыПроцентыРазмерСтрокаУголФильтрЦветЧислоКлючевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено.
Синтаксис ?
Свойство: inherit;✖
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inherit</title>
<style>
div {
border: 1px solid green;
padding: 10px;
}
p {
border: inherit;
padding: inherit;
}
</style>
</head>
<body>
<div><p>Внимание, запрашиваемая страница не найдена!</p></div>
</body>
</html>
Спецификация ?
✖Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры: Настольные Мобильные
?| Internet Explorer | Chrome | Opera | Safari | Firefox |
| 8 | 1 | 4 | 1 | 1 |
| Android | Firefox Mobile | Opera Mobile | Safari Mobile |
| 1 | 1 | 1 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Наследование CSS | Дорвард
Введение
Многие новички в CSS сбиты с толку наследованием; это часто потому что они исходят из объектно-ориентированного программирования ( ООП, ) и ожидают, что CSS будет работают аналогичным образом.
Этот документ пытается объяснить наследование CSS и представить альтернативы объектно-ориентированному наследованию, чтобы продемонстрировать, почему это не так необходимо.
Наследование CSS
Наследование CSS работает на основе свойств.При применении элементу в документе свойство со значением «наследовать» будет используйте то же значение, что и у родительского элемента для этого свойства.
Например, для этой таблицы стилей:
.foo {
цвет фона: белый;
черный цвет;
}
.бар {
цвет фона: наследовать;
цвет: наследовать;
шрифт: нормальный;
} И этот фрагмент HTML:
Привет, мир. Это очень короткий
пункт!
Цвет фона элемента div белый, потому что background-color установлено значение белого цвета.Цвет фона абзац также белый, потому что свойство цвета фона установлен для наследования, а цвет фона родительского элемента ( div) установлен в белый цвет.
Наследуемое значение не не требует, чтобы родительский элемент имел тот же набор свойств явно ; это работает от вычисленное значение . В приведенном выше примере цвет свойство абзаца имеет значение «наследовать», но вычисленное значение «черное», потому что оно наследуется.
Может показаться, что набирать много, но по умолчанию значение для многих свойств уже унаследовано, а для большинства других (например, граница) вы обычно не хотите наследовать родительский значение элемента.
Размышляя над этим, отмечу, что не все свойства могут быть унаследованы.
Объектно-ориентированное наследование
Многие люди спрашивают в списках рассылки и в группах новостей о CSS, можно сделать что-то вроде:
.foo {
цвет фона: белый;
черный цвет;
}
.бар {
Некоторая отсылка к приведенному выше стилю для .foo
шрифт: нормальный;
} Это не так. Селектор — это просто селектор, в нем нет ничего особенного
о занятиях. Все стало бы довольно сложно, если бы у вас был .foo>
.bar в качестве селектора для стиля, который вы хотите импортировать, или
несколько одинаковых селекторов.
Я не буду вдаваться в подробности того, как можно изменить CSS, чтобы функциональность, не только не было бы недостатка поддержки среди сегодняшних поколение браузеров (которые, вероятно, будут с нами надолго прийти), но это не нужно.CSS уже дает нам инструменты, которые мы необходимость.
Есть несколько подходов, которые мы могли бы использовать.
Несколько классов
Хорошее использование классов решит большинство проблем. Возьми пример с блоками данных, плавающими на разных сторонах холст.
.oddBoxOut {
ширина: 12em;
плыть налево;
заполнение: 0.5em;
маржа: 0,5em;
граница: сплошная черная 1px;
}
.evenBoxOut {
ширина: 12em;
float: right;
заполнение: 0.5em;
маржа: 0,5em;
граница: сплошная черная 1px;
} Как видите, многие свойства дублируются в каждом определении, так что очевидно, почему кому-то может понадобиться наследование в стиле объектно-ориентированного программирования.
Но есть и другое решение. Давайте быстро оглянемся на HTML спецификация:
- класс = cdata-list [CS]
- Этот атрибут присваивает элементу имя класса или набор имен классов. Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько Имена классов должны быть разделены пробелами.
Значит, мы можем присвоить несколько имен классов одному элементу? Что означает, что мы можем изменить таблицу стилей, чтобы она выглядела так:
.boxOut {
ширина: 12em;
заполнение: 0.5em;
маржа: 0,5em;
граница: сплошная черная 1px;
}
.oddBoxOut {
плыть налево;
}
.evenBoxOut {
float: right;
} И тогда HTML будет выглядеть так:
Селекторы группировки
Один стиль может иметь несколько селекторов, назначенных ему через
использование группировки.
Чтобы вернуться к предыдущему примеру, мы сначала упростим HTML, чтобы
упомянуть только один класс:
Затем мы назначаем ему нужный CSS, но группируем общие
пары свойство / значение.
.oddBoxOut,
.evenBoxOut {
ширина: 12em;
заполнение: 0.5em;
маржа: 0,5em;
граница: сплошная черная 1px;
}
.oddBoxOut {
плыть налево;
}
.evenBoxOut {
float: right;
}
Эти два метода должны решить большинство проблем, о которых люди думают.
можно решить с помощью объектно-ориентированного наследования, но у нас все еще есть возможность
использования препроцессора.
Препроцессор
Принцип работы препроцессора очень прост. Вы используете программное обеспечение для
просмотреть файл и заменить помеченные области переменными.В результате
вы расширяете CSS, чтобы разрешить наследование в стиле OO, используя любой синтаксис
ты желаешь. Затем вы используете свое собственное программное обеспечение для создания обычного CSS.
со своего доморощенного языка.
Это очень простой (разработанный, чтобы быстро писать для
целей этого примера, чтобы не было так просто использовать, как могло бы быть)
препроцессор, написанный на Perl (поэтому вам понадобится Perl, чтобы использовать его). Вы можете
используйте его сами или просто возьмите его как пример того, как вы могли бы
продолжить в письменном виде или найти его третьим лицом.
Это не особо практичный пример, но он показывает, что
может быть сделано. Этот скрипт выводит на стандартный вывод, поэтому его можно
передается в файл по желанию.
#! / Usr / bin / perl
# Скажите Perl предупредить меня, если я пишу плохой код
используйте строгий;
использовать предупреждения;
# Определите некоторые значения, которые я мог бы использовать
мой $ main_foreground_colour = "черный";
мой $ main_background_colour = "белый";
мой $ highlighted_foreground_colour = "белый";
мой $ highlighted_background_colour = "# 000033";
# Определить набор пар свойство / значение, которые я хочу
# использовать более одного раза.мой $ box = << КОНЕЦ;
ширина: 12em;
маржа: 0,5em;
заполнение: 0.5em;
граница: сплошная черная 1px;
КОНЕЦ
# Затем распечатайте таблицу стилей, используя эти переменные
print << END;
тело {
цвет фона: $ main_background_colour;
цвет: $ main_foreground_colour;
}
.oddBoxOut {
$ box
плыть налево;
}
.evenboxOut {
$ box
float: right;
}
END
Основные сведения о ключевых словах CSS «Начальное», «Наследование» и «Отмена» | by Elad Shechter
В CSS есть ключевые слова по умолчанию для различных значений.В этой статье я расскажу о трех из них: , начальный , наследует , и относительно новый, неустановленный .
Есть большая вероятность, что, хотя большинство веб-разработчиков сталкивались с ними, многие даже самые опытные из них не понимают их до конца.
Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? В чем именно между ними разница? Я решил глубоко изучить эти три ключевых слова, чтобы полностью раз и навсегда понял разницу между этими тремя общими значениями ключевых слов.
Прежде чем мы начнем разбираться в ключевых словах CSS, важно понять, откуда мы берем наши основные стили в нашем браузере.
Начальное значение каждого свойства в CSS
Каждое свойство CSS имеет начальное значение. Это начальное значение не связано с типом HTML-элемента, к которому оно применяется.
Пример из MDN начального значения :
Начальное значение высоты строки - «нормальное» Стили браузера пользователя-агента
После применения начальных стилей всех свойств CSS браузер загружает свои стили.Эти стили не имеют ничего общего с базовыми начальными значениями свойств CSS.
Пример стиля пользовательского агента :
стилей элементов h2 из пользовательского агента браузера Chrome HTML-элементы не имеют начальных значений стиля! Основные стили элемента HTML, такие как, например, тег
Теперь давайте поговорим о ключевых словах CSS!
Значение ключевого слова наследовать указывает браузеру искать значение ближайшего родительского элемента и позволить текущему элементу унаследовать это значение.Если ближайший родитель также имеет наследуемое значение, браузер продолжит движение вверх по DOM, пока не найдет какое-либо значение. Если значение отсутствует, браузер будет использовать стиль пользовательского агента, а если стиль пользовательского агента отсутствует, он будет использовать начальный базовый стиль .
Чтобы понять начальное ключевое слово , мы должны помнить важный факт: каждое свойство в CSS имеет значение по умолчанию, которое не имеет ничего общего со значением по умолчанию пользовательского агента. Стили пользовательского агента - это основные стили, которые браузер применяет к HTML-элементам в браузере.Мы склонны думать, что они приходят автоматически с HTML, но это не так.
Первоначальное ключевое слово указывает браузеру использовать значение CSS по умолчанию для данного свойства. Например:
- Начальное значение свойства
цвет всегда будет черный
Это поведение может сбивать с толку, потому что, как мы уже говорили ранее, значение свойства CSS по умолчанию не обязательно значение по умолчанию, которое браузер определяет для элемента.Например, начальное значение свойства display - inline для всех элементов. Поэтому, если элемент получает начальное значение в своем свойстве display , его отображение будет встроенным , а не блоком , который является его стилем пользовательского агента. Пример:
div.box {
background-color: red;
дисплей: начальный ; / * будет равно встроенному и не будет блокироваться * /
} Пример на CodePen свойства отображения элемента Initial в div
начальное значение отображения - информация в MDN Ключевое слово unset уникально тем, что оно по-разному работает с разными типами свойств. В CSS существует два типа свойств:
- Унаследованные свойства - свойства, которые влияют на их дочерние элементы. Все свойства, влияющие на текст, имеют это естественное поведение . Например, если мы определим размер шрифта
для элемента HTML, он будет применяться ко всем элементам HTML, пока вы не установите другой размер шрифта во внутреннем стиле элемента HTML.
font-size наследуемое свойство - взято из MDN- Не наследуемые свойства - Все остальные естественные свойства, которые влияют только на элемент, который они определяют. Это все свойства, которые не применяются к тексту . Например, если вы поместите
границу на родительский элемент, его дочерний элемент не получит границы. Не наследуемое свойство границы
- взято из MDN Неустановленное значение
работает так же, как наследует для унаследованных типов свойств. Например, для свойства text color он будет работать так же, как наследует значение , то есть искать родительский элемент с определением свойства, и если ничего не найдено - использовать значение user-agent, и если нет никакого стиля пользовательского агента, он будет использовать исходный базовый стиль . Для ненаследуемых свойств значение unset будет работать так же, как начальное значение , то есть применить значение по умолчанию CSS; например, для цвета границы он будет работать как начальный .
. Некоторого класса {
цвет: нестандартный ; / * будет равно значению « наследовать » * /
display: unset ; / * будет равно значению ' initial ' * /
} Зачем использовать Unset, если он работает точно так же, как Inherit и Initial?
Если unset действует как начальный и наследует , зачем нам использовать unset ?
Если мы сбрасываем только одно свойство, то unset не требуется: вместо этого мы можем просто использовать , наследовать или начальные значения .
Но в настоящее время у нас есть новое свойство под названием all , которое дает новую возможность: сбросить сразу все унаследованных свойств и ненаследуемых свойств !
В этом новом способе вам не нужно сбрасывать свойства по одному. Таким образом, применение значения unset к свойству all сбросит все унаследованные свойства на , наследовать , а все ненаследуемые свойства на исходное значение .
Это единственная причина существования нового значения ключевого слова unset ! В противном случае мы могли бы использовать вместо этого значения , наследующие и начальные значения .
Вместо того, чтобы сбрасывать свойства по одному, , например:
/ * Плохо * /
.common-content * {
font-size: inherit ;
вес шрифта: наследование ; ширина границы: начальный ;
background-color: начальный ;
}
Мы можем использовать новое свойство all со значением unset , которое повлияет на все существующие свойства, например :
/ * Good * /
.общее содержание * {
все : отключено ;
}
Я написал небольшой пример, чтобы продемонстрировать, как свойства ведут себя при использовании свойства all с неустановленным значением : некоторые действуют так, как если бы было применено значение inherit , а некоторые - как если бы исходное значение был применен. Пример кода на CodePen all: unset; .
Но что, если мы хотим сбросить стили свойства к исходному стилю пользовательского агента, а не к базовому стилю свойства? Например, чтобы вернуть свойство display элемента к блоку (его стиль пользовательского агента), а не inline (его базовый стиль CSS)? Базовый стиль пользовательского агента тега HTML div Для этого мы скоро получим новое ключевое слово CSS: revert .Ключевое слово revert очень похоже на unset , с той лишь разницей, что оно предпочитает стили пользовательского агента базовому стилю свойства CSS. Например:
div {
display: revert; / * = блок * /
} h2 {
font-weight: revert; / * = жирный * /
font-size: revert; / * = 2em * /
} Таким образом, если мы хотим сбросить все стили тега HTML к базовому стилю браузера, мы можем сделать это следующим образом:
/ * Хорошо * /
.общее содержание * {
все : вернуть ;
}
-
наследовать - работает во всех браузерах, включая Internet Explorer 11 -
начальный и не установлен и вернуться - работает во всех браузерах, кроме Internet Explorer 11
* обновлено в 29 / 4/2021
Вот и все.
Надеюсь, вам понравилась эта статья и вы узнали из моего опыта.
Если вам понравился этот пост, я буду признателен за аплодисменты и обмен 🙂
Вы можете подписаться на меня через Twitter .
Я сделал молниеносный доклад на эту тему, вы можете посмотреть полное видео на YouTube:
Мой доклад: «Ключевые слова CSS, которые никто не понимает на самом деле» Другие мои сообщения CSS:
- Почему CSS HSL Colors лучше!
- Обрезка многострочного текста в CSS
- Понимание разницы между разрешением CSS и разрешением устройства
Кто я?
Я Элад Шехтер, веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML.Я работаю на Investing.com.
Есть ли способ наследовать родительский цвет фона?
Здравствуйте,
Большое спасибо за ваши предложения и быстрые ответы. Я действительно поражен вашим ноу-хау!
Использование смарт-правил кажется лучшим решением.
Честно говоря, проблема с цветом фона - это (или была) только одна задача в моем требовании.
Позвольте мне объяснить: мне нравится использовать MS ToDo для организации моей повседневной работы.Но очень часто небольшие задачи являются частью (очень) небольшого проекта. MS ToDo не ориентирован на «управление» проектами. Итак, у меня возникла идея такого процесса:
1. Введите задачу в MS ToDo в конкретный список задач проекта. Теперь в этом подсписке «проект-задача» создается задача MS-Outlook.
2. В Outlook я открываю Задачи и выделяю задачам в подсписке цветную категорию. (Этот шолуд можно использовать только для первой задачи нового проекта; позже вы также можете сделать это в mindmanager)
3.Я создал карту мыслей Канбан в Mindmanager. Создав ссылку для синхронизации в задачах Outlook (Advanced-Outlook-Query) и выберите подсписок задач «Project-task».
4. В Mindmanager запускаю запрос для синхронизации задач. Теперь задачи Outlook являются частью диаграммы разума со всеми категориями (и их цветами). Категории и цвета Outlook отображаются в каждой отдельной задаче mindmap.
5. Добавить новые задачи из MS ToDo на карту Kanban просто: задачи без категорий отображаются на карте интеллекта как без категорий.Теперь я добавляю категорию карты разума к задаче без категорий и дважды запускаю синхронизацию: сначала для создания задачи в Outlook, которая добавляет к задаче цвет категории. Во-вторых, чтобы синхронизировать задачу Outlook с картой разума. Здесь задача имеет цвет фона категории.
Надеюсь, вы сможете следовать моему описанию. Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь обращаться ко мне.
Стефан
Здравствуйте,
Большое спасибо за ваши предложения и быстрые ответы.Я действительно поражен вашим ноу-хау!
Использование смарт-правил кажется лучшим решением.
Честно говоря, проблема с цветом фона - это (или была) только одна задача в моем требовании.
Позвольте мне объяснить: мне нравится использовать MS ToDo для организации моей повседневной работы. Но очень часто небольшие задачи являются частью (очень) небольшого проекта. MS ToDo не ориентирован на «управление» проектами. Итак, у меня возникла идея такого процесса:
1. Введите задачу в MS ToDo в конкретный список задач проекта.Теперь в этом подсписке «проект-задача» создается задача MS-Outlook.
2. В Outlook я открываю Задачи и выделяю задачам в подсписке цветную категорию. (Этот шолуд можно использовать только для первой задачи нового проекта; позже вы также можете сделать это в mindmanager)
3. Я настроил карту мыслей Канбан в Mindmanager. Создав ссылку для синхронизации в задачах Outlook (Advanced-Outlook-Query) и выберите подсписок задач «Project-task».
4. В Mindmanager запускаю запрос для синхронизации задач.Теперь задачи Outlook являются частью диаграммы разума со всеми категориями (и их цветами). Категории и цвета Outlook отображаются в каждой отдельной задаче mindmap.
5. Добавить новые задачи из MS ToDo на карту Kanban просто: задачи без категорий отображаются на карте интеллекта как без категорий. Теперь я добавляю категорию карты разума к задаче без категорий и дважды запускаю синхронизацию: сначала для создания задачи в Outlook, которая добавляет к задаче цвет категории. Во-вторых, чтобы синхронизировать задачу Outlook с картой разума.Здесь задача имеет цвет фона категории.
Надеюсь, вы сможете следовать моему описанию. Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь обращаться ко мне.
Stefan
цветов · Bootstrap
Передайте смысл с помощью цвета с помощью нескольких вспомогательных классов цвета. Также включает поддержку стилизации ссылок с помощью состояний наведения.
Цвет
. Основной текст
.text-вторичный
.текст-успех
.text-dangerous
.text-warning
.text-info
. Текстовый свет
.темный текст
.text-body
. Без звука
. Текст-белый
.text-черный-50
.text-white-50
.text-primary
.text-secondary
.text-success
. текст-опасность
. текст-предупреждение
.text-info
.текстовый свет
.text-dark
.text-body
. текст без звука
.text-white
.text-black-50
.text-white-50
Классы контекстного текста также хорошо работают с привязками с предоставленными состояниями наведения и фокуса. Обратите внимание, что классы .text-white и .text-muted не имеют дополнительных стилей ссылок, кроме подчеркивания.
Цвет фона
Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса.Компоненты привязки будут темнеть при наведении курсора, как и классы текста. Фоновые утилиты не устанавливают цвет , поэтому в некоторых случаях вам может понадобиться использовать утилиты .text- * .
.bg-primary
.bg-вторичный
.bg-success
.bg-опасность
.bg-warning
.bg-info
.bg-светлый
.bg-темный
.bg-белый
.bg-прозрачный
.bg-primary
.bg-вторичный
.bg-success
.bg-dangerous
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
Фоновый градиент
Если для $ enable-gradient установлено значение true, вы сможете использовать служебные классы .bg-gradient- . По умолчанию $ enable-gradient отключено, а приведенный ниже пример намеренно нарушен. Это сделано для упрощения настройки с момента начала использования Bootstrap. Узнайте о наших опциях Sass, чтобы включить эти и другие классы.
.bg-gradient-primary
.bg-gradient-вторичный
.bg-gradient-success
.bg-gradient-dangerous
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
.bg-gradient-primary
.bg-gradient-вторичный
.bg-gradient-success
.bg-gradient-dangerous
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
Работа со спецификой
Иногда контекстные классы не могут быть применены из-за специфики другого селектора. В некоторых случаях достаточным обходным путем является обертывание содержимого вашего элемента в с классом. Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .
Наследование CSS: Введение - SitePoint
В реальной жизни часто можно увидеть наследование в действии.Если не учитывается какой-либо другой фактор, часто бывает, что у высоких родителей есть высокие дети и так далее. Мы можем увидеть нечто подобное в CSS.
Если вы установите для элемента контейнера зеленый цвет, тогда, если какое-либо правило не отменяет это значение цвета, цвет всех элементов внутри контейнера будет зеленым. Механизм, посредством которого значение определенных свойств передается от родительских элементов к дочерним элементам, называется наследованием.
В этой статье вы узнаете о различных аспектах наследования и о том, как оно влияет на внешний вид различных элементов.
Чем полезно наследование CSS?
Наследование CSS значительно сокращает время и усилия, необходимые для создания веб-сайта. Представьте, сколько CSS вам нужно будет написать, чтобы установить цвет для всех дочерних элементов тега body . Это займет много времени, будет подвержено ошибкам и будет сложно поддерживать. Точно так же вы можете представить себе, каким кошмаром было бы, если бы вы были вынуждены установить семейство шрифтов или размер шрифта для каждого дочернего элемента контейнера.
Посмотрите на следующую демонстрацию:
См. Пример наследования CSS Pen от SitePoint (@SitePoint) на CodePen.
Здесь я определил свойства font-family , font-size и line-height для элемента body , но все эти значения наследуются различными элементами, вложенными в тело body . Это обеспечивает единообразие макета без необходимости повторения одних и тех же свойств для нескольких элементов.
Унаследованы только некоторые объекты недвижимости
В реальной жизни не все атрибуты родителей передаются их детям.То же самое и в CSS; не каждое свойство CSS по умолчанию наследуется дочерними элементами. Фактически, если бы все свойства были унаследованы, эффект был бы аналогичен отсутствию наследования вообще, и вам пришлось бы написать много CSS, чтобы переопределить это поведение.
В качестве примера, если свойство border было наследуемым, установка границы для одного элемента приведет к тому, что такая же граница появится на всех его дочерних элементах. Точно так же, если бы дети унаследовали свойство background-image от своих родителей, результат был бы беспорядочным.Следующий пример CodePen демонстрирует, как такого рода вещи будут выглядеть с использованием значения ключевого слова CSS, которое я расскажу в следующем разделе:
Посмотрите, как будут работать границы, если они унаследованы по умолчанию от SitePoint (@SitePoint) на CodePen.
Принудительное наследование
Вообще говоря, вопрос о передаче собственности по наследству зависит от здравого смысла. Например, в дополнение к примерам, рассмотренным в предыдущем разделе, вы, вероятно, не хотите, чтобы все дочерние элементы элемента унаследовали значение заполнения своего родителя.Однако вы часто предпочитаете, чтобы цвет текста или шрифт, используемые для разных дочерних элементов контейнера, были одинаковыми.
В некоторых случаях конкретное свойство может не передаваться по наследству, но вы все равно можете захотеть, чтобы оно было унаследовано от родительского элемента. Этого можно достичь, установив для этого свойства значение , наследовать для дочернего элемента:
. .some-child {
цвет: наследовать;
}
Допустим, вы хотите, чтобы цвет всех элементов ссылок на вашем веб-сайте был таким же, как цвет, определенный для их родительского элемента.Есть несколько способов сделать это. Например, вы можете использовать разные классы для ссылок и элементов контейнера с разными цветами. Однако один из самых простых способов сделать это - использовать ключевое слово inherit .
Как только свойство цвета элементов ссылки установлено на наследовать , они начнут наследовать цвет своих родителей:
п {
цвет: # f44336;
}
ul {
цвет: # 3f51B5;
}
a {
цвет: наследовать;
}
Вот демонстрация:
См. Перо Использование ключевого слова `inherit` для принудительного наследования с помощью SitePoint (@SitePoint) на CodePen.
Наследование с использованием сокращенного кода CSS
Особенностью ключевого слова inherit является то, что когда вы применяете его к сокращенному свойству, оно будет применяться ко всем под-свойствам, даже к тем, которые вы не могли понять сначала, вынуждены наследовать. Кроме того, сокращенно вы не можете указать, что отдельное вложенное свойство будет наследовать значение.
В качестве примера вы можете ожидать, что следующий CSS применит сплошную границу шириной 1 пиксель, цвет которой унаследован от родительского элемента.Однако декларация фактически недействительна:
.example {
граница: 1px сплошное наследование;
}
Точно так же вы не можете использовать сокращенные свойства, чтобы установить поля или отступы для определенного значения с одной стороны и унаследованного значения с другой стороны. Это снова сделает декларацию недействительной:
.example {
маржа: 10px наследовать 20px 15px;
}
Одним из решений этой проблемы является установка свойства, которое вы хотите наследовать, на некоторое произвольное значение, а затем использование наследования с соответствующим полным свойством:
.пример {
маржа: 10px 0 20px 15px;
маржа-право: наследовать;
}
Отсутствующие сокращенные значения
При сокращении для любого недостающего под-свойства, значение которого не было указано явно, будет установлено его начальное (или по умолчанию) значение. Рассмотрим следующий CSS:
.container-a {
шрифт: курсив 1.2em / 1.75 Lato;
}
.container-a p {
шрифт: жирный 1em Lato;
}
Здесь текст абзаца не наследует значение font-style из своего контейнера.Значение стиля шрифта фактически будет сброшено до исходного значения нормального . Следовательно, в этом случае, если вы хотите, чтобы родительский шрифт был унаследован, но при этом убедитесь, что абзац остается жирным шрифтом , вам придется использовать свойство font-weight от longhand.
См. Наследование CSS Pen и сокращение от SitePoint (@SitePoint) на CodePen.
DevTools можно использовать для просмотра свойств, которые элемент наследует от своего родителя или от другого элемента вверх по дереву DOM.Как уже упоминалось, не все свойства родительского элемента наследуются. Также не все наследуемые свойства доходят до конца цепочки наследования, не будучи переопределенными другим правилом CSS где-то еще.
DevTools дает вам различные визуальные подсказки, чтобы легко различать все такие свойства, которые вы можете увидеть на снимке экрана ниже, взятом из CSS SitePoint:
Все свойства, которые не наследуются выбранным элементом, затенены.Свойства, которые были унаследованы, но были переопределены, отображаются перечеркнутым текстом.
Список унаследованных свойств CSS
Кажется, не существует единого окончательного источника, в котором перечислены все наследуемые свойства CSS, но ниже приведен список, который, вероятно, верен, основанный на нескольких источниках:
- граница-развал
- интервал границы
- сторона подписи
- цвет
- курсор
- направление
- пустых ячеек
- семейство шрифтов
- размер шрифта
- стиль шрифта
- вариант шрифта
- font-weight
- регулировка размера шрифта
- растяжка шрифта
- шрифт
- межбуквенный интервал
- высота строки
- изображение в стиле списка
- позиция в стиле списка
- тип списка
- в виде списка
- детей-сирот
- цитат
- размер табулятора
- выравнивание текста
- выравнивание текста последний
- цвет текстового оформления
- отступ текста
- с выравниванием по тексту
- тень текста
- преобразование текста
- видимость
- белое пространство
- вдов
- разрыв слова
- межсловный интервал
- перенос слов
Существует также ряд свойств CSS, связанных с речью, которые унаследованы и не включены в список выше.
Вот несколько источников списков унаследованного имущества:
Вы также можете просмотреть информацию об отдельном свойстве CSS в спецификации или в любом исчерпывающем справочнике CSS, и он обычно сообщает вам, унаследовано ли это свойство по умолчанию.
Заключение
Подводя итог тому, что я обсуждал: наследование позволяет избежать написания повторяющихся правил CSS для применения одного и того же набора свойств ко всем потомкам элемента. Это значительно упрощает процесс добавления стилей на веб-страницы и, следовательно, является отличной функцией CSS.
CSS также позволяет использовать ключевое слово inherit для принудительного наследования свойств, которые не наследуются по умолчанию. DevTools обеспечивает легкий доступ ко всем свойствам, которые элемент наследует от своих предков. Это может помочь вам быстро найти решения распространенных проблем, связанных с макетом.
Фон | Уловки, чтобы наследовать
Уловки, чтобы наследовать - это первый перевод романа Фермина де Рейгадаса «ASTUCIAS POR HEREDAR UN SOBRINO A UN TIO», названного «первой дорамой в Калифорнии» латиноамериканским историком театра Николасом Канеллосом.Написанная в Мехико сатирическая комедия о скупом дяде, его влюбленном племяннике и их коварных слугах была запрещена в 1790 году цензором вице-короля за социальную критику и резкие выражения.
Сценарий каким-то образом был перенесен на север, к Вилья-де-Бранчифорте, сообществу отставных испанских солдат, Лос-Волунтариос-де-Каталония и их семьям, которые поселились в районе, ныне известном как Восточный Санта-Крус. Говорят, что первое и единственное известное представление пьесы состоялось где-то между 1796 и 1802 годами.Рукопись перешла из рук владельца ранчо Франсиско Родригеса генералу Мариано Вальехо и историку Герберту Х. Бэнкрофту в 1875 году. Впоследствии она хранилась в коллекции Бэнкрофта в Калифорнийском университете в Беркли, где она оставалась нетронутой до тех пор, пока не была заново открыта, историзирована. и переведено доктором Педро Гарсиа-Каро (UO, романские языки и директор по латиноамериканским исследованиям). Аннотированный текст доктора Гарсиа-Каро был недавно опубликован Arte Público Press.
Casa de Branciforte
«» Действие происходит в Мадриде, «Уловки для наследства» можно охарактеризовать как испанскую комедию эпохи Просвещения.Его герои обязаны своим формированием commedia dell’arte , но пьеса более сложна, особенно потому, что в ней представлены волевые женщины, которые интеллектуально равны мужчинам на всех уровнях общества.
В центре пьесы - старый богатый дядя, Дон Лукас, скряга, который сколотил свое состояние как отсутствующий домовладелец, не член аристократии, а фигура (обычная фигура в испанской комедии, также известная как «большая шишка»). . ») Не имея прямых наследников, он окружен родственниками и слугами, которые все хотят, чтобы их имена были указаны в его завещании.Нет никого более отчаянного, чем его племянник, дон Педро, которому нужно наследство, чтобы ухаживать за Изабеллой и жениться на ней, которую он обожает. Коварный слуга дона Педро, Криспин клянется помочь своему хозяину с помощью умной горничной дона Лукаса, Люсии. Помимо денежной выгоды, Криспин и Люсия хотят получить признание за их интеллект. Люсия озлоблена тем, что хозяин не ценит ее годы верной службы, и справедливо обеспокоена тем, что, когда он умрет, если она не будет записана в завещание, она выйдет на улицу, чтобы постоять за себя.По ходу игры Криспин и Люсия вступают в сговор с помощью маскировки и подделки, чтобы обманом заставить Дона Лукаса написать завещание к своему удовлетворению. Конечно, в этой истории есть перипетии, которые ставят под угрозу планы и угрожают жизни интриганов, но в конце концов…
Действие спектакля происходит в Мадриде, столице страны, расположенной в центре Испании. Два других доминирующих места - это Галисия и Астурия, на крайнем севере и западе Пиренейского полуострова.
Как переопределить стили CSS
Оглавление¶
Иногда разработчикам приходится работать со старыми кодами, и именно тогда они сталкиваются с некоторыми серьезными проблемами, в частности с встроенным стилем, который нельзя изменить.
Чтобы предотвратить эту проблему, вы должны понимать две концепции - концепцию порядка и наследования.
Порядок каскадирования¶
Термин «каскадирование» означает иерархический порядок, в котором различные типы таблиц стилей взаимодействуют, когда два стиля вступают в конфликт. Конфликт возникает, когда к одному и тому же элементу применяются два разных стиля.
Для этих случаев существует порядок таблиц стилей в соответствии с их приоритетом (4 имеет наивысший приоритет):
- Настройки браузера по умолчанию.
- Внешние таблицы стилей (связанные или импортированные).
- Внутренние таблицы стилей (встроенные).
- Встроенные стили.
Итак, это означает, что когда возникает конфликт между двумя стилями, последний использованный стиль имеет приоритет. Чтобы сделать его более понятным, вы должны запомнить эти два правила:
- Вы должны размещать встроенные стили в документа HTML, а встроенные таблицы стилей должны быть помещены в документа HTML, чтобы встроенные стили стили всегда будут использоваться последними, и поэтому они будут иметь приоритет.
- Внутренние таблицы стилей имеют более высокий приоритет, чем внешние, поскольку в соответствии с браузером внешние таблицы стилей (связанные таблицы стилей) всегда располагаются перед внутренними таблицами стилей (встроенными таблицами), даже если вы размещаете их после.
Здесь вы можете найти примеры различных типов таблиц стилей. Наследование¶
HTML использует родительско-дочерние отношения. Дочерний элемент обычно наследует характеристики родительского элемента, если не указано иное.Например, посмотрите следующий код.
Пример использования элемента, наследующего стиль родительского элемента: ¶
<стиль>
тело {
цвет синий;
семейство шрифтов: arial;
}
Lorem Ipsum - это просто фиктивный текст в полиграфической и наборной индустрии.
Попробуйте сами » Поскольку тег
, который является нашим дочерним элементом, находится внутри тега
, который является родительским элементом, он примет все стили, данные тегу, даже если ему не были присвоены собственные стили.Но если вы хотите, чтобы абзац взял на себя одни правила тела, но не другие, вы можете переопределить правила, которые вам не нужны. Вот вам пример. Пример переопределения стиля тега
: ¶
<стиль>
тело {
цвет синий;
семейство шрифтов: arial;
}
п {
красный цвет;
font-weight: жирный;
}
Lorem Ipsum - это просто фиктивный текст в полиграфической и наборной индустрии.
Попробуйте сами » Internal Priorities¶
Теперь давайте посмотрим на список внутренних приоритетов (1 имеет наивысший приоритет):
- ID
- Class
- Element
Вы можете найти подробную информацию информация об идентификаторе и классе CSS здесь. Чтобы лучше понять, запомните следующую структуру:
Это означает, что если у вас есть элемент с селектором класса и идентификатора с разными стилями, то стиль идентификатора имеет приоритет.В качестве примера рассмотрим этот код.
Пример переопределения стиля CSS с помощью селектора идентификатора: ¶
<стиль>
#testid {
цвет синий;
font-weight: жирный;
}
.пример {
красный цвет;
шрифт: нормальный;
}
Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии.Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов.
Попробуйте сами » Как мы видим, класс был помещен после идентификатора, но идентификатор по-прежнему имеет приоритет. Это применимо только в том случае, если и идентификатор, и класс используются в одном элементе.
Теперь давайте посмотрим на пример, в котором идентификатор и класс используются в двух разных элементах.
Пример переопределения стиля CSS с помощью селектора класса: ¶
<стиль>
#testid {
цвет: # 777777;
стиль шрифта: нормальный;
цвет фона: светло-зеленый;
}
.пример {
дисплей: блок;
цвет: белый дымный;
стиль шрифта: курсив;
цвет фона: светло-голубой;
отступ: 20 пикселей;
}
Lorem Ipsum - это просто фиктивный текст в полиграфической и наборной индустрии.
Попробуйте сами » Здесь селектор класса перекрыл селектор ID, потому что он использовался последним.Селектор идентификатора имеет приоритет над селектором класса только в том случае, если они оба используются в одном элементе.
Давайте теперь посмотрим, как мы можем заставить один класс перекрывать другой. Если этот класс имеет синий цвет фона, и вы хотите, чтобы ваш
имел красный фон, попробуйте изменить цвет с синего на красный в самом классе. Вы также можете создать новый класс CSS, который определил свойство background-color со значением red, и позволить вашему ссылаться на этот класс. Пример того, как один стиль перекрывает другой: ¶
<стиль>
.bg-blue {
цвет фона: синий;
}
.bg-red {
цвет фона: красный;
}
Lorem Ipsum - это просто фиктивный текст в полиграфической и наборной индустрии.
Попробуйте сами »! Important¶
Объявление ! Important - отличный способ переопределить нужные стили.Когда важное правило используется в объявлении стиля, это объявление будет иметь приоритет над любыми другими объявлениями. Когда два конфликтующих объявления с правилами! Important применяются к одному и тому же элементу, будет применяться объявление с большей специфичностью.
Давайте посмотрим, как можно использовать объявление! Important для переопределения встроенных стилей. Вы можете установить отдельные стили в своем глобальном файле CSS, поскольку! Important переопределяет встроенные стили, установленные непосредственно для элементов.
Пример переопределения стиля CSS с помощью правила! Important: ¶
<стиль>
.box [style * = "color: red"] {
цвет: белый! важно;
}
.коробка {
цвет фона: синий;
отступ: 15 пикселей 25 пикселей;
маржа: 10 пикселей;
}
Lorem Ipsum - это просто фиктивный текст в полиграфической и наборной индустрии.
Попробуйте сами » Однако вам следует избегать использования! important, поскольку он затрудняет отладку из-за нарушения естественного каскадирования в таблицах стилей.
Вместо использования! Important можно попробовать следующее:
- Лучше использовать каскад CSS.
- Используйте более конкретные правила. Указав один или несколько элементов перед выбранным элементом, правило становится более конкретным и получает более высокий приоритет.
- В качестве особого случая для (2), продублируйте простые селекторы для увеличения специфичности, когда вам больше нечего указывать.
Если вы хотите получить дополнительную информацию о декларации! Important, просто нажмите здесь. Оставить комментарий