belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

CSS >>>

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

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

При использовании свойства 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. Вставка контента на веб-страницу

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

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

Как известно, в зависимости от языка кавычки, используемые в тексте, могут иметь различный вид. Поэтому в 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 здесь.

Контрольные вопросы и задания

  1. Какие значения может принимать свойство content?
  2. Опишите свойства counter-reset и counter-increment.
  3. При помощи какого свойства устанавливается вид автоматически добавляемых кавычек?

Словарь новых английских слов

charset [ˈtʃɑːset] – кодировка.
handheld [ˈhændheld] – переносной, портативный.
braille [breɪl] – система чтения Брайля.
screen [skriːn] – экран.
media [ˈmiːdiə] – носители.
projection [prəˈdʒekʃn] – проектор.
face [feɪs] – внешний вид, лицо.
font [fɑːnt] – шрифт.
orphans [ˈɔːfən] – остатки.
widows [ˈwɪdoʊz] – лишние.
inside [ˌɪnˈsaɪd] – внутри, внутрь.
avoid [əˈvɔɪd] – избегать.
always [ˈɔːlweɪz] – всегда.
quotes [kwoʊtz] – кавычки.
close [kloʊz] – закрывать, закрытый.
open [ˈoʊpən] – открывать, открытый.
normal [ˈnɔːrml] – нормальный, обыкновенный.
counter [ˈkaʊntər] – счетчик.
reset [ˌriːˈset] – вновь устанавливать, перезагружать.
content [kənˈtɛnt] – содержимое.
increment [ˈɪŋkrəmənt] – приращение, увеличение.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх