第七章第七章.ppt

第7章CSS样式网页设计与制作DreamweaverCC标准教程

本章学习的主要内容：1.CSS样式构造规则及意义2.利用CSS设计器创建各种样式3.利用CSS设计器创建文本导航条4.利用CSS设计器创建CSS过渡效果5.利用CSS设计器创建CSS动画效果

7.1CSS样式CSS（CascadingStyleSheet）样式称为层叠样式表。CSS样式是描述网页元素格式的一组规则，用于设置和改变HTML语言网页的外观。

7.1CSS样式7.1.1CSS样式标准7.1.2CSS样式构造规则7.1.3CSS样式种类7.1.4CSS样式应用范围

7.1.1CSS样式标准CSS样式是W3C组织定义的HTML语言网页外观描述的方法。1996年12月，CSS1.0规范正式发布，成为W3C的推荐标准。1998年5月，CSS2.0规范出版。2001年5月，W3C开始制定CSS3.0规范的草案，该规范至今没有定稿。CSS3.0是最新的CSS标准。采用CSS样式不仅可以对一个网页的布局、字体、图像、

背景及其它元素外观进行精确控制，还可以对一个网站

的所有网页进行有效的统一控制。

7.1.2CSS样式构造规则CSS样式是由三个要素对象、属性和属性值构成的。对象是CSS样式所作用和控制的网页元素，属性是CSS样式描述和设置对象性质的项目，属性值是属性的一个实例。Body{font-family：宋体；font-size：15px；color：red；text-decoration：underline；}页面文字{字体：宋体；大小：15像素；颜色：红色；装饰：下划线}

7.1.3CSS样式种类根据CSS样式所控制的网页元素不同，可以将样式分为四种形式。当所控制的网页元素是HTML语言中的某一个特定的标签时，为此标签设置的CSS样式，称为标签样式。当把网页中或网站中若干元素归为一类，作为一个整体

来看待，为此类元素设置一个CSS样式，称为类样式。

7.1.3CSS样式种类一个标签或元素在网站中的不同网页中，或在一个网页中的不同位置上，外观效果不同，则需要先为该特定标签赋予一个唯一的ID号，然后，再为具有该ID号的标签设置样式，称此样式为ID样式。当设置若干个内容相同而名称不同样式时，或者设置超级

链接样式时，则可以使用复合样式。

7.1.4CSS样式应用范围应用CSS样式涉及3个范围，在一个标签中，在一个网页中，在整个网站中。当CSS样式写在一个特定标签里，只对该标签发生作用时，则该样式被称为内联样式。当CSS样式只应用于一个网页时，常常将样式与网页存储在同一个

网页文档中，则该样式仅在一个网页中起作用，称为内部样式。由

于这种方法简单，在平时练习中经常使用。

7.1.4CSS样式应用范围当CSS样式存在于一个CSS样式文档中，独立于任何一个网页，为整个网站所拥有，则该样式在网站中所有的网页中起作用，称为外部样式。当任何一个网页需要此样式时，只需将该特定的网页与CSS文档链接即可。在实际应用中，一般采用外部样式，保证整个网站外

观风格和效果的一致性。

7.2CSS样式设计器在DreamweaverCC中，CSS样式定义和使用有两种方法。一是应用CSS样式对话框，二是使用CSS设计器。在CSS设计器中，“源”确定样式应用范围，“@媒体“定义媒体查询，”选择器”选择样式类型和确定样式名称，“属性”定义和选择

属性值。

7.2CSS样式设计器7.2.1CSS样式选择器7.2.2课堂案例-美好摄影7.2.3CSS样式的使用7.2.4CSS样式的编辑

7.2.1CSS样式选择器1.重建HTML标签样式，自动更新2.创建类样式3.创建ID样式4.复合样式

7.2.2课堂案例-美好摄影案例学习目标：学习使用各种CSS样式。案例知识要点：在【CSS设计器】面板中，点击【源】选项卡中的按钮，选定样式的存储位置；点击【选择器】选项卡中的按钮，设置标签样式、ID样式、类样式和复合样式等；点击【属性】选项卡中的按钮，完成属性的设置。素材所在位置：案例素材/ch07/课堂案例-美好摄影。案例效果如图7-9和图7-10所示。

7.2.3CSS样式的使用1.定义内部样式2.移动CSS规则3.定义外部样式文件4.附加样式表文件

7.2.4CSS样式的编辑编辑样式有2种方法。（1）使用CSS设计器（2）使用【代码】视图

7.3CSS属性CSS属性是CSS样式的主要内容，它控制和改变网页元素的格式和外观。本节以CSS设计器为参照，将CSS属性分为包括4类：布局、文字、边框和背景。

7.3CSS属性7.3.1课堂案例-走进台湾7.3.2用<ul>和<li>设置导航条7.3.3布局7.3.4文字