第4篇 使用CSS样式.ppt

第4章 使用CSS样式 4.1 学习任务：认识CSS样式表 4.2 学习任务：CSS规则的定义和创建 4.3 学习任务：在网页文档中使用CSS样式 4.4 上机实训——用CSS美化网页 4.1 学习任务：认识CSS样式表 4.1.1 CSS的基本概念 4.1.2 CSS样式的引用 4.1.1 CSS的基本概念 早期的网页一般是由HTML标签控制的文本网页，随着Web的流行与发展，漂亮的外观变得越来越重要。一方面HTML在控制页面格式和外观上越来越力不从心；另一方面HTML标签中充斥了大量的对外观属性的定义，网页要表现的“内容”与如何“表现”内容混杂在一起，HTML代码变得越来越繁杂，大量的标签堆积在一起，难以阅读和理解。 1996年W3C（万维网联盟）提出了CSS技术规范，它以HTML语言为基础，提供了丰富的样式。应用了CSS样式的网页，将样式外观设置从HTML文档中分离出来，使代码清晰、容易维护。CSS一经引入即得到了广泛应用。 CSS是Cascading Style Sheets的缩写，又称层叠样式表或级联样式表，主要用于对网页中的文本或某一区块的布局、字体、颜色、背景和特效等进行精确控制。 4.1.2 CSS样式的引用 CSS样式既可以定义在外部CSS样式表文件中，也可以定义在HTML文档中。外部CSS样式表是专门保存CSS样式的文件，其文件名后缀为“.css”，可以用记事本等编辑软件打开、查看、编辑和创建。内部CSS样式表是将CSS样式定义在HTML文档中，根据定义位置的不同，分为内嵌样式和内联样式。 1．内联样式 “内联样式”方式直接将CSS样式嵌套在特定的HTML标签中。具体方法：选中需要添加样式的对象，在CSS“属性”面板中，“目标规则”设定为“新内联样式”，然后根据需要设置其它的属性。由于网页要表现的内容和内容要表现的样式混杂在一起，因此，这种方式不建议使用。 2．内嵌样式 “内嵌样式”方式将CSS样式嵌套在HTML文档的head标签内。具体方法： 1）选中一段内容，在CSS“属性”面板中，“目标规则”选为“新CSS规则”，单击【编辑规则】按钮，在“新建CSS规则”对话框中，“选择器类型”选择“ID”，在“选择器名称”输入框中输入“p1”，在“规则定义”列表框中选择“（仅限该文档）”，如图4-1所示。 2）单击【确定】按钮，打开“#p1的CSS规则定义”对话框，设置“Font-family”为宋体，“Font-size”为18px，“Color”为#F00，如图4-2所示，单击【确定】按钮完成设置。 “#p1的CSS规则定义”对话框中8类属性含义，将在4.3.3中作详细介绍。 3）选中另一段内容，重复上面的操作，区别是在“新建CSS规则”的“选择器名称”输入框中输入“p2”。从图4-3可见，style/style标签之间即为定义的CSS样式，实现了“内容”与“表现”的分离。p1、p2是为第一段p标签和第二段p标签设置的唯一的标识号（ID）。p标签中不再有CSS样式的定义，而是通过p1、p2来引用相应的样式定义。 3．外部样式表 “外部样式表”方式将CSS样式存储在外部样式表文件中。具体方法： 1）选中元素，在CSS“属性”面板中，“目标规则”选定为“新CSS规则”，单击【编辑规则】按钮，打开“新建CSS规则”对话框。在“选择器类型”下拉列表框中选择“ID”，在“选择器名称”输入框中输入“p1”，在“规则定义”下拉列表框中选择“新建样式表文件”。 2）单击【确定】按钮，弹出“将样式表文件另存为”对话框，如图4-4所示。在“文件名”输入框中输入“example”，Dreamweaver将自动为输入的文件名添加“.css”扩展名。 3）单击【保存】按钮，打开“#p1的CSS规则定义”对话框，从中设置Font-family、Font-size、Color等属性，单击【确定】按钮完成设置。 “外部样式表”方式是将CSS样式存储在外部的CSS文件中，例如：example.css。在HTML文档的head标签内，Dreamweaver将自动嵌入链接语句link href=example.css rel=stylesheet type=text/css /，其中“href”属性指定了外部CSS文件的名称，“type”属性指明了引用文件的类型为CSS文件，如图4-5所示。 需要修改网页内容的显示效果时，只需对外部样式表中的相关内容属性进行修改即可，网页中的HTML文档不需做任何修改。 通过以上3种方式的比较可以发现，使用CSS外部样式表，实现了“内容”与“表现”的完全分离，可以一次对若干个文档的样式进行控制，当CSS样式更新后，所有应用了该样式的文档都会自动更新。 4