CSS :: Вставка генерируемого контента

css-свойство content

Для вставки генерируемого контента, который первоначально в тексте веб-страницы отсутствует, используется специальное ненаследуемое свойство content. Оно используется совместно с псевдоэлементами ::after и ::before, которые, соответственно, указывают, куда следует вставлять контент – до или после указанного в селекторе элемента (см. пример №1). Свойство может принимать следующие значения:

attr(имя_атрибута) – значение переданного функции attr() атрибута будет добавлено в текст веб-страницы;
"строка" – указанная в кавычках строка будет добавлена в текст веб-страницы;
url("path") – указанный объект (видеофайл, аудиофайл и т.д.) будет добавлен на веб-страницу;
open-quote – браузер установит открыващие кавычки;
close-quote – браузер установит закрыващие кавычки;
no-open-quote – браузер удалит открывающие кавычки, установленные при помощи open-quote;
no-close-quote – браузер удалит закрывающие кавычки, установленные при помощи close-quote;
normal – браузер отменит все вставки, которые были сделаны в элементе, т.е. вернет его в нормальное (первоначальное) состояние;
none – браузер не добавит никакого контента;
counter(id_счетчика) – браузер выведет нумерацию счетчика с указанным id (т.е. имя счетчика, установленное при помощи свойства counter-reset); отметим, что если счетчик с таким id не был установлен, то браузер будет всегда выводить только нуль.

При использовании свойства content разрешается через пробел указывать сразу несколько значений свойства (см. пример №1).

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вставка генерируемого контента</title>

  <style>
	
		/* Создаем счетчик для тела документа */
		body{counter-reset: parag_1;}   
		/* Создаем счетчик для заголовка «h2» */
		h2{counter-reset: parag_2;}   

		h2:before{ 
		  /* Считаем в элементе «body» все «h2» */
		  counter-increment: parag_1 1; 
		  /* Вставляем перед каждым «h2» контент: 
		  строка+текущее значение счетчика+строка */
		  content: "§" counter(parag_1) ". ";
		}

		h3:before{ 
		  /* Считаем в элементе «h2» все «h3» */
		  counter-increment: parag_2 1; 
		  /* Вставляем перед каждым «h3» контент: 
		  текущее значение счетчика parag_1+строка+
		  текущее значение счетчика parag_2+строка */
		  content: counter(parag_1) "." counter(parag_2) ". "; 
		}
	
  </style>
  
</head>
<body>

	<h2>Введение в CSS</h2>
	<h3>Для чего нужен CSS?</h3>
	<h3>Синтаксис CSS.</h3>
	<h3>Подключение CSS к html-документу.</h3><br>
	
	<h2>Свойства CSS для текста и шрифта</h2>
	<h3>Оформление внешнего вида текста.</h3>
	<h3>Определение характеристик шрифтов.</h3>
	
</body>
</html>

Пример №1. Вставка контента на веб-страницу

css-свойство counter-reset

Ненаследуемое свойство counter-reset инициализирует (устанавливает) счетчик, а также начальное значение счетчика. Для вывода текущего значения счетчика используется свойство content со значением counter(id_счетчика). Перечислим значения свойства counter-reset:

id_счетчика число – задается имя нового счетчика и через пробел указывается необязательное начальное значение счетчика (целые числа); если счетчик инициируется без начального значения, то браузер применит значение по умолчанию, равное 0;
none – используется по умолчанию, счетчики для текущего селектора создаваться не будут.

css-свойство counter-increment

Ненаследуемое свойство counter-increment увеличивает одно или несколько значений указанного в качестве значения счетчика. Перечислим значения свойства counter-increment:

id_счетчика число – задается имя счетчика, значение которого будет увеличиваться, а также через пробел указывается необязательное значение приращения счетчика (целые числа); если значение приращения счетчика не будет указано, браузер применит значение по умолчанию, равное 1;
none – используется по умолчанию, значения счетчиков для текущего селектора не будут изменяться, т.е. увеличиваться или уменьшаться в зависимости от значения приращения.

css-свойство quotes

Как известно, в зависимости от языка кавычки, используемые в тексте, могут иметь различный вид. Поэтому в CSS для возможности определения вида кавычек при их автоматическом добавлении, например, в случае использования элемента «q», присутствует наследуемое свойство quotes, которое позволяет установить однообразное употребление кавычек в тексте. В качестве значений свойство принимает символ открывающей кавычки и символ закрывающей кавычки. При этом сами символы также должны быть взяты в кавычки (см. пример №2).

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кавычки</title>
  
  <style>
  
		p{
		quotes: "\0022"
		"\0022";
		}
		
		div{
		quotes: "'"
		"'";
		}
		
  </style>
  
 </head>
 <body>
	
	<p>
		Теперь в элементах «p» при автоматическом добавлении <br>
		кавычек браузером будут использоваться вот такие 
		<q style="color: orange;">кавычки</q>.
	</p>
	
	<div>
		Теперь в элементах «div» при автоматическом добавлении <br>
		кавычек браузером будут использоваться вот такие 
		<q style="color: violet;">кавычки</q>.
	</div>
	
 </body>
</html>

Пример №2. Определение вида используемых кавычек

Отметим, что в значении свойства quotes разрешается вместо символов задаваемых кавычек использовать их коды стандарта Юникод. При этом код символа должен записываться после символа обратного слеша \ (см. пример №2). Посмотреть значения кодов символов кавычек можно воспользовавшись наборами мнемоник и числовых кодов Unicode здесь.

Быстрый переход к другим страницам

Печать документа
Вставка генерируемого контента
Вернуться к оглавлению учебника