background-color — CSS | MDN
CSS-свойство background-color CSS устанавливает цвет фона элемента.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
background-color: red;
background-color: #bbff00;
background-color: #11ffee00;
background-color: #11ffeeff;
background-color: rgb(255, 255, 128);
background-color: rgba(117, 190, 218, 0.0);
background-color: rgba(117, 190, 218, 0.5);
background-color: rgba(117, 190, 218, 1.0);
background-color: hsla(50, 33%, 25%, 0.75);
background-color: currentColor;
background-color: transparent;
background-color: inherit;
background-color: initial;
background-color: unset;
background-color определяется единственным значением <color>.Значения
<color>- Является CSS
<color>, которое описывает цвет фона. Даже если заданы одно или несколькоbackground-image, цвет может отрендерится, если изображения прозрачны.
Формальный синтаксис
<color>где
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>где
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )где
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
HTML
<div>
Lorem ipsum dolor sit amet, consectetuer
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer
</div>CSS
.exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); } .examplethree { background-color: #777799; color: #FFFFFF; }
exampleone {
background-color: teal;
color: white;
}
.exampletwo {
background-color: rgb(153, 102, 153);
color: rgb(255, 255, 204);
}
.examplethree {
background-color: #777799;
color: #FFFFFF;
}
Результат
Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
BCD tables only load in the browser
Таблица совместимости на этой странице сгенерирована на основе структурированных данных. Если вы хотите внести изменения в данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте нам Pull Request.
основные проблемы использования начальных значений в коде
От автора: в CSS каждое свойство имеет то, что называется начальным значением. Иногда это называется значением по умолчанию, но спецификация использует термин CSS initial, который, я думаю, немного лучше.
Технически, начальное значение любого заданного свойства должно быть объявлено, только если это значение переопределяет ранее определенное значение, которое не является начальным значением. Но начальные значения часто присутствуют, даже если они не нужны.
Например, предположим, у меня есть элемент уровня блока, который я хочу разместить на полную ширины его родителя. Я хочу, чтобы он размещался на собственной «линии», так сказать, в макете, поэтому добавляю следующий CSS:
.element { float: none; width: auto; }
. float: none; width: auto; } |
element {Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Круто, правда? Он не будет гибким (таким образом, он перейдет на следующую строку, вместо того, чтобы размещаться горизонтально против других элементов). Кроме того, он не ограничено значением ширины, поэтому ширина автоматически рассчитывается на основе ширины родительского элемента.
Если вы опытный разработчик CSS или даже новичок, вы можете сразу увидеть, что не так с кодом выше. Он не нужен. Это не ошибочный код; это просто необязательно для элемента уровня блока. Каждому элементу уровня блока, не имеющему установленного значения float, автоматически присваивается значение float: none, потому что ни одно из них не является начальным значением для свойства float. То же самое верно для width: auto, поэтому ни одна из этих строк не нужна.
Иногда начальные значения необходимы
Но что, если вы столкнетесь с CSS, наподобие указанного выше, в своем коде или в коде, который вы унаследовали. Здесь может иметь место один из следующих случаев:
В рассматриваемом CSS переопределяется нечто раннее указанное в таблице стилей (например, стили для вывода на экран переопределяются для печати)
Это конкретное имя класса добавляется в документ через JavaScript, который также переопределяет что-то в другом месте (это также может быть элемент HTML, добавленный с этим именем класса)
Автор кода явно указывает, что происходит в коде (либо намеренно, либо в неведении)
Возможен и другой сценарий, о котором я не подумал, но это более или менее охватывает большинство, если не все, возможности. Ниже приведен пример первого сценария:
@media print { .column, aside { float: none; } }
@media print { .column, aside { float: none; } } |
Из-за того, что эти определения находятся внутри медиа-запроса, можно легко определить их цель (таким образом, вы не заключите, что это лишний код и его нужно удалить).
Следующий случай немного сложнее:
h3 { background-color: #444; color: white; padding: 7px; } /* …здесь сотни строк кода… */ aside h3 { background: none; color: #444; }
h3 { background-color: #444; color: white; padding: 7px; }
/* …здесь сотни строк кода… */
aside h3 { background: none; color: #444; } |
Здесь для background задано none, чтобы переопределить цвет фона, ранее установленный для того же элемента. Эти правила стилей не обязательно располагаться одно за другим, чтобы вы могли понять, что происходит. При сканировании CSS вы можете просто увидеть объявление background: none и задаться вопросом, необходимо ли это, поскольку элементы h3 не имеют фона по умолчанию.
(Я должен отметить здесь, что ни одно из этих определений не является начальным значением для свойства background. background — это сокращенное свойство, поэтому оно не имеет ни одного начального значения. Однако none — это начальное значение для свойства background-image. И, как вы, возможно, знаете, обычно, когда вы пишете одно или часть значений в сокращенном объявлении, все остальные сокращенные значения возвращаются к начальным значениям. В приведенном выше случае для свойства background-color будет установлено transparent, поэтому результат будет ожидаемым.)
Использование инструментов для разработчиков браузера для поиска переопределений начальных значений
Если вы работаете с CSS, просматривая текущую страницу, стили которой определяет этот CSS, то нетрудно понять, что происходит, если вы столкнетесь со свойством CSS, для которого явно объявлено начальное значение.
Вот что вы могли бы увидеть в инструментах для разработчиков Chrome, если бы у вас был пример aside h3 из предыдущего раздела:
С помощью инструментов для разработчиков четко видно, что background: none не является необязательным.
Все инструменты для разработчика разных браузеров покажут то же самое, и это то, что делает эти инструменты полезными при отслеживании проблем CSS.
Будьте явными в CSS
Вы заметили, что я указал третий вариант того, почему вы можете найти начальные значения, объявленные в таблицах стилей: автор кода явно говорит о том, что происходит в коде (либо намеренно, либо в неведении).
Я не на сто процентов соглашаюсь с добавлением начальных значений по этой причине, но я также не утверждаю, что это плохой код. Прекрасным примером этого является CSS для относительно новых технологий, которые можно скопировать и вставить из онлайн-руководств, или те, которые относительно незнакомы человеку, написавшему код.
Например, при чтении руководств по новым функциям CSS, таким как flexbox, вы можете увидеть код, который выглядит так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.container { display: flex; flex-wrap: nowrap; flex-direction: row; order: 0; border: solid 1px #444; } .container div { justify-content: flex-start; align-content: stretch; align-items: flex-start; padding: 10px; }
.container { display: flex; flex-wrap: nowrap; flex-direction: row; order: 0; border: solid 1px #444; }
.container div { justify-content: flex-start; align-content: stretch; align-items: flex-start; padding: 10px; } |
В приведенном выше примере я немного все преувеличил, но некоторые онлайн-примеры кода сходны с этим. Если вы новичок в вопросах, связанных с flexbox, то, вероятно, вы не видите проблем в этом коде. Но угадайте, что? Следующий код эквивалентен приведенному выше (предполагая, что к этим элементам не применяется другой CSS):
.
container {
display: flex;
border: solid 1px #444;;
}
.container div {
padding: 10px;
}
.container { display: flex; border: solid 1px #444;; }
.container div { padding: 10px; } |
Шесть из семи свойств, связанных с flexbox, которые я включил в предыдущий пример, были удалены, потому что для всех них были установлены начальные значения, поэтому эти строки были излишними.
В этом случае я не возражаю против включения этих дополнительных строк, потому что это может быть наглядным, чтобы увидеть некоторые доступные потенциальные свойства flexbox вместе с несколькими значениями. Таким образом, это тот случай, когда код позволяет лучше его сканировать. В конце концов, хотя в урезанной версии ясно, что элемент .container является гибким контейнером, сразу может быть и не ясно, что вложенные элементы div с отступом 10px являются гибкими элементами.
Указание начальных значений в комментариях
Если мы возьмем более реалистичный пример, в котором используются некоторые пояснения с начальными значениями, я думаю, что нам может быть полезно следующее:
.container { display: flex; flex-wrap: nowrap; /* начальное значение */ border: solid 1px #444; } .container div { align-content: stretch; /* начальное значение */ align-items: flex-start; /* начальное значение */ padding: 10px; }
.container { display: flex; flex-wrap: nowrap; /* начальное значение */ border: solid 1px #444; }
.container div { align-content: stretch; /* начальное значение */ align-items: flex-start; /* начальное значение */ padding: 10px; } |
В приведенном выше примере есть только три лишние строки (более реалистично, чем шесть), и каждая из них прокомментирована, чтобы указать, что автор кода знает об этом, но предпочитает, чтобы строки оставались.
И, конечно же, это можно сделать для любого свойства CSS, для которого установлено его начальное значение, включая CSS, который переопределяет предыдущий CSS. Вот еще один пример h3:
h3 { background-color: #444; color: white; padding: 7px; } /* …здесь сотни строк кода… */ aside h3 { background: none; /* переопределяем снова на начальное значение */ color: #444; }
h3 { background-color: #444; color: white; padding: 7px; }
/* …здесь сотни строк кода… */
aside h3 { background: none; /* переопределяем снова на начальное значение */ color: #444; } |
И я полагаю, что в некоторых случаях было бы еще лучше на писать следующее:
aside h3 { background-color: initial; /* переопределяем */ color: #444; }
aside h3 { background-color: initial; /* переопределяем */ color: #444; } |
Здесь я использую довольно хорошо поддерживаемое значение ключевого слова CSS initial, которое является одной из универсальных функций языка. В этом случае, даже без комментария, четко понятно, что это переопределение, но добавление комментария делает код еще более понятным.
Заключение
Я не настаиваю на том, что лишние начальные значения являются огромной проблемой в CSS. Пара дополнительных строк не сломает базу кода и не вызовет серьезные проблемы с производительностью.
Я считаю, что основная проблема связана с начальными значениями, для которых не ясно, являются ли они переопределениями или тем, что было включено (или скопировано) из образовательных соображений при использовании функций CSS, которые являются новыми для автора кода.
Поэтому мои рекомендации для объявления начальных значений таковы:
Потратьте время на то, чтобы понять, какие значения являются начальными и как они работают (в том числе в сокращениях).
Добавьте комментарий, чтобы указать, является ли начальное значение переопределением. Несмотря на то, что инструменты для разработчиков помогут понять это, не помешает указать это в комментариях.
Позаботьтесь о том, чтобы вы не включали лишние строки в новые функции, такие как flexbox (или используйте комментарии).
Автор: Louis Lazaris
Источник: //www.impressivewebs.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотретьimage — свойство css :: руководство cssdot.ru
Свойство background-image позволяет установить одно или несколько фоновых изображений для элемента, которые будут отображаться в границах области, охватываемой внешним краем рамок элемента, и заполненной фоновым цветом, если он задан с помощью свойства — (background-color).
Если в качестве фона используются несколько изображений, то более «близким» к пользователю считает первый слой, потом второй, и так далее — до конца списка, а слой залитый фоновым цветом лежит позади всех фоновых изображений. Поэтому рекомендуется, задавать фоновые изображения в паре с цветом фона, чтобы в случае, когда по каким-либо причинам изображения не отобразились, или не успели загрузиться — содержание элемента не сливалось с подложкой.
Кроме того, по соображениям совместимости и обеспечения общедоступности информации для пользователей с ограниченными возможностями, не следую использовать фоновые изображения в качестве единственного метода представления важных данных, потому что изображения отсутствуют в не графических средствах воспроизведения, и, к тому же, они могут быть отключены в высоко-контрастных режимах отображения. Более подробно с рекомендациями на данную тему можно ознакомится в спецификации Web Content Accessibility Guidelines (WCAG) 2.
0.
В качестве изображения возможно использовать следующие значения:
- [:inherit:]
- значение свойства наследуется от родительского элемента
- [:none:]
- изображение отсутствует, отображается как пустой прозрачный слой
- [:image:]
- значение, типа «изображение», которое может быть задано как:
- ссылка на графический файл —
url(относительный или абсолютный путь к изображению) - встроенное изображение —
url(data:[тип][;charset=[кодировка]][;base64],данные) - градиент —
linear-gradient(),radial-gradient()и т.д. - функция
image() - функция
element() - функция
image-rect()
- ссылка на графический файл —
Практически все современные браузеры поддерживают значения — inherit, none, url(), а так же функции для градиентов, но с префиксами -moz, -webkit, -o. Функция image() хотя и описана в последней версии спецификации …, но на данный момент не поддерживается ни одним из браузеров. Функция element() определена в следующий версии спецификации CSS 4, и с префиксом реализована только в браузере Firefox. Функция image-rect() не содержится в спецификациях и поддерживается только браузером Firefox.
Если в списке изображений, встречается такое, которое не может быть отображено (не поддерживаемый графический формат), загружено (нет доступа к сетевому ресурсу), либо оно пустое, то оно все равно считается за отдельный пустой слой, аналогично ключевому слову ‘none’.
Свойство background-image относится к спецификации CSS, применяется к всем элементам, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение none.
На данный момент свойство поддерживается во всех основных браузерах.
Смотри также:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <link href=»css/dropdown-menu.css» media=»screen» rel=»stylesheet» type=»text/css» /> </head> <body> <br /> <ul> |
#navigation { padding-right: 22px; |
3.1</a></li>
./images/separator.gif) no-repeat right center;
./images/dropdown-list-bg.gif) repeat-x left top;Объяснение ключевых слов initial, inherit, unset и revert в CSS — Веб-стандарты
В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial, inherit и об относительно новых — unset и revert.
В оригинальной статье в заголовке и во вступлении говорится только о трёх ключевых словах, но дальше в тексте идёт обсуждение четвёртого — revert. Мы решили добавить его во вступление для удобства читателя — прим. переводчика.)
Хотя большинство веб-разработчиков сталкивалось с ними, весьма вероятно, что многие, даже самые опытные, не до конца их понимают.
Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? Какие именно различия между ними? Я решил глубже изучить эти ключевые слова, чтобы раз и навсегда разобраться, что отличает их друг от друга.
Базовые стили для вебаСкопировать ссылку
Прежде чем мы начнем разбираться с ключевыми словами, важно понять, откуда берутся базовые стили в браузере.
Начальное значение для каждого свойства в CSSСкопировать ссылку
Каждое свойство в CSS имеет начальное (initial) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.
Пример начального значения из MDN:
Начальное значение свойстваline-height — это normal.Браузерные стилиСкопировать ссылку
После применения начальных стилей для всех CSS-свойств браузер загружает свои стили. Эти стили не имеют ничего общего с базовыми начальными значениями CSS-свойств.
Пример браузерных стилей:
Стили браузера Chrome, применяемые к элементу<h2>.У HTML-элементов нет начальных значений для стилей! Базовые стили HTML-элемента, такого как <h2>, например, предоставляются стилями браузера, а не начальными значениями CSS-свойств.
Теперь начнем говорить о ключевых словах.
Ключевое слово
inheritСкопировать ссылкуКлючевое слово inherit сообщает браузеру, что значение свойства нужно найти у ближайшего родительского элемента и унаследовать его для текущего элемента. Если у ближайшего родителя также задано значение inherit, то браузер продолжит подниматься по DOM, пока не найдет какое-нибудь значение. Если значения нет, то браузер применит свои стили, а если и браузерных стилей нет, то тогда будет применено значение initial.
Ключевое слово
initialСкопировать ссылкуЧтобы понять ключевое слово initial, мы должны помнить важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Мы часто думаем, что они автоматически приходят вместе с HTML, но это не так.
Ключевое слово initial говорит браузеру использовать значение по умолчанию для заданного CSS-свойства.
Например, для свойства color значение initial всегда будет black.
Такое поведение может очень запутывать, потому что, как мы и говорили ранее, значение по умолчанию для CSS-свойства не всегда совпадает со значением, которое браузер задает конкретному элементу. Например, initial-значение для свойства display равно inline для всех элементов. Поэтому, если для элемента <div> будет задано свойство display со значением initial, то свойство будет вычислено как inline, а не block, как в стилях браузера.
Пример:
div.box {
background-color: red;
display: initial; /* примет значение `inline`, а не `block` */
}
Пример на CodePen значения initial для свойства display элемента <div>.
initial-значении свойства display на MDN.Ключевое слово
unsetСкопировать ссылкуКлючевое слово unset является уникальным и работает в зависимости от типа свойства. В CSS есть два типа свойств:
1. Наследуемые свойстваСкопировать ссылку
Свойства, которые затрагивают дочерние элементы. Все свойства, которые влияют на текст, имеют такое естественное поведение. Например, если мы зададим font-size элементу <html>, то он будет применяться ко всем дочерним элементам, пока вы не зададите другой font-size какому-нибудь из них.
2. Ненаследуемые свойстваСкопировать ссылку
Все остальные свойства, которые влияют только на элемент, для которого они заданы. Это все свойства, которые не относятся к оформлению текста. Например, если вы зададите border на родительском элементе, то он не будет задан на дочернем.
Информация о наследуемости свойстваborder на MDN.
Ключевое слово unset работает так же, как и inherit для наследуемых свойств. Например, для текстового свойства color оно будет работать как значение inherit, то есть будет искать ближайший родительский элемент с заданием нужного свойства, а если он не будет найден, то применится браузерное значение, а если и браузерных стилей нет, то применится значение initial.
Для ненаследуемых свойств unset ведет себя как initial, то есть применится значение по умолчанию. Например, для свойства border-color оно будет работать как initial.
.some-class {
color: unset; /* будет равно `inherit` */
display: unset; /* будет равно `initial` */
}
Зачем использовать
unset, если оно работает так же, как inherit и initial?Скопировать ссылкуЕсли unset ведет себя как inherit и initial, то зачем оно может понадобиться? Если мы сбрасываем только одно свойство, то unset не нужен. Вместо него мы можем просто использовать inherit или initial. Но сейчас у нас есть свойство all, которое дает нам новую возможность — сбросить наследуемые и ненаследуемые свойства одновременно.
Таким образом, вам не нужно сбрасывать свойства по отдельности. Применение ключевого слова unset к свойству all приведет к сбросу всех наследуемых свойств к значению inherit и всех ненаследуемых свойств — к значению initial.
Это единственная причина существования нового ключевого слова unset! В противном случае мы могли бы вместо этого использовать inherit и initial.
Вместо сброса свойств по отдельности, к примеру:
/* Плохо */
.common-content {
font-size: inherit;
font-weight: inherit;
border-width: initial;
background-color: initial;
}
Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:
/* Хорошо */
. common-content {
all: unset;
}
common-content {
all: unset;
}
Я создал небольшой пример для демонстрации того, как свойства ведут себя, когда используется свойство all со значением unset. Некоторые ведут себя так, как будто к ним применено значение inherit, а некоторые так, как будто к ним применено значение initial. Пример на Codepen использования all: unset.
Ключевое слово
revertСкопировать ссылкуНо что, если мы хотим сбросить значение свойства до первоначально заданных браузером значений, а не до значений по умолчанию? Например, вернуть значение свойства display элемента <div> к значению block (это стили браузера), а не к значению inline (это базовые стили CSS).
Для этих целей мы скоро получим новое ключевое слово в CSS: revert. Оно очень похоже на unset, единственное отличие состоит в том, что оно предпочитает стили браузера базовым значениям свойств CSS. Например:
div {
display: revert; /* = block */
}
h2 {
font-weight: revert; /* = bold */
font-size: revert; /* = 2em */
}
Таким образом, если мы хотим сбросить все стили HTML-элемента до базовых стилей браузера, мы можем сделать это так:
/* Хорошо */
.common-content {
all: revert;
}
Соответственно, revert дает гораздо больше возможностей, чем unset. Правда, на данный момент revert работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)
ЗаключениеСкопировать ссылку
На этом всё. Надеюсь, вам понравилась эта статья, и вы чему-то научились из моего опыта.
Видео доклада по темеСкопировать ссылку
Я сделал короткий доклад на эту тему, смотрите видео целиком на YouTube:
Мой доклад «Ключевые слова в CSS, которые никто не понимает».
фон — CSS: каскадные таблицы стилей
Сокращенное свойство CSS background устанавливает сразу все свойства стиля фона, такие как цвет, изображение, начало и размер или метод повтора.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Это свойство является сокращением для следующих свойств CSS:
фон: зеленый;
фон: url ("test.jpg ") repeat-y;
фон: рамка красная;
фон: без повтора центр / 80% url ("../ img / image.png");
Свойство фон определяется как один или несколько фоновых слоев, разделенных запятыми.
Синтаксис каждого уровня следующий:
ЗначенияБраузеры не предоставляют никакой специальной информации о фоновых изображениях вспомогательным технологиям. Это важно в первую очередь для программ чтения с экрана, поскольку программа чтения с экрана не сообщает о своем присутствии и, следовательно, ничего не сообщает своим пользователям.Если изображение содержит информацию, важную для понимания общего назначения страницы, лучше описать ее семантически в документе.
| Начальное значение | как каждое из свойств сокращения: |
|---|---|
| Применяется к | всем элементам. Это также относится к :: первая буква и :: первая строка . |
| Унаследовано | нет |
| Проценты | как каждое из свойств сокращения:
|
| Вычисленное значение | как каждое из свойств сокращения: |
| Тип анимации | как каждое из свойств сокращения: |
[,] * , где
= || [/ ]? || <стиль повторения> || <приложение> || ||
= <'background-color'> || || [/ ]? || <стиль повторения> || <приложение> || || , где
= none |
= [[слева | центр | право | наверх | внизу | <длина-процент>] | [слева | центр | право | <длина-процент>] [наверх | центр | внизу | <длина-процент>] | [центр | [слева | справа] <длина-процент>? ] && [центр | [наверх | внизу] <длина-процент>? ]]
= [ | авто] {1,2} | крышка | содержат
= repeat-x | повторять-у | [повторить | пространство | круглый | без повтора] {1,2}
= scroll | фиксированный | local
= border-box | обивка | content-box , где
= | <изображение ()> | <набор изображений ()> | | <краска ()> | <плавное затухание ()> | <градиент>
<длина-процент> = <длина> | <процент>где
= image ( ? [ ?, ?]!)
= image-set ( #)
= element ( )
= paint ( , ?)
<переходное затухание ()> = плавное затухание (, ?)
<градиент> =| <повторяющийся линейный градиент ()> | <радиальный градиент ()> | <повторяющийся радиальный градиент ()> | , где
= ltr | rtl
= | <строка>
<цвет> =| | | | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <устаревший-системный-цвет>
= [ | ]
=
= <процент>? && <изображение>
= <изображение> |
= linear-gradient ([ | to ]?, )
= повторяющийся-линейный-градиент ([<угол> | до <стороны-или-угла>]?, <список-остановок-цветов>)
<радиальный-градиент ()> = радиальный-градиент ([<конечная-форма> ||]? [at ]?, )
= повторяющийся-радиальный-градиент ([ || <размер >]? [at ]?, )
= conic-gradient ([from ]? [at ] ?, ) где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?)
= hsl ( [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)
<сторона-или-угол> = [слева | справа] || [наверх | внизу]
<список-остановок-цветов> = [<остановка-цветов> [, <подсказка-цветов>]? ] #,
= круг | эллипс
<размер> = ближайшая сторона | дальняя сторона | ближайший угол | дальний угол | <длина> | <длина-процент> {2}
<позиция> = [[слева | центр | справа] || [наверх | центр | внизу] | [слева | центр | право | <длина-процент>] [наверх | центр | внизу | <длина- процент>]? | [[слева | справа] <длина-процент>] && [[вверх | снизу] <длина-процент>]]
<угловой-список-остановок> = [<угловой-цвет-стоп> [, <угловой-цвет-подсказка>]? ] #, <прямоугольный-цветной-стопор>, где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> | <угол>
= ?
=
= && ?
= , где
= {1,2}
= {1,2}
<угол-процент> = <угол> | <процент>
Установка фона с цветными ключевыми словами и изображениями
HTML
Звездное небо
Мерцание, мерцание
Звездное небо
Вот абзац
CSS
. предупреждение {
фон: розовый;
}
.topbanner {
фон: url ("https://mdn.mozillademos.org/files/11983/starsolid.gif") # 99f repeat-y исправлено;
}
предупреждение {
фон: розовый;
}
.topbanner {
фон: url ("https://mdn.mozillademos.org/files/11983/starsolid.gif") # 99f repeat-y исправлено;
}
Результат
Таблицы BCD загружаются только в браузере
| Синтаксис |
(ИЛИ) селектор {фон: значение ;} Значение
| Ключевые слова |
|
|---|
Цвет фона iframe для встраиваемых материалов — Справочный центр Vimeo
* Примечание . Обсуждаемая здесь прозрачность относится конкретно к iframe (содержащему его веб-элементу), а не к прозрачности любых загружаемых вами видео. В настоящее время Vimeo не поддерживает альфа-канал.
Прозрачный фон
По умолчанию фон iframe проигрывателя на Vimeo прозрачный.Все элементы проигрывателя (панель воспроизведения, кнопки и т. Д.) Прикрепляются к видеоизображению, а не к фактическому размеру iframe.
Чтобы избежать пустого места при встраивании, мы рекомендуем выбрать размер проигрывателя, который соответствует исходному соотношению сторон вашего видео.
Например, если исходное видео имеет соотношение сторон 16: 9, вам нужно встроить видео с размерами, которые дают соотношение сторон 16: 9, например 800 x 450.
Важно: На размеры встроенного проигрывателя также может влиять стиль CSS, установленный вашей веб-страницей.Для видео, встроенных в адаптивный дизайн, убедитесь, что высота и ширина отрегулированы для сохранения исходного соотношения сторон вашего видео.
Отключение прозрачного фона
Если ваш плеер отображается не так, как вы изначально планировали, вы можете отключить прозрачный фон. Чтобы отключить прозрачный фон, добавьте ? Transparent = 0 в конец URL-адреса проигрывателя в коде для встраивания. Этот параметр установит черный фон iframe и закрепит элементы проигрывателя в iframe вместо видеоизображения.
Пример кода для вставки:
'
Применение настраиваемого цвета фона iframe
Вместо прозрачности или черных полос вы можете выбрать точный цвет, которым будет заполняться ваш iframe. Имейте в виду, что вам нужно посетить настройки проигрывателя видео, чтобы настроить цвет текста и полосу воспроизведения в проигрывателе.
Чтобы применить определенный цвет фона, вам необходимо добавить следующее свойство встроенного стиля в код внедрения iframe:
style = "background-color: #FFFFFF"
FFFFFF — это шестнадцатеричное значение цвета для белого, но вы можете выполнить поиск нужного цвета в базе данных шестнадцатеричных кодов здесь — http://www.color-hex.com/
Пример кода для вставки:
Важно: Невозможно изменить цвет кадра, который появляется во время загрузки видео.
Это не должно быть заметно для большинства зрителей, но может повлиять на зрителей с более медленным подключением к Интернету.
Знание начальных значений в вашем CSS
В CSS каждое свойство имеет так называемое начальное значение . Иногда это называется значением по умолчанию, но в спецификации используется термин начальный, который, на мой взгляд, немного лучше.
С технической точки зрения, начальное значение любого данного свойства должно быть объявлено только в том случае, если это значение переопределяет ранее определенное значение, которое не является начальным значением.Но начальные значения часто присутствуют, даже когда они не нужны.
Например, предположим, что у меня есть элемент уровня блока, который я хочу занять всю ширину своего родителя. Я хочу, чтобы он располагался на отдельной «строке», так сказать, в макете, поэтому я добавляю следующий CSS:
.element {
float: нет;
ширина: авто;
}
Круто, правда? Он не будет плавать (таким образом, он перейдет к следующей строке, а не столкнется горизонтально с другими элементами).Кроме того, он не ограничен значением ширины, поэтому ширина автоматически рассчитывается на основе ширины родительского элемента.
Если вы опытный разработчик CSS или даже новичок в CSS, вы, вероятно, сразу поймете, что не так с приведенным выше кодом. Лишнее . Это не ошибочный код; это просто не обязательно для элемента уровня блока. Для каждого элемента уровня блока, для которого не задано значение с плавающей запятой , автоматически устанавливается значение с плавающей запятой: нет , потому что нет является начальным значением для свойства с плавающей запятой .То же самое верно для ширины : auto , поэтому ни одна из этих строк не нужна.
Иногда необходимы начальные значения
Но что, если вы встретите CSS, подобный приведенному выше, в своем коде или в коде, который вы унаследовали.
Здесь может происходить одно из нескольких:
- Рассматриваемый CSS переопределяет что-то ранее в таблице стилей (например, экран переопределения стилей печати)
- Это конкретное имя класса добавляется в документ через JavaScript, который аналогичным образом переопределяет что-то в другом месте (это также может быть элемент HTML, добавленный с примененным этим именем класса).
- Автор кода действительно открыто говорит о том, что происходит в коде (намеренно или по незнанию).
Здесь может работать другой сценарий, о котором я не думал, но который более или менее охватывает большинство, если не все, возможности.
Ниже приведен пример первого сценария, который я перечислил выше:
@media print {
.column, aside {
float: нет;
}
}
Поскольку он находится внутри медиа-запроса, его довольно легко определить в отношении его назначения (таким образом, вы не заподозрите, что он лишний и удалите его), тогда как следующее будет немного сложнее:
h3 {
цвет фона: # 444;
цвет белый;
отступ: 7 пикселей;
}
/ * ... здесь сотни строк кода... * /
aside h3 {
фон: нет;
цвет: # 444;
}
Здесь фон установлен на нет , чтобы переопределить цвет фона, ранее установленный для того же элемента. Эти правила стиля не обязательно будут появляться одно за другим, чтобы вы могли понять, что происходит. При сканировании CSS вы можете просто увидеть объявление background: none и задаться вопросом, нужно ли это, поскольку элементы по умолчанию не имеют фона.
(здесь я должен отметить, что none не является начальным значением для свойства background . background является сокращением, поэтому у него нет единственного начального значения. Однако none является начальным значением для фона - image . И, как вы, возможно, знаете, обычно, когда вы записываете одно или несколько значений в сокращенном объявлении, все другие сокращенные значения возвращаются в исходное состояние.
В приведенном выше случае свойство background-color будет иметь вид установите , прозрачный , так что результат желаемый.)
Если вы работаете в своем CSS при просмотре действующей страницы, с которой имеет дело рассматриваемый CSS, тогда нетрудно увидеть, что происходит, если вы натолкнетесь на значение CSS, явно объявленное в его начальном состоянии.
Вот что вы бы увидели в DevTools Chrome, если бы у вас был пример помимо h3 из предыдущего раздела:
DevTools совершенно ясно показывают, что значение background: none не является лишним.Все инструменты разработчика браузера будут делать то же самое, и именно поэтому эти инструменты так полезны при отслеживании проблем с CSS.
Явное выражение в вашем CSS
Вы заметите, что я дал третий вариант того, почему вы можете найти начальные значения, объявленные в таблицах стилей: Автор кода действительно ясно говорит о том, что происходит в коде (намеренно или по незнанию) .
По этой причине я не обязательно согласен с добавлением начальных значений, но также не могу сказать, что это плохой код.Прекрасным примером этого является CSS для относительно новых технологий, которые можно скопировать и вставить из онлайн-руководств или которые относительно незнакомы человеку, пишущему код.
Например, при чтении руководств по новым функциям CSS, таким как flexbox, вы можете увидеть код, который выглядит следующим образом:
.container {
дисплей: гибкий;
Flex-wrap: nowrap;
flex-direction: ряд;
justify-content: гибкий старт;
выровнять контент: растянуть;
выровнять элементы: гибкий старт;
граница: сплошная 1px # 444;
}
.container div {
отступ: 10 пикселей;
заказ: 0;
flex-grow: 0;
}
Я преувеличил свою точку зрения в приведенном выше примере, но некоторые примеры онлайн-кода имеют некоторое сходство с этим. Если вы новичок в использовании flexbox, то, вероятно, не столкнетесь с большим количеством проблем с кодом.
Но знаете что? Следующее эквивалентно приведенному выше (при условии, что к этим элементам не применяется другой CSS):
.container {
дисплей: гибкий;
border: solid 1px # 444 ;;
}
.container div {
отступ: 10 пикселей;
}
Семь из восьми свойств, связанных с flexbox, которые я включил в предыдущий пример, были удалены, потому что все они были установлены на свои начальные значения, поэтому эти строки были лишними.
В данном случае я не возражаю включить эти дополнительные строки, потому что может быть полезно увидеть некоторые из потенциальных доступных свойств flexbox вместе с некоторыми значениями. Итак, это случай, когда код является явным, что дает некоторые преимущества для сканирования кода. В конце концов, хотя в урезанной версии ясно, что элемент .container является гибким контейнером, может быть не сразу понятно, что вложенные элементы div с отступом 10 пикселей являются гибкими элементами.
Итак, если мы возьмем более реалистичный пример, который использует некоторую явность с начальными значениями, я думаю, что может быть полезно что-то вроде следующего:
.container {
дисплей: гибкий;
Flex-wrap: nowrap; /* Начальное значение */
выровнять контент: растянуть; /* Начальное значение */
выровнять элементы: гибкий старт; /* Начальное значение */
граница: сплошная 1px # 444;
}
.container div {
отступ: 10 пикселей;
заказ: 0; /* Начальное значение */
}
В приведенном выше примере есть четыре лишних строки (более реалистичные, чем семь), и каждая из них прокомментирована, чтобы указать, что автор кода знает об этом, но предпочитает, чтобы строки оставались.
И, конечно же, это можно сделать для любого свойства CSS, для которого установлено начальное значение, включая CSS, который переопределяет предыдущий CSS. Вот , помимо h3, снова пример :
h3 {
цвет фона: # 444;
цвет белый;
отступ: 7 пикселей;
}
/ * . .. здесь сотни строк кода ... * /
aside h3 {
фон: нет; / * инициализация как переопределение * /
цвет: # 444;
}
.. здесь сотни строк кода ... * /
aside h3 {
фон: нет; / * инициализация как переопределение * /
цвет: # 444;
}
И я полагаю, что в некоторых случаях было бы даже лучше:
в сторону h3 {
цвет фона: начальный; / * переопределить * /
цвет: # 444;
}
Здесь я использую довольно хорошо поддерживаемое начальное значение ключевого слова CSS , которое является одной из универсальных функций языка.В любом случае, даже без комментария, при условии, что переопределение в порядке, но добавление комментария делает его еще более ясным.
Последние мысли
Я не думаю, что избыточные начальные значения — огромная проблема для CSS. Пара лишних строк не нарушит кодовую базу и не вызовет серьезных проблем с производительностью.
Меня больше всего беспокоят начальные значения, которые неясны, что они являются переопределениями и прочим, что было включено (или скопировано) в образовательных целях с использованием новых для автора кода функций CSS.
Итак, мои последние предложения по объявлению начальных значений:
- Найдите время, чтобы понять, что такое начальные значения и как они работают (в том числе в сокращении).
- Добавьте комментарий, чтобы указать, является ли начальное значение переопределением. Хотя инструменты разработчика помогут прояснить это, не помешает указать это в комментариях.
- Позаботьтесь о том, чтобы вы не добавляли лишние строки в новые функции, такие как flexbox (или не использовали комментарии).
¿Для цвета фона: none no anula un color de fondo especificado?
Моя цель — чтобы все ячейки в таблице имели цвет фона, кроме ячеек с классом «прозрачный».Вот пример кода (соответствующий jsfiddle):
<стиль>
тд {цвет фона: красный}
td.transparent {background-color: none}
<таблица>
foo
бар
Почему ячейка td.
transparent не следует правилу td.transparent css? Когда я проверяю элемент, правило есть, но оно отменяется правилом td, которое, кажется, нарушает обычные правила специфичности css.
Я могу получить то, что хочу, используя rgba (0,0,0,0) вместо none , но rgba не поддерживается в IE8, и я бы хотел избежать использования уродливого хака, если бы мог.
Я также хотел бы просто понять, почему это не работает так, как я ожидал.
Мысли?
Mi Objetivo es que todas las celdas de una tabla tengan un color de fondo, excepto las que tengan la clase «transparent». Aquí algunos ejemplos de código (соответствующий jsfiddle):
<стиль>
тд {цвет фона: красный}
тд.прозрачный {background-color: none}
<таблица>
foo
бар
¿Por qué no la célula td.transparent seguir la regla td.transparent css? Cuando inspecciono el elemento, la regla está ahí, pero está siendo anulada por la regla td, que parece romper las reglas de especificidad de css normales.
Может быть использован для использования rgba (0,0,0,0) en lugar de none , pero rgba no es совместим с IE8, и мне нужно, чтобы это произошло с помощью хакерских файлов.
También me gustaría simplemente entender por qué esto no funciona de la manera que esperaba.
¿Pensamientos?
div.ccm-pagination-wrapper {
маржа: 50px 0 0;
выравнивание текста: центр; .pagination {
маржа: 0 авто;
граница: нет;
радиус границы: 0;
> li {
дисплей: встроенный блок;
маржа: 0 5px;
размер шрифта: 14 пикселей;
& .active {
охватывать {
цвет: @ global-navigation-text-link-selected-color;
граница: нет;
радиус границы: 50 пикселей;
фон: @ global-navigation-background-link-selected-color;
&: hover {
цвет: @ global-navigation-text-link-selected-color;
фон: @ global-navigation-background-link-selected-color;
}
}
}
&.следующий {
&.
отключен {
а,
охватывать {
цвет: @ цвет линии нижнего колонтитула;
&: hover {
цвет: @ цвет линии нижнего колонтитула;
}
}
} а,
охватывать {
цвет: @ цвет ссылки тела;
граница: нет;
радиус границы: 0;
фон: нет;
&: hover {
цвет: @ global-navigation-background-link-selected-color;
фон: нет;
}
&:после {
ширина: 1.2em;
семейство шрифтов: «FontAwesome», без засечек;
размер шрифта: 1.4em;
стиль шрифта: нормальный;
font-weight: нормальный;
вариант шрифта: нормальный;
высота строки: 1;
фон: #fff;
содержание: «\ f138»;
позиция: абсолютная;
вершина: .4em;
вправо: 6 пикселей;
}
} }
& .prev {
&.отключен {
а,
охватывать {
цвет: @ цвет линии нижнего колонтитула;
&: hover {
цвет: @ цвет линии нижнего колонтитула;
}
}
} а,
охватывать {
цвет: @ цвет ссылки тела;
граница: нет;
радиус границы: 0;
фон: нет;
&: hover {
цвет: @ global-navigation-background-link-selected-color;
фон: нет;
}
&:перед {
ширина: 1.2em;
семейство шрифтов: «FontAwesome», без засечек;
размер шрифта: 1.4em;
стиль шрифта: нормальный;
font-weight: нормальный;
вариант шрифта: нормальный;
высота строки: 1;
фон: #fff;
содержание: «\ f137»;
позиция: абсолютная;
верх: .4em;
слева: 6 пикселей;
}
}
}
> a {
цвет: @ global-navigation-text-link-selected-color;
/ * размер шрифта: 14 пикселей; * /
граница: нет;
радиус границы: 50 пикселей;
цвет фона: @ цвет ссылки тела;
&: hover {
цвет: @ global-navigation-text-link-selected-color;
цвет фона: @ body-link-hover-color;
}
}
> span {
цвет: @ global-navigation-text-link-hover-color;
граница слева: 0;
граница справа: 0;
граница: нет;
радиус границы: 50 пикселей;
цвет фона: @ цвет границы страницы;
}
}
} .st-pagination {
& .pagination { > li { &.следующий {
а,
охватывать {
padding-right: 24px;
&:после {
фон: нет;
позиция: абсолютная;
верх: .3em;
справа: .2px;
}
} }
& .prev {
а,
охватывать {
отступ слева: 24px;
&:перед {
фон: нет;
позиция: абсолютная;
верх: .3em;
слева: .2px;
}
}
}
}
}
}
}
Usunięcie tła {BACKGROUND: none} — Tło
Usunięcie tła {BACKGROUND: none}
Jak usunąć wcześniej dodane tło?
selektor {background: none} Selektorem może być praktycznie dowolny znacznik, np.
p — akapit, h2 — tytuł czy td — komórka tabeli [zobacz: Wstawianie stylów].Polecenie umożliwia wykasowanie zdefiniowanego wcześniej tła. Okazuje się ono przydatne, częściej niż można by sdzić. Na przykład wyobraźmy sobie, że w zewnętrznym arkuszu stylów określamy ogólne własności dla wszystkich stron naszego serwisu. Załómy, że znajduje się tam m.in. deklaracja tła obrazkowego stron. Jeśli teraz zechcemy tylko na jednej ze stron zastosować zwykłe tło, a jednocześnie na innych pozostawić nadal obrazkowe, może to uczynić na dwa sposoby:
- 900cznie done done.Takie rozwiązanie nie jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. Kolor tekstu na stronama. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron), to po jakimś czasie możemy po prostu zapomnieć o tej dodatkowej modyfikacji, co sprawi, e.
- W wewnętrznym arkuszu wybranej strony lub w stylu inline można umieścić przedstawione powyżej polecenie. Możemy wtedy bez przeszkód dołączyć zewnętrzny arkusz i nie musimy za każdym razem oddzielnie modyfikować takiej strony.
Jak widać другие sposób jest znacznie korzystniejszy. Dodatkowo istnieją sytuacje, gdy pierwsza metoda jest wręcz niemoliwa do zastosowania, np. w przeglądarkach odsyłacze są zwykle domyślnie podkreślane. Jeśli chcemy z tego zrezygnować, musimy usunąć dekorację tekstu:
a: link, a: loaded {text-decoration: none } Dla wielu innych własności stylów istnieją to661, аналоговая война , аналоговая ссылка , аналогия 9066 none нормальный , авто , прозрачный итп.
Polecenie фон: нет usuwa wszystkie własności dotyczące tła. Można również usunąć tylko wybrane, stosując odpowiednie polecenia dla każdej własności, którą chcemy usunąć (np.
