HTML5+CSS3 使用content属性.docx
-
资源ID：3158237
资源大小：38.50KB
全文页数：7页
- 资源格式： DOCX
下载积分：6.99金币
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
HTML5+CSS3 使用content属性.docx
HTML5+CSS3 使用content属性HTML5+CSS3 使用content属性 除了可以使用before选择器和afte选择器的content属性，在标签中插入文字或图片之外，还可以为多个项目插入项目编号。 1在多个标题前加上连续编号 如果要针对多个标题添加连接编号，可以使用content属性中的counter属性，使用语法如下： <元素>:before Content:counter(计数器); 除了使用counter属性以外，还需要在样式中追加对元素的counter-increment属性的指定，使用语法如下： <元素> counter-increment:before或after指定的计数器名 示例：13-6 counter.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>counter属性使用</title> <style type="text/css"> p:after content:counter(count); p counter-increment:count; </style> </head> <body> <p>项目</p> <p>项目</p> <p>项目</p> <p>项目</p> <p>项目</p> </body> </html> 上述代码中，使用counter属性和counter-increment属性为p标签添加了一组连续编号。 项目编号 2在项目编号中追加文字 在项目中插入编号时，可以在项目编号中插入文字，增加对项目的修饰效果。使用语法如下： <元素>:before 示例：13-7 InsertCounter.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>在项目编号中插入内容</title> <style type="text/css"> h3:before content:'第'counter(count)'章 ' h3 counter-increment:count; </style> </head> Content:第counter(计数器)章; <body> <h3>HTML 5简介</h3> <h3>HTML 5结构</h3> <h3>多媒体播放</h3> <h3>本地存储</h3> <h3>表单与文件</h3> <h3>新增元素</h3> </body> </html> 在上述代码中，h3标签包含图书的章节名称，使用counter属性为章节添加了章节编号。 项目编号中追加文字 3指定编号的样式 为项目追加编号完成后，还可以指定编号的样式。例如，设置编号的字体、字体大小和字体颜色等内容。 示例：13-8 CounterCss.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>在项目编号中插入内容</title> <style type="text/css"> h3:before content:'第'counter(count)'章 ' color:red; font-family:黑体; font-size:24px; h3 counter-increment:count; </style> </head> <body> <h3>HTML 5简介</h3> <h3>HTML 5结构</h3> <h3>多媒体播放</h3> <h3>本地存储</h3> <h3>表单与文件</h3> <h3>新增元素</h3> </body> </html> 在上述代码中，设置项目编号的字体为黑体、字体大小为24像素、字体颜色为红色。 修改项目编号的样式 4指定编号的种类 使用before选择器或after选择器的content属性，不但可以在编号中追回文字和设置样式，还可以为编号设置编号类型。 指定编号类型可以使用list-style-type属性，常用的编号种类介绍如下。 名称 disc circle square 解释 列表项项目符号使用disc(通常为实心圆)。 列表项项目符号使用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 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>指定编号种类</title> <style type="text/css"> h3:before content:counter(count,upper-roman)'.' h3 counter-increment:count; </style> </head> <body> <h3>将alt属性的值作为图像的标题来显示</h3> 文字内容 <h3>使用content属性来插入项目编号</h3> 文字内容 <h3>在多个标题前加上连续编号</h3>文字内容 </body> </html> color:orange; font-family:黑体; font-size:24px; 在上述代码中，使用counter属性将编号类型设置为upper-roman。 修改编号5编号嵌套 在使用content属性指定编号时，可以在大编号中插入中编号，中编号中插入小编号。 示例：13-10 test.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>编号嵌套</title> <style type="text/css"> h1:before content:counter(count,upper-roman)'.' h1 counter-increment:count; h2:before content:counter(count1)'.' h2 counter-increment:count1; margin-left:50px; color:red; font-family:黑体; color:red; font-family:黑体; </style> </head> <body> <h1>创建网站及站点信息</h1> <h2>网站建设理论</h2> <h2>安装IIS服务器</h2> <h2>站点管理</h2> <h1>网站栏目及版块设计</h1> <h2>网页文本概述</h2> <h2>设计产品信息版块</h2> <h2>多彩文字设计</h2> </body> </html> 上述代码中，为页面添加了h1标签和h2标签。然后使用before选择器为h1和h2标签编号并设置编号的颜色和类型。 6中编号中嵌入大编号 在使用content属性指定编号时，可以在小编号中嵌入中编号，中编号中嵌入大编号，只需相应地在before选择器所指定的小编号中包括大编号与中编号，在before选择器所指定的中编号中包括大编号。 示例：13-11 test2.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>编号嵌套</title> <style type="text/css"> 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 counter-increment:count2; </style> </head> <body> <h1>创建网站及站点信息</h1> <h2>网站建设理论</h2> <h3>站点开发的流程</h3> <h3>网页制作过程</h3> <h2>安装IIS服务器</h2> margin-left:100px; color:red; font-family:黑体; counter-reset:count2; margin-left:50px; color:red; font-family:黑体; counter-reset:count1; color:red; font-family:黑体; <h3>Internet信息服务</h3> <h3>虚拟目录</h3> <h1>网站栏目及版块设计</h1> <h2>网页文本概述</h2> <h3>文字的格式化</h3> <h3>网页文字运用</h3> <h2>设计产品信息版块</h2> <h3>项目符号与编号</h3> <h3>设计过程</h3> </body> </html> 在页面中，包括两个大标题，每个大标题有两个中标题，第个中标题有两个小标题。 7在字符串两边添加嵌套文字符号 如果要在字符串两边添加诸如括号、单引号和双引号之类的文字符号，可以使用content属性的open-quote属性值、close-quote属性值和quotes属性进行设置。 其中，open-quote属性值用于添加开始的文字符号，close-quote属性值用于添加结尾的文字符号，quotes属性用于指定使用什么文字符号。 示例：13-12 test3.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>编号嵌套</title> <style type="text/css"> h1:before content:open-quote; h1:after content:close-quote; h1 quotes:"" "" </style> </head> <body> <h1>ASP基础教程与实验指导</h1> <h1>计算机组装</h1> <h1>HTML 5从新手到高手</h1> </body> </html> color:red; font-family:黑体; color:red; font-family:黑体; 在上述代码中，使用before选择器和after选择器在h1标签两侧添加“”和“”符号。
