CSS счетчик элементов

Вопросы и ответы по верстке, скриптам JS и прочему
Аватара пользователя
Repellent
Наш человек
Сообщения: 161
Зарегистрирован: 27 мар 2016, 20:52
Откуда: Russia
Благодарил (а): 11 раз
Поблагодарили: 36 раз
Контактная информация:

CSS счетчик элементов

Сообщение Repellent » 12 мар 2017, 10:08

Возможно будет полезным, например при создании списков.

Стилевое свойство counter-increment, доступно начиная со спецификации CSS 2.1, поддерживается всеми браузерами кроме IE-7.

Пример подсчета всех тегов <p></p> на странице.

HTML файл:

Код: Выделить всё


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-счетчик</title>
<style>
body {
  counter-reset: section;           /* Set the section counter to 0 */
}
p:before {
  display:inline-block;
  text-align:center;
  counter-increment: section;      /* Increment the section counter */
  content: "" counter(section) ""; /* Display the counter */
  font-weight: bold;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-right: 5px;
  font-size: 16px;
  text-decoration:none;
   color: #555555;
    background: -moz-linear-gradient(#FAFAFA, #DADADA) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear,left top, left bottom, from(#FAFAFA), to(#DADADA));
    background: -o-linear-gradient(#3f3f3f, #000);
   background: -ms-linear-gradient(top, #FAFAFA 0%,#DADADA 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FAFAFA', EndColorStr='#DADADA', GradientType=0); /* IE6-9 */
    border: 1px solid #CCCCCC;
    border-radius: 16px 16px 16px 16px;
    height: 27px;
   width: 27px;
    line-height: 27px;   
    text-shadow: 1px 1px #FFFFFF;
   top: -1px;
    box-shadow: 0 0 0 1px #FFFFFF, 1px 1px 4px #DDDDDD;
}
h3 {
      font-weight: bold;
  padding-top: 5px;
  padding-bottom: 10px;
  color: #242424;
  font-size: 20px;
 text-align: center;
  font-family: arial;
}

section {
  width: 600px;
  margin: auto;
  font-size: 16px;
  line-height: 24px;
  font-family: arial;
}
p {
  margin-bottom: 10px;
}
</style>
</head>

<body>
<h3>How to make pancakes</h3>
<section>
  <p>Put the flour into a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
  <p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
  <p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for a minute.</p>
  <p>Add just under a ladleful of batter to the pan and immediately start swirling it round the pan to get a nice even layer.</p>
  <p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
  </section>
</body>
</html>





Скриншот результата:

Screenshot_1.png
Screenshot_1.png (39.07 КБ) 268 просмотров


Ссылка на статью-источник _www.webdesignerdepot.com/2013/05/learn-to-count-with-css/
Перевод: _dreamhelg.ru/2013/06/learn-to-count-with-css/

В прицепе архив с парой готовых html файлов.
Вложения
demo.zip
(2.22 КБ) 13 скачиваний

Вернуться в «HTML, CSS, JS , прочее»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость