《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 20.3.3 指定编号的样式

简介: 本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第20章 ,第20.3节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。

20.3.3 指定编号的样式

可以指定追加编号的样式,譬如对代码清单20-6中追加的编号指定如下所示的样式,使得编号后面带一个“.”文字,编号颜色为蓝色,字体大小为42像素。

h1:before{

content: counter(mycounter)'.';
color:blue;
font-size:42px;

}

将上面这段代码替换到代码清单20-6中,重新运行代码清单20-6,运行结果如图20-9所示。

20.3.4 指定编号的种类

用before选择器或after选择器的content属性,不仅可以追加数字编号,还可以追加字母编号或罗马数字编号。使用如下所示的方法指定编号种类。

content:counter(计数器名,编号种类)

可以使用list-style-type属性的值来指定编号的种类,list-style-type为指定列表编号时所用的属性。例如,指定大写字母编号时,使用“upper-alpha”属性,指定大写罗马字母时,使用“upper-roman”属性。
将代码清单20-6中before选择器中的代码修改成如下所示的代码,然后重新运行该示例,运行结果如图20-10所示。

h1:before{

content: counter(mycounter,upper-alpha)'.';
color:blue;
font-size:42px;

}

image

20.3.5 编号嵌套
可以在大编号中嵌套中编号,在中编号中嵌套小编号。在代码清单20-7中,我们给出一个编号嵌套的示例,在该示例中,有两个大标题,每个大标题中又有三个中标题,使用编号嵌套的方式分别对大标题与中标题进行分层编号。


image
image

这段代码的运行结果如图20-11所示。

在这个示例中,六个中标题的编号是连续的,如果要将第二个大标题里的中标题重新开始编号的话,需要在大标题中使用counter-reset属性将中编号进行重置。

将代码清单20-7中h1元素的样式指定的代码修改成如下代码(添加counter-reset属性),然后重新运行该示例,运行结果如图20-12所示。

h1{

counter-increment: mycounter;
counter-reset: subcounter;

}

image

20.3.6 中编号中嵌入大编号

可以将大编号嵌入在中编号中,譬如要将代码清单20-7中的中编号修改为“大编号-中编号”的形式,需要将中编号的before选择器中的代码修改成如下代码。

h2:before{

content:  counter(mycounter) '-' counter(subcounter) '. ';

}
修改后在浏览器中重新运行代码清单20-7中的示例,运行结果如图20-13所示。

image


同样的,可以在小编号中嵌入中编号,中编号中嵌入大编号,只需相应地在before选择器所指定的小编号中包括大编号与中编号,在before选择器所指定的中编号中包括大编号就可以了。
代码清单20-8为一个编号多层嵌入的示例,在该示例的页面中有两个大标题,每个大标题有两个中标题,每个中标题有两个小标题,小标题的编号中包括大标题的编号与中标题的编号,中标题的编号中具有大标题的编号。


image
image

这段代码的运行结果如图20-14所示。


image

20.3.7 在字符串两边添加嵌套文字符号
可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。

另外,在元素的样式中使用quotes属性来指定使用什么嵌套文字符号。

对于嵌套文字符号的添加功能,目前Firefox浏览器、Opera浏览器,Chrome浏览器与Safari浏览器均对其提供支持。

代码清单20-9为添加嵌套文字符号的一个示例,在该示例中有一个h1标题元素,文字为“标题”,使用before选择器与after选择器在标题文字两边添加括号。


image

当需要添加双引号时,需要使用“”转义字符,使用方法如下所示。
h1{

quotes:"\"" "\""; 

}

代码清单20-9的运行结果如图20-15所示。

image

相关文章
|
23天前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
23天前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
23天前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
23天前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
23天前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
23天前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
23天前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
23天前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
23天前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习

热门文章

最新文章