DW第10章-使用CSS样式表美化网页.pptVIP

教学内容：CSS是Cascading Style Sheet的缩写，又称为“层叠样式表”，简称为样式表。它是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。掌握基于CSS的网页布局方式，是实现Web标准的基础。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 第10章 使用CSS样式表美化网页 教学重点 了解CSS样式表 CSS的使用 设置CSS属性 应用CSS样式定义字体大小 应用CSS样式制作阴影文字 10.1 了解CSS样式表 样式表首要目的是为网页上的元素精确定位。其次，它把网页上的内容结构和格式控制 相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要 通过使用格式来控制。内容结构和格式控制相分离，使得网页可以仅由内容构成，而将所有网页的格式通过CSS样式表文件来控制。 10.2 CSS的使用 掌握基于CSS的网页布局方式，是实现Web标准的基础。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 CSS的语法结构仅由3部分组成，选择符、样式属性和值，基本语法如下。 选择符{样式属性：取值；样式属性：取值；样式属性：取值；……} 10.2.1 CSS基本语法 添加CSS有4种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。下 面分别介绍。 10.2.2 添加CSS的方法 控制网页元素外观的CSS样式用来定义字体、颜色、边距和字间距等属性，可以使用Dreamweaver来对所有的CSS属性进行设置。CSS属性被分为【类型】、【背景】、【区块】、【方框】、【边框】、【列表】、【定位】、【扩展】、【过渡】9大类，下面分别进行介绍。 10.3 设置CSS属性 在CSS样式定义对话框左侧的【分类】列表框中选择【类型】选项，在右侧可以设置CSS样式的类型参数 。 10.3.1 设置CSS类型属性 使用【CSS规则定义】对话框的【背景】类别可以定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性。 10.3.2 设置CSS背景属性 使用【CSS规则定义】对话框的【区块】类别可以定义标签和属性的间距和对齐设置，对话框中左侧的【分类】列表中选择【区块】选项，在右侧可以设置相应的CSS样式。 10.3.3 设置CSS区块属性 10.3.4 设置CSS方框属性 使用【CSS规则定义】对话框的【方框】类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用【全部相同】设置将相同的设置应用于元素的所有边。 CSS的【边框】类别可以定义元素周围边框的设置，如图10-5所示。 10.3.5 设置CSS边框属性 10.3.6 设置CSS列表属性 CSS的【列表】类别为列表标签定义列表设置，如图10-6所示。 CSS的【定位】样式属性使用【层】首选参数中定义层的默认标签，将标签或所选文本块更改为新层，如图10-7所示。 10.3.7 设置CSS定位属性 【扩展】样式属性包含两部分，如图10-8所示。 10.3.8 设置CSS扩展属性 【过渡】样式属性包含所有可动画属性，如图10-9所示。 10.3.9 设置过渡样式 CSS可以说是一门语言，浏览器借助它来读懂网页设计，并准确地在页面上显示出来 。 10.4 实战演练 利用CSS可以固定字体大小，使网页中的文本始终不随浏览器改变而发生变化，总是保持着原有的大小，具体操作步骤如下。 10.4.1 实例1-应用CSS样式定义字体大小 有两种CSS滤镜能够使文字产生阴影效果，分别是Drowshadow和Shadow，它们产生的效果略有所不同。制作阴影字的操作步骤很简单，只要在CSS样式中重新选择一种滤镜即可，具体操作步骤如下。 10.4.2 实例1-应用CSS样式制作阴影文字 *