网页格式刷资料.pptx

《网页格式刷》 ——CSS样式表 制作人:蔡彬灏 什么是CSS样式表？ CSS样式表一般指CSS（层叠样式表） 层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。 CSS优点 1、避免在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、字号、颜色），从而使应用该样式的网页具有相同的风格。 2、只需要修改一个CSS代码就可以改变页数不定的网页外观和格式，提高网页编辑效率。 3、可以“随心所欲”地控制页面布局和外观。 4、在所有浏览器和平台之间具有较好的兼容性。 如何在HTML中加入样式？ 1、嵌入式样式表 方法：只需在每个要应用样式的HTML的标记后写上CSS属性就可以了。 　　　　　CSS属性书写格式：style=“color:red;font-family:黑体;font-size:24pt” 　　　　　 注意：color的属性值还可以用颜色代码，如：#ff0000。 将网页中文章标题文字“秋天的童话·如梦”用嵌入式样式表设置成：#ff9900，30pt，黑体。（效果如下图） 课堂练习 用嵌入式样式表来为网页中的文字设置外观不太方便，嵌入式样式表主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。这种样式表并不能充分体现出CSS样式表的优越性。 嵌入式样式表的不方便之处 2、内联式样式表 (1)在网页的head /head定义样式，如： 　　　　　　　　　style type=“text/css” .a1 {color:green;font-size:14pt;font-family:黑体} /style (2)在要设置此样式的文字头插入span class=a1,文字尾插入/span,如： span class=a11、提示一些不相干的话。/span 　　　　 注意：a1为定义的样式名，不同的网页，样式名可以不同。 用内联式样式将网页中的9个小标题字体设置为：绿色、14pt、黑体。（效果如下图） 课堂练习 用内联式样式表制作超链接文字的动态效果：当鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。（效果如下图） 3、外联式样式表 (1)将样式定义成一个“.css”的文件： 可在记事本中输入样式代码，然后保存为扩展名为“.css”的文件。 (2)在网页的head区插入引用代码： link href=“样式表文件名.css” rel=stylesheet type=“text/css” 　　　　　 注意：标签中的属性没有前后次序要求。 用外联式样式表制作超链接文字的动态效果： 当鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。 课后作业 通过这节课的学习，同学们知道了什么是CSS样式表，掌握了三种CSS样式表的使用。同学们通过实践操作，也体会到了使用CSS样式表可以避免很多重复操作，从而提高网页编辑和修改的效率。希望同学们以后在自己制作网站时，能灵活运用CSS样式表来美化自己的网页。 谢谢