网页格式刷.pptxVIP

《网页格式刷》 ——CSS样式表 制作人:蔡彬灏什么是CSS样式表？ CSS样式表一般指CSS（层叠样式表） 层叠样式表是一种用来表现/view/692.htmHTML（/view/5286041.htm标准通用标记语言的一个应用）或/view/63.htmXML（/view/5286041.htm标准通用标记语言的一个子集）等文件样式的/view/246483.htm计算机语言。/subview/15916/5236733.htm CSS目前必威体育精装版版本为/view/1713027.htmCSS3，是能够真正做到/view/828.htm网页表现与内容分离的一种样式设计语言。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样式表来美化自己的网页。谢谢