From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/content/index.html | 293 ++++++++++++++++++++++++++++++++++++ 1 file changed, 293 insertions(+) create mode 100644 files/ru/web/css/content/index.html (limited to 'files/ru/web/css/content/index.html') diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html new file mode 100644 index 0000000000..f708e7db61 --- /dev/null +++ b/files/ru/web/css/content/index.html @@ -0,0 +1,293 @@ +--- +title: content +slug: Web/CSS/content +tags: + - Контекст +translation_of: Web/CSS/content +--- +
{{CSSRef}}
+ +

CSS-свойство content заменяет элемент сгенерированным значением. Объекты, добавленные с помощью свойства content являются анонимными  property are anonymous замещаемыми элементами.

+ +
/* Ключевые слова, которые нельзя комбинировать с другими значениями */
+content: normal;
+content: none;
+
+/* значение <url>  */
+content: url("http://www.example.com/test.png");
+
+/* значение <image>  */
+content: linear-gradient(#e66465, #9198e5);
+
+/* указанные ниже значения могут быть применены только к сгенерированному контенту с использованием ::before и ::after */
+
+/* значение <string>  */
+content: "prefix";
+
+/* значения <counter> */
+content: counter(chapter_counter);
+content: counters(section_counter, ".");
+
+/* значение attr() связано со значением атрибута HTML */
+content: attr(value string);
+
+/* языко- и позиция-зависимые ключевые слова */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* несколько значений могут использоваться вместе */
+content: open-quote chapter_counter;
+
+/* глобальные значения */
+content: inherit;
+content: initial;
+content: unset;
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +
+
none
+
Псевдоэлемент не генерируется.
+
normal
+
Вычисляется none для псевдоэлементов ::before и::after.
+
{{cssxref("<string>")}}
+
Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, \000A9 представляет собой символ авторского права.
+
{{cssxref("<url>")}}
+
URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.
+
{{cssxref("<image>")}}
+
{{cssxref("<image>")}}, указанный типом данных {{cssxref("<url>")}} или {{cssxref("<gradient>")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.
+
{{cssxref("<counter>")}}
+
Значение CSS счетчика, как правило число. Его можно отобразить с помощью функций  {{cssxref("counter()")}} или{{cssxref("counters()")}}.
+
+

Функция counter() имеет две формы записи: 'counter(имя)' или 'counter(имя, стиль)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal).

+ +

Функция counters() также имеет две формы записи: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию decimal).

+
+
attr(x)
+
Значение атрибута x элемента в виде строки. Если атрибут x отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.
+
open-quote | close-quote
+
Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.
+
no-open-quote | no-close-quote
+
Не вводит никакого содержимого, но увеличивает (уменьшает) уровень вложенности для кавычек.
+
+ +

Синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +

Заголовки и двойные кавычки

+ +

В этом примере вставляются кавычки вокруг кавычек а добавляет слово  "Глава" перед заголовками.

+ +

HTML

+ +
<h1>5</h1>
+<p>According to Sir Tim Berners-Lee,
+  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.</q>
+  We must understand that there is nothing fundamentally wrong
+  with building on the contributions of others.
+</p>
+
+<h1>6</h1>
+<p>According to the Mozilla Manifesto,
+  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.</q>
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+</p>
+ +

CSS

+ +
q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* Пробел в конце создает разделение
+                            между добавленным контентом
+                           и остальным контентом*/
+}
+ +

Результат

+ +

{{EmbedLiveSample('Заголовки_и_двойные_кавычки', '100%', 200)}}

+ +

Изображение в сочетании с текстом

+ +

В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.

+ +

HTML

+ +
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
+ +

CSS

+ +
a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Изображение_в_сочетании_с_текстом', '100%', 60)}}

+ +

Целевые классы

+ +

В этом примере вставляется дополнительный текст после указанных элементов списка.

+ +

HTML

+ +
<h2>Paperback Best Sellers</h2>
+<ol>
+  <li>Political Thriller</li>
+  <li class="new-entry">Halloween Stories</li>
+  <li>My Biography</li>
+  <li class="new-entry">Vampire Romance</li>
+</ol>
+ +

CSS

+ +
.new-entry::after {
+  content: " New!";  /* Начальный пробел создает разделение
+                        между добавленным контентом
+                        и остальным контентом */
+  color: red;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Целевые_классы', '100%', 160)}}

+ +

Атрибуты изображений и элементов

+ +

В этом примере вставляется изображение перед каждой ссылкой и добавляет id атрибут после.

+ +

HTML

+ +
<ul>
+  <li><a id="moz" href="http://www.mozilla.org/">
+    Mozilla Home Page</a></li>
+  <li><a id="mdn" href="https://developer.mozilla.org/">
+    Mozilla Developer Network</a></li>
+</ul>
+ +

CSS

+ +
a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Атрибуты_изображений_и_элементов', '100%', 160)}}

+ +

Замена элемента

+ +

В этом примере содержимое элемента заменяется изображением. Вы можете заменить содержимое элемента либо значением <url> или изменить значение <image> . Содержимое, добавленное с помощью ::before или ::after не будет сгенерировано, поскольку содержимое элемента будет заменено.

+ +

HTML

+ +
<div id="replaced">Mozilla</div>
+
+ +

CSS

+ +
#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* не будет отображаться, если замена элемента поддерживается */
+  content: " (" attr(id) ")";
+}
+ +

Результат

+ +

{{EmbedLiveSample('Замена_элемента', '100%', 160)}}

+ +

Проблемы доступности

+ +

Сгенерированный CSS контент не включен в DOM. Из-за этого он не будет представлен в  accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Content", "#content-property", "content")}}{{Spec2("CSS3 Content")}}
{{SpecName("CSS2.1", "generate.html#content", "content")}}{{Spec2("CSS2.1")}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.content")}}

+ +

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

+ + -- cgit v1.2.3-54-g00ecf