Если вы являетесь разработчиком внешнего интерфейса, существует высокая вероятность того, что вы слышали о псевдоэлементах, а также о свойстве содержимого CSS . Я не буду подробно обсуждать здесь псевдоэлементы, но я предлагаю вам взглянуть на статью Луи Лазариса о Smashing Magazine, если вы не знакомы с этой концепцией или хотите быстро освежиться.
В этой статье мы сосредоточимся на свойстве content . CSS-свойство content работает с псевдоэлементами ::before и ::after (которые могут использовать синакс с одинарным или двойным двоеточием). Свойство используется для вставки сгенерированного контента в веб-страницу и полностью поддерживается во всех основных браузерах.
Основной синтаксис для свойства content
Синтаксис для свойства content разбит следующим образом, каждое из представленных значений:
p::before { content: normal|counter|attr|string|open-quote|url|initial|inherit; }
CSS немного отличается от значения к значению. Например, чтобы использовать значение attr() с ::before или ::after , вам нужно написать CSS следующим образом:
p::after { content: " (" attr(title) ")"; }
Это только один пример, и об этом позже. В следующих разделах я расскажу о каждом значении, включая attr() .
Значение: none или normal
Если установлено значение none , псевдоэлемент не генерируется. Если вы установите его в normal он вычисляется как none для ::before и ::after .
p::before { content: normal; } p::after { content: none; }
Такие вещи могут использоваться во вложенных элементах, в которых уже определен псевдоэлемент, но вы хотите переопределить псевдоэлемент в определенных контекстах.
Значение: <string>
Это значение устанавливает содержимое в строку и может быть любым текстовым содержимым. Если используются нелатинские символы, символы должны быть закодированы. Давайте посмотрим на примеры каждого. Рассмотрим следующий HTML:
<h2>Tutorial Categories</h2> <ol> <li>HTML and CSS</li> <li class="new">Sass & Less</li> <li>JavaScript</li> </ol> <p class="copyright">SitePoint, 2015<p>
А потом следующий CSS:
.new::after { content: " New!"; color: green; } .copyright::before { content: "\00a9 "; }
Здесь мы вставляем текстовое содержимое в один из элементов списка, а также вставляем закодированный символ (в данном случае, символ авторского права) в элемент абзаца.
Строковое значение должно иметь кавычки, окружающие его, и это могут быть одинарные или двойные кавычки.
Значение: <uri>
Значение <uri> удобно, когда вы заинтересованы в отображении какого-либо вида мультимедиа, что можно сделать, указав на внешний ресурс (например, изображение). Если по какой-либо причине ресурс или изображение не могут быть отображены, они либо игнорируются, либо замещает их место. Давайте посмотрим на некоторый код, который демонстрирует использование этого значения.
Вот HTML-код:
<a class="sp" href="http://www.sitepoint.com/">SitePoint</a>
И это CSS, чтобы показать значок SitePoint вместе с текстом:
.sp::before { content: url(http://www.sitepoint.com/favicon.ico); }
Значение: counter() или counters()
Это значение является наиболее сложным значением, которое можно использовать со свойством content . Он записывается как одна из двух разных функций — counter() или counters() . Для более подробного обсуждения счетчиков CSS ознакомьтесь с этой статьей . Но вот краткий обзор.
В случае первой функции counter() сгенерированный текст представляет собой значение самого внутреннего счетчика имени, которое вы указываете в области действия для этого псевдоэлемента. По умолчанию он отформатирован в десятичном формате, но также может быть отформатирован римскими цифрами.
Другая функция counters(name, string) аналогична, но представляет все счетчики с указанным именем (первый параметр) в порядке от крайнего к внутреннему. Все эти значения разделены указанной строкой (второй параметр). Если вы укажете имя переменной-счетчика как none , inherit или initial объявление игнорируется.
Вот пример, чтобы проиллюстрировать, как использовать счетчик:
<h2>Name of First Four Planets</h2> <p class="planets">Mercury</p> <p class="planets">Venus</p> <p class="planets">Earth</p> <p class="planets">Mars</p>
А вот и CSS:
.planets { counter-increment: planetIndex; } .planets::before { content: counter(planetIndex) ". "; }
Это будет нумеровать элементы сгенерированным контентом, аналогично упорядоченному списку. В этом случае мы могли бы легко использовать упорядоченный список. Эти типы счетчиков намного удобнее, когда пронумерованные элементы перемежаются между другими элементами.
Вот демонстрация, которая использует счетчики CSS с использованием функции counter() .
Значение: attr()
Как показано ранее, функция attr() вставит значение указанного атрибута, который является единственным параметром. Если соответствующий элемент не имеет атрибута, возвращается пустая строка.
Вот пример:
<ul> <li><a href="http://www.sitepoint.com/html-css/">HTML and CSS</a></li> <li><a href="http://www.sitepoint.com/javascript">JavaScript</a></li> <li><a href="http://www.sitepoint.com/mobile/">Mobile</a></li> </ul>
С приведенным выше HTML, CSS ниже будет отображать значение атрибута href в скобках рядом со связанным текстом:
a::after { content: " (" attr(href) ") "; }
Этот прием часто используется в таблицах стилей печати, чтобы ссылки были видны на печатных веб-страницах.
Значение: open-quote или close-quote
Если установлено одно из этих значений, свойство content генерирует открывающую или закрывающую кавычку. Обычно он используется вместе с элементом <q> , но вы можете использовать его с любым элементом. Таким образом, вы можете сделать что-то вроде следующего:
blockquote::before { content: open-quote; } blockquote::after { content: close-quote; }
Значение close-quote будет работать только с ::after (по понятным причинам) и ничего не даст, если значение open-quote также отсутствует в том же элементе с использованием ::before .
Значение: no-open-quote или no-close-quote
Значение no-open-quote удаляет начальную цитату из указанного элемента, а значение no-close-quote удаляет заключительную цитату. Вы можете спросить, насколько эти значения полезны. Посмотрите на следующий HTML:
<p><q>A wise man once said: <q>Be true to yourself, but don't listen to those who say <q>Don't be true to yourself.</q></q> That is good advice.</q></p>
Обратите внимание, что в вышеприведенном абзаце оратор цитирует кого-то («Мудрый человек …»), который, в свою очередь, также цитирует других («те, кто говорит…»). Итак, у нас есть вложенные кавычки глубиной 3 уровня Грамматически, есть правильный способ справиться с этим. Если вы используете сгенерированный контент, вот как мы можем убедиться, что цитаты правильно вложены:
q { quotes: '“' '”' ''' ''' '“' '”'; } q::before { content: open-quote; } q::after { content: close-quote; }
Первый селектор определяет типы кавычек, которые мы хотим использовать, глубиной в три уровня, используя свойство quotes . Затем мы вставляем кавычки как контент, используя псевдоэлементы. Это похоже на то, что мы делали в предыдущем разделе.
Но что, если мы хотим, чтобы второй уровень кавычек игнорировался и не вставлялся по какой-либо причине? Мы можем использовать значения no-open-quote и no-close-quote чтобы переопределить их:
.noquotes::before { content: no-open-quote; } .noquotes::after { content: no-close-quote; }
В этом случае я добавил класс noquotes к noquotes второго уровня. Это гарантирует, что вложение кавычек все еще распознается, но кавычки не отображаются для этого элемента. Таким образом, цитата третьего уровня в этом абзаце будет иметь двойные кавычки, а не одиночные кавычки.
Вывод
Я надеюсь, что этот урок помог вам немного лучше понять каждое из значений свойства content и как их можно использовать в различных сценариях.
Проверьте ресурсы ниже для получения дополнительной информации: