现代 CSS

counters

图解CSS:奇妙的CSS计数器世界(Part3)

奇妙的CSS计数器世界主要分为三个部分,在第一部分中介绍了 list-style 的基本使用之外,主要是向大家阐述了如何使用 @counter-style 实现自定义的列表项标记符(list-style-type);在第二部分中介绍列表标记框,即伪元素 ::marker的使用以及可用于::marker上的CSS属性。至此,我们可以在::marker::before::after三个伪元素上的content生成内容,来构建更具个性化的列表项标记符。虽然如此,要实现具有计数(或者说编号)的列表项符号样式,还是需要CSS的计数器来助力,即counter-resetcounter-incrementcounter()counters()函数。在接下来的内容,主要围绕着这几个属性展开。感兴趣的请继续往下阅读。

图解CSS:奇妙的CSS计数器世界(Part2)

奇妙的 CSS 计数器世界 第一部分 主要介绍了使用 list-style(以及它们的子属性list-style-typelist-style-imagelist-style-position)属性给列表项设置列表项标记符样式。除此之外,还可以使用 @counter-style 规则来自定义列表项标记符(list-style-type的值)。事实上,每个列表顶的标记符都是::marker伪元素生成的标记框的内容。在这部分中,我们开始进入::marker伪元素世界。感兴趣的请继续往下阅读。

图解CSS:奇妙的CSS计数器世界(Part1)

这是有关于列表造型设计相关的话题,简单地说,就是CSS给列表项设计样式造型。可能你会觉得这样的话题有什么好聊的,不就是用list-style 相关的属性给 li 列表项或者displaylist-item的元素设置样式吗?说实话,一直以来我就是这么认为的,但自从看到 @counter-style 给列表项自定义表情符的标记时,让我感到好奇。随着继续往下探究,发现这里面有很多很有意思的东西,所以我觉得在 图解CSS系列 中单独用一篇文章和大家来聊 CSS计数器的奇妙世界。感兴趣的同学请继续往下阅读。

使用CSS的counter-increment做的游戏

我把CSS的黑魔法和把CSS推动到极限当作我的至爱。许多人没有意识到这是有多么的强大(特别是结合Sass)的预处理技术。这篇文章结合这两种至爱来做一些有意思的东西。当然它可能会或可能不会被你的下一个客户问,这样做有价值吗?但这样尝试才能真正的理解一种语言(当然,很多人说CSS不是一种语言)。但你也能使用纯CSS技术做一些简单的小游戏。

CSS Counters

CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ulol元素。如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术,允许开发人员使用伪类:after:before或者伪元素::after::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是,可以给这些计数器设置独特样式,让其在外观上更靓丽。

返回顶部