使用CSS样式表美化布局网.ppt

第10章 使用CSS样式表美化布局网页,教学重点了解CSS样式表CSS基本语法添加CSS的方法设置CSS属性,10.1了解CSS样式表,CSS（Cascading Style Sheet，层叠样式表）是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。,10.2CSS的使用,掌握基于CSS的网页布局方式，是实现Web标准的基础。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。,CSS基本语法CSS的语法结构仅由3部分组成，选择符、样式属性和值，基本语法如下。选择符样式属性：取值；样式属性：取值；样式属性：取值；,添加CSS的方法添加CSS有4种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。,控制网页元素外观的CSS样式用来定义字体、颜色、边距和字间距等属性，可以使用Dreamweaver来对所有的CSS属性进行设置。CSS属性被分为【类型】、【背景】、【区块】、【方框】、【边框】、【列表】、【定位】、【扩展】、【过渡】9大类。,10.3设置CSS属性,在CSS样式定义对话框左侧的【分类】列表框中选择【类型】选项，在右侧可以设置CSS样式的类型参数，如图10.1所示。,设置CSS类型属性,使用【CSS规则定义】对话框的【背景】类别可以定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性，如图10.2所示。,设置CSS背景属性,使用【CSS规则定义】对话框的【区块】类别可以定义标签和属性的间距和对齐设置，对话框中左侧的【分类】列表中选择【区块】选项，在右侧可以设置相应的CSS样式，如图10.3所示。,设置CSS区块属性,设置CSS方框属性使用【CSS规则定义】对话框的【方框】类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置。,设置CSS边框属性CSS的【边框】类别可以定义元素周围边框的设置，如图10.5所示。,CSS的【列表】类别为列表标签定义列表设置，如图10.6所示。,设置CSS列表属性,设置CSS定位属性CSS的【定位】样式属性使用【层】首选参数中定义层的默认标签，将标签或所选文本块更改为新层，如图10.7所示。,设置CSS扩展属性【扩展】样式属性包含两部分，如图10.8所示。,10.3.9 设置过渡样式【过渡】样式属性包含所有可动画属性，如图10.9所示。,10.4实战演练CSS可以说是一门语言，浏览器借助它来读懂网页设计，并准确地在页面上显示出来。,实例1应用CSS样式定义字体大小利用CSS可以固定字体大小，使网页中的文本始终不随浏览器改变而发生变化，总是保持着原有的大小，CSS固定字体大小的效果如图10.10所示。,本例讲述制作阴影文字效果如图10.17所示。,实例2应用CSS样式制作阴影文字,