HTML5+CSS3 使用content属性.docx

《HTML5+CSS3 使用content属性.docx》由会员分享，可在线阅读，更多相关《HTML5+CSS3 使用content属性.docx（7页珍藏版）》请在三一办公上搜索。

1、HTML5+CSS3 使用content属性HTML5+CSS3 使用content属性 除了可以使用before选择器和afte选择器的content属性，在标签中插入文字或图片之外，还可以为多个项目插入项目编号。 1在多个标题前加上连续编号 如果要针对多个标题添加连接编号，可以使用content属性中的counter属性，使用语法如下： :before Content:counter(计数器); 除了使用counter属性以外，还需要在样式中追加对元素的counter-increment属性的指定，使用语法如下： counter-increment:before或after指定的计数器名

2、示例：13-6 counter.html counter属性使用 p:after content:counter(count); p counter-increment:count; 项目 项目 项目 项目 项目 上述代码中，使用counter属性和counter-increment属性为p标签添加了一组连续编号。 项目编号 2在项目编号中追加文字 在项目中插入编号时，可以在项目编号中插入文字，增加对项目的修饰效果。使用语法如下： :before 示例：13-7 InsertCounter.html 在项目编号中插入内容 h3:before content:第counter(count)章 ;

3、 h3 counter-increment:count; Content:第counter(计数器)章; HTML 5简介 HTML 5结构 多媒体播放 本地存储 表单与文件 新增元素 在上述代码中，h3标签包含图书的章节名称，使用counter属性为章节添加了章节编号。 项目编号中追加文字 3指定编号的样式 为项目追加编号完成后，还可以指定编号的样式。例如，设置编号的字体、字体大小和字体颜色等内容。 示例：13-8 CounterCss.html 在项目编号中插入内容 h3:before content:第counter(count)章 ; color:red; font-family:黑体

4、; font-size:24px; h3 counter-increment:count; HTML 5简介 HTML 5结构 多媒体播放 本地存储 表单与文件 新增元素 在上述代码中，设置项目编号的字体为黑体、字体大小为24像素、字体颜色为红色。 修改项目编号的样式 4指定编号的种类 使用before选择器或after选择器的content属性，不但可以在编号中追回文字和设置样式，还可以为编号设置编号类型。 指定编号类型可以使用list-style-type属性，常用的编号种类介绍如下。 名称 disc circle square 解释 列表项项目符号使用disc(通常为实心圆)。 列表项项

5、目符号使用circle(通常空心圆)。 列表项项目符号使用square(实心或空心方块)。 decimal upper-alpha lower-alpha 1，2，3，4，5，.。 A，B，C，D，E，.。 a，b，c，d，e，.。 upper-roman ，.。 lower-roman i，ii，iii，iv，v，.。 none 不使用项目符号。 示例：13-9 ListType.html 指定编号种类 h3:before content:counter(count,upper-roman).; h3 counter-increment:count; 将alt属性的值作为图像的标题来显示 文

6、字内容 使用content属性来插入项目编号 文字内容 在多个标题前加上连续编号文字内容 color:orange; font-family:黑体; font-size:24px; 在上述代码中，使用counter属性将编号类型设置为upper-roman。 修改编号5编号嵌套 在使用content属性指定编号时，可以在大编号中插入中编号，中编号中插入小编号。 示例：13-10 test.html 编号嵌套 h1:before content:counter(count,upper-roman).; h1 counter-increment:count; h2:before content:c

7、ounter(count1).; h2 counter-increment:count1; margin-left:50px; color:red; font-family:黑体; color:red; font-family:黑体; 创建网站及站点信息 网站建设理论 安装IIS服务器 站点管理 网站栏目及版块设计 网页文本概述 设计产品信息版块 多彩文字设计 上述代码中，为页面添加了h1标签和h2标签。然后使用before选择器为h1和h2标签编号并设置编号的颜色和类型。 6中编号中嵌入大编号 在使用content属性指定编号时，可以在小编号中嵌入中编号，中编号中嵌入大编号，只需相应地在be

8、fore选择器所指定的小编号中包括大编号与中编号，在before选择器所指定的中编号中包括大编号。 示例：13-11 test2.html 编号嵌套 h1:before content:counter(count,upper-roman).; h1 counter-increment:count; h2:before content:counter(count).counter(count1).; h2 counter-increment:count1; h3:before content:counter(count).counter(count1).counter(count2).; h3

9、counter-increment:count2; 创建网站及站点信息 网站建设理论 站点开发的流程 网页制作过程 安装IIS服务器 margin-left:100px; color:red; font-family:黑体; counter-reset:count2; margin-left:50px; color:red; font-family:黑体; counter-reset:count1; color:red; font-family:黑体; Internet信息服务 虚拟目录 网站栏目及版块设计 网页文本概述 文字的格式化 网页文字运用 设计产品信息版块 项目符号与编号 设计过程

10、在页面中，包括两个大标题，每个大标题有两个中标题，第个中标题有两个小标题。 7在字符串两边添加嵌套文字符号 如果要在字符串两边添加诸如括号、单引号和双引号之类的文字符号，可以使用content属性的open-quote属性值、close-quote属性值和quotes属性进行设置。 其中，open-quote属性值用于添加开始的文字符号，close-quote属性值用于添加结尾的文字符号，quotes属性用于指定使用什么文字符号。 示例：13-12 test3.html 编号嵌套 h1:before content:open-quote; h1:after content:close-quote; h1 quotes: ; ASP基础教程与实验指导 计算机组装 HTML 5从新手到高手 color:red; font-family:黑体; color:red; font-family:黑体; 在上述代码中，使用before选择器和after选择器在h1标签两侧添加“”和“”符号。