Главная » Языки программирования

content

Содержание
  1. content
  2. Кратко
  3. Пример
  4. Как пишется
  5. Как понять
  6. content¶
  7. Демо¶
  8. Синтаксис¶
  9. Значения¶
  10. Спецификации¶
  11. content
  12. Синтаксис
  13. Значения
  14. Браузеры

content

Свойство, с помощью которого можно добавить на страницу то, чего нет в HTML-разметке.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

 a::after  content: "👉"; margin-right: 5px;> a::after  content: "👉"; margin-right: 5px; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Изображение в качестве содержимого. Может применяться к любому элементу.

 div  content: url("http://www.example.com/test.png");> div  content: url("http://www.example.com/test.png"); >

Все значения ниже могут применяться ТОЛЬКО к псевдоэлементам : : before и : : after .

 div::before  content: "prefix";> div::before  content: "prefix"; >

Значения счётчиков с использованием функций counter ( ) и counters ( ) :

 div::before  content: counter(chapter_counter);> div::before  content: counters(section_counter, ".");> div::before  content: counter(chapter_counter); > div::before  content: counters(section_counter, "."); >

Значения HTML-атрибутов с использованием функции attr ( ) :

 div::before  content: attr(value string);> div::before  content: attr(value string); >

Ключевые слова, зависящие от языка страницы и положения в тексте:

 div::before  content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote;> div::before  content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; >

Использование нескольких значений одновременно. Исключение — ключевые слова normal и none :

 div::before  content: open-quote counter(chapter_counter);> div::before  content: open-quote counter(chapter_counter); >

Ключевые слова, которые нельзя комбинировать с другими значениями:

 div::before  content: normal; content: none;> div::before  content: normal; content: none; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Чаще всего свойство content применяется к псевдоэлементам : : before и : : after . В зависимости от значения свойства псевдоэлемент принимает тот или иной вид:

  • Если значением является просто строка, то она подставляется на место псевдоэлемента. Как правило, это до или после текстового содержимого тега.
  • Есть несколько зарезервированных слов, которые также можно указывать в качестве значения. Используются они как совместно со свойством quotes , так и в автоматическом режиме:
    • open — quote обозначает открывающую кавычку цитаты для текущего языка. Например, для русского это будет открывающая «ёлочка» ( « );
    • close — quote обозначает закрывающую кавычку цитаты для текущего языка. Например, для русского это будет закрывающая «ёлочка» ( » );
       Вспомните, как говорили мушкетёры: Один за всех, все за одного!  blockquote> Вспомните, как говорили мушкетёры: q>Один за всех, все за одного!q> blockquote>      
     blockquote  quotes: "«" "»" "„" "”";> blockquote::before  content: open-quote;> blockquote::after  content: close-quote;> blockquote  quotes: "«" "»" "„" "”"; > blockquote::before  content: open-quote; > blockquote::after  content: close-quote; >      
    «Вспомните, как говорили мушкетёры: „Один за всех, все за одного!”»
    • no — open — quote и no — close — quote используются, когда не нужно отображать кавычки, но при этом продолжать увеличивать уровень вложенности;
    • Если значением является результат выполнения функций counter ( ) или counters ( ) , то псевдоэлемент будет содержать вычисленное значение счётчика в текущий момент. Эти функции работают совместно со свойствами counter — reset и counter — increment ;
    • Очень интересным значением является результат выполнения функции attr ( ) .

    С помощью неё можно вывести в псевдоэлемент значение любого атрибута тега:

       Ваш рейтинг: 212  p> Ваш рейтинг: span data-tip="Вычисляется на основе активности">212span> p>      
     [data-tip]  position: relative; cursor: help;> [data-tip]:hover::after  opacity: 1; visibility: visible;> [data-tip]::after  content: attr(data-tip); position: absolute; top: 140%; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden;> [data-tip]  position: relative; cursor: help; > [data-tip]:hover::after  opacity: 1; visibility: visible; > [data-tip]::after  content: attr(data-tip); position: absolute; top: 140%; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; >

    Вывод ссылки на печать

    🛠 . или красиво оформить нумерованный перечень

     .benefits  counter-reset: benefits;> .benefits-item  counter-increment: benefits;> .benefits-item::before  content: counter(benefits); position: absolute; font-size: 190px; font-weight: bold; left: 0; top: -0.35em; opacity: 0.5; color: #1A5AD7;> .benefits  counter-reset: benefits; > .benefits-item  counter-increment: benefits; > .benefits-item::before  content: counter(benefits); position: absolute; font-size: 190px; font-weight: bold; left: 0; top: -0.35em; opacity: 0.5; color: #1A5AD7; >

    Источник

    content¶

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

    Применяется совместно с псевдоэлементами ::after и ::before , они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.

    Демо¶

    Синтаксис¶

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
    /* Keywords that cannot be combined with other values */ content: normal; content: none; /* values */ content: url('http://www.example.com/test.png'); content: linear-gradient(#e66465, #9198e5); content: image-set('image1x.png' 1x, 'image2x.png' 2x); /* alt text for generated content, added in the Level 3 specification */ content: url('http://www.example.com/test.png') / 'This is the alt text'; /* value */ content: 'prefix'; /* list of content values */ content: 'prefix' url('http://www.example.com/test.png'); content: 'prefix' url('http://www.example.com/test.png') 'suffix' / 'This is some alt text'; /* values, optionally with */ content: counter(chapter_counter); content: counter(chapter_counter, upper-roman); content: counters(section_counter, '.'); content: counters( section_counter, '.', decimal-leading-zero ); /* attr() value linked to the HTML attribute value */ content: attr(value string); /* Language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* Except for normal and none, several values can be used simultaneously */ content: open-quote counter(chapter_counter); /* Global values */ content: inherit; content: initial; content: revert; content: revert-layer; content: unset;

    Значения¶

    <строка>Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда ( &sect ; например), будут отображаться как есть, т. е. простым текстом ( &sect ;, а не § ). attr() Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after добавит после ссылки её адрес, т. е. значение атрибута href . Если указанного атрибута нет, то вернётся пустая строка. open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes . close-quote Вставляет закрывающую кавычку. no-open-quote Отменяет добавление открывающей кавычки. no-close-quote Отменяет добавление закрывающей кавычки. url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter Выводит значение счётчика, заданного свойством counter-reset . none Не добавляет никакого содержимого. normal Задаётся как none для псевдоэлементов ::before и ::after .

    Применяется к псевдоэлементам ::before и ::after

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

    Источник

    content

    Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами :after и :before , они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.

    Синтаксис

    content: строка | attr(параметр) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none | inherit

    Значения

    Строка Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §). attr(параметр)
    Возвращает строку, которая является значением параметра тега указанного в скобках. Например, a:after добавит после ссылки её адрес, т.е. значение атрибута href . Если указанного атрибута нет, вернется пустая строка. open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes . close-quote Вставляет закрывающую кавычку. no-open-quotes
    Отменяет добавление открывающей кавычки. no-close-quote
    Отменяет добавление закрывающей кавычки. url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter Выводит значение счетчика, заданного свойством counter-reset . none Не добавляет никакое содержание. normal Задается как none для псевдоэлементов :before и :after . inherit Наследует значение родителя.

    HTML5 CSS2.1 IE Cr Op Sa Fx

           
    Тег

    Результат данного примера показан на рис. 1.

    Применение свойства content

    Рис. 1. Применение свойства content

    Браузеры

    Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none . Safari до версии 3.1 не поддерживает значение none и normal .

    Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11.0 и 5.1 соответственно.

    Источник

    Читайте также:  Java exception network error
Оцените статью
© 2024 Программирование