网页设计中的重置和递增

  • 2019-05-31 14:12:02
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

重置和递增

网页设计中,创建计数器的基础包栝两个方面,一是能设置计数器的起点,二是能将其递增一定的置。

前者由属性counter-reset处理。

counter-reset

值:[<identifier><integer>?]+ | none | inherit

初始值:取决于具体的用户代理

应用于:所有元素

继承性:无

计算值:根据指定确定

计数器标识符只是创作人员创建的一个标签。例如,可以将小节计数器命名为subsection, subsec, ss甚至bob,只要重置(或递增)标识符,就足以使之建立。在以下规则中,计数器chapter就在重置时定义:

h1 {counter-reset: chapter;}

默认地,计数器重置为0。如果想重置为另一个数,可以在标识符后面声明这个数

h1#ch4 {counter-reset: chapter 4;}

还可以在标识符-整数对中一次重置多个标识符。如果少了一个整数,则默认为0:

h1 {counter-reset: chapter 4 section -1 subsec figure 1;}

/*'subsec' is reset to 0 */

从上例可以看到,负值是允许的。将计数器设罝为-32768并由此递增是完全合法的。

注意:如果采用非数值计数样式,CSS没有定义用户代理对于负计数器值该如何处理。例如,如果一个计数器的值是-5,但是其显示样式是upper-alpha,此时该采取什么行为?对此就没有定义。

总之,需要一个属性来指示元素将计数器递增。否则,计数器将永远保持计数器重置声

明中指定的值。毫无疑问,所需的这个属性就是counter-increment。

counter-increment

值:[<identifier><integer>?]+ | none | inherit

初始值:取决于具体的用户代理

应用于:所有元素

继承性:无

计算值:根据指定确定

类似于counter-reset,counter-increment也接受标识符-整数对,其中整数部分可以是0,也可以是负数或正数。与counter-reset的区别在于,如果counter- increment:中的标识符-整数对少了一个整数,则默认为1而不是0。

举例来说,,以下显示了在网页设计时用户代理如何定义计数器生成有序列表传统的1、2、3计数。

ol {counter-reset: ordered;}/* defaults to 0 */

ol li {counter-increment: ordered;}/* defaults to 1 */

另一方面,在网页设计时,创作人员可能希望从0向下计,使列表项使用一种渐进的负数体系,为此只獬稍作修改:

ol .{bounter-reset: ordered;}/* defaults to 0 */

ol li (counter-increment: ordered -1;}

列表的计数将是-1、-2、-3等等。如果将整数-1换成-2,列表的计数则是-2、-4、-6等等。

当前文章标题:网页设计中的重置和递增

当前URL:http://www.lyjtt.cn/news/wzzz/3036.html

上一篇:网页设计中的计数器及其使用

下一篇:网页设计中的计数器和作用域

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)