本文将为大家详细介绍”纯CSS怎么实现减价自动编号”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“纯CSS怎么实现减价自动编号”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
CSS是什么意思
CSS是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且CSS样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果,发展至今,CSS不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
<强>问题的由来强>
第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了,当时还单独涉猎过这个主题,词有个很好的特性级联标题,一次设置好之后,后续只要设置标题样式就能按照设置的标题编号方式自动编的号,我们要做的只是将对应的标题设置成对应基本的标题样式就好了,这个方法让我爱不释手,多年来一直沿用。完全解决了中途插入一章,一节等等导致的章节编号都需要人肉调整的问题,当然还有图片的编号命名什么的,都是类似的。
直到后面开始用减价由于各个编辑器的切换,一直没有一个好用的替代方案,所以几年前我写了一个小工具用命令行来做这事rawbin/markdown-clear,这个工具解决了在github写博客的问题,同时在解决博客的问题的基础上解决了在各个平台发文的问题,因为编号是用脚本写上去的,所以用在这里减价在各个平台发文也就顺理成章的转成HTML就行了,也解决了这个阶段的问题。
前两天把拖欠几个月的全面认知的总结写了,突然不想用这个脚本来编号了,产生一个想法:能不能不人肉编号,自动编上?然后就有了下面的内容。
<强>先搞起来解决问题强>
以下操作案例都是在macOS中产出,其他平台可能有些许差别,换汤不换药。
- <李>
在typora中写减价自动编号
李> <李>打开typora【偏好设置】
李> <李>找到【外观】=祝辞【主题】=祝辞【打开主题文件夹】
李>将如下代码加入到打开目录的base.user。css中
# writer { ,,,counter-reset: h2 } h2 { ,,,counter-reset: h3 } h3 { ,,,counter-reset: h4 } h4 { ,,,counter-reset: h5 } h5 { ,,,counter-reset:代替 } h6 { ,,,counter-reset: h7 } # writer h2: before { ,,,counter-increment:, h2; ,,,内容:,计数器(h2),“只”; } # writer h3: before { ,,,counter-increment:, h3; ,,,内容:,计数器(h2),“干净,计数器(h3),“只”; } # writer h4: before { ,,,counter-increment:, h4; ,,,内容:,计数器(h2),“干净,计数器(h3),“干净,计数器(h4),“只”; } # writer h5: before { ,,,counter-increment:, h5; ,,,内容:,计数器(h2),“干净,计数器(h3),“干净,计数器(h4),“干净,计数器(h5),“只”; } # writer 编辑:before { ,,,counter-increment:,类推; ,,,内容:,计数器(h2),“干净,计数器(h3),“干净,计数器(h4),“干净,计数器(h5),“干净,计数器(编辑),“只”; } # writer h7:{之前 ,,,counter-increment:, h7; ,,,内容:,计数器(h2),“干净,计数器(h3),“干净,计数器(h4),“干净,计数器(h5),“干净,计数器(编辑),“干净,计数器(h7),“只”; }
<>强讲道理强>
- <李>
打开typora【偏好设置】
李> <李>找到【通用】=祝辞【高级】=祝辞【开启调试模式】=祝辞勾选
李> <李>然后在非源码模式下=祝辞【右键】=祝辞【检查元素,就可以看到为什么是#写了
李> <李>这个后面还有用
李> <强>在github页写减价博客自动编号
强>
我用的是jekyllbootstrap.com的模板,比较简单
打开任意一篇rawbin -.github.io中的文章,然后【右键】=祝辞【检查】
可以拿到两个内容
- <李>
容器类为.content,严格点为#包装.content
李> <李>样式文件在资产/主题/bootstrap3,可以修改其下的css/style.css