青少年编程与数学 01-006 设计网页的外观 19课题、计数器-CSDN博客

本文链接：https://blog.csdn.net/qq_40071585/article/details/140483219

青少年编程与数学 01-006 设计网页的外观 19课题、计数器

课题摘要
课题要求
一、计数器
二、嵌套计数器
三、CSS 计数器属性
四、练习
课题作业
附录一、人物介绍：阿德里安·霍洛维茨

本文介绍CSS计数器。

“优先权决定重点，重点决定排序，排序决定生活。”
“Priorities determine what we focus on, what we focus on determines what we become.”
—— 史蒂芬·柯维 (Stephen R. Covey) | 美国作家、教育家 | 1932 ~ 2012

“生活中最重要的事情是要有一个明确的目标和达成它的先后顺序。”
“The important thing in life is to have a great aim, and the determination to attain it.”
—— 约翰·沃尔夫冈·冯·歌德 (Johann Wolfgang von Goethe) | 德国作家、科学家 | 1749 ~ 1832

“有效的时间管理实际上是对你自己的生命进行优先级排序。”
“Effective time management is actually life management by priorities.”
—— 海伦·凯勒 (Helen Keller) | 美国作家、社会活动家 | 1880 ~ 1968

“成功的秘诀在于一种始终如一的思考方式，以及对目标的坚定排序。”
“The secret of success is a constancy of purpose in pursuit of a goal, a consistent sorting of goals.”
—— 本杰明·梅尼克 (Benjamin Mays) | 美国教育家、牧师 | 1894 ~ 1984

课题摘要

本文介绍CSS计数器。

课题要求

掌握CSS计数器的应用。

一、计数器

CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。
如需使用 CSS 计数器，我们将使用以下属性：
counter-reset - 创建或重置计数器
counter-increment - 递增计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

二、嵌套计数器

下面的例子为页面（section）创建一个计数器，为每个 <h1> 元素（subsection）创建一个计数器。
“section” 计数器为每个 <h1> 元素计数，同时写入 “Section” 以及 section 计数器的值，“subsection” 计数器为每个 <h2> 元素计数，同时写入 section 计数器的值以及 subsection 计数器的值：

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

计数器对于创建概述列表也很有用，因为在子元素中会自动创建一个计数器的新实例。在这里，我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串：

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

三、CSS 计数器属性

属性	描述
content	与 ::before 和 ::after 伪元素一同使用，来插入生成的内容。
counter-increment	递增一个或多个计数器值。
counter-reset	创建或重置一个或多个计数器。

四、练习

<!doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
    <title>CSS响应式布局 编程笔记 html5&css&js</title>
    <style>
        body {
            text-align: center;
            counter-reset: section;
            color: cyan;
            background-color: teal;
        }
        h2::before {
            counter-increment: section;
            content: "第" counter(section) "章 ";
        }
    </style>
</head>
<body>
<h1>
    《青少年成长管理》
</h1>
<h2>成长工程</h2>
<h2>成长要素</h2>
<h2>成长目标</h2>
<h2>成长资源</h2>
<h2>专业选择</h2>
<h2>成长导师</h2>
<h2>时间管理</h2>
<h2>学习方法</h2>
<h2>常见问题</h2>
<h2>成长计划</h2>
<h2>项目计划</h2>
<h2>任务计划</h2>
<h2>计划执行</h2>
<h2>考核评价</h2>
<h2>调整改进</h2>
<h2>走进社会</h2>
<h2>改变世界</h2>
<h2>成就人生</h2>
</body>
</html>