Вставка контента
http://belarusweb.net
Основы создания сайтов

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

css-свойство content

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

  • 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 разрешается через пробел указывать сразу несколько значений свойства (см. пример 6.5).

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вставка генерируемого контента</title>
  <style>
	body{counter-reset: parag_1;}   /* Создаем счетчик для тела документа */
	h2{counter-reset: parag_2;}   /* Создаем счетчик для заголовка 'h2' */
	h2:before{ 
      counter-increment: parag_1 1; /* Считаем в элементе 'body' все 'h2' */
       /* Вставляем перед каждым 'h2' контент: строка+текущее значение 
		  счетчика+строка */
	  content: "§" counter(parag_1) ". ";
    }
    h3:before{ 
      counter-increment: parag_2 1; /* Считаем в элементе 'h2' все 'h3' */
	  /* Вставляем перед каждым '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>

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

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, которое позволяет установить однообразное употребление кавычек в тексте. В качестве значений свойство принимает символ открывающей кавычки и символ закрывающей кавычки. При этом сами символы также должны быть взяты в кавычки (см. пример 6.6).

<!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>

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

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