1、网页制作综合技术教程网页制作综合技术教程第第3 3部分部分 CSSCSS样式设计样式设计 手工编写页面手工编写页面9.19.1使用使用DreamweaverDreamweaver进行进行CSSCSS设置设置9.29.2复合选择器复合选择器9.39.3CSSCSS的继承特性的继承特性9.49.4CSSCSS的层叠特性的层叠特性9.59.59.1 9.1 手工编写页面手工编写页面图图9.1 体验体验CSS9.1.1 9.1.1 构造页面框架构造页面框架 图图9.3 加入图片加入图片9.1.2 9.1.2 设置标题设置标题图图9.4 修改标题样式修改标题样式9.1.3 9.1.3 控制图片控制图片图
2、图9.5 图文混排图文混排9.1.4 9.1.4 设置正文设置正文图图9.6 修改正文样式修改正文样式9.1.5 9.1.5 设置整体页面设置整体页面图图9.7 设置页面的整体效果设置页面的整体效果9.1.6 9.1.6 对段落分别进行设置对段落分别进行设置图图9.8 对段落进行不同的设置对段落进行不同的设置9.2 9.2 使用使用DreamweaverDreamweaver进行进行CSSCSS设置设置9.3 9.3 复合选择器复合选择器9.3.1 “9.3.1 “交集交集”选择器选择器 h3.class color: red; font-size: 12px; 选择器 属性 值 属性 值 声
3、明 声明 标记 类 图图9.28 标记类别选择器标记类别选择器 图图9.29 交集选择器示意图交集选择器示意图 图图9.30 标记标记.类别选择器示例类别选择器示例9.3.2 “9.3.2 “并集并集”选择器选择器图图9.31 并集选择器示意图并集选择器示意图9.3.3 9.3.3 后代选择器后代选择器在在CSS选择器中，还可以通过嵌套的方选择器中，还可以通过嵌套的方式对特殊位置的式对特殊位置的HTML标记进行声明，例标记进行声明，例如，当如，当与与之间包含之间包含标记时，就可以使用后代选择器进行相应的标记时，就可以使用后代选择器进行相应的控制。控制。 后代选择器的写法就是把外层的标记写后代选
4、择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格在前面，内层的标记写在后面，之间用空格分隔。分隔。当标记发生嵌套时，内层的标记就成为当标记发生嵌套时，内层的标记就成为外层标记的后代。外层标记的后代。9.4 CSS9.4 CSS的继承特性的继承特性9.4.1 9.4.1 继承关系继承关系 HTML CSS 选择器选择器 盒子模型盒子模型 浮动与定位浮动与定位 Javascript 此外，还需要掌握此外，还需要掌握： Flash Dreamweaver Photoshop 图图9.35 包含多层列表的页面包含多层列表的页面 图图9.36 继承关系树型图继承关系树型图9.4.2 C
5、SS9.4.2 CSS继承的运用继承的运用h1 color:blue;/* 颜色颜色 */ text-decoration:underline;/* 下画线下画线 */ em color:red;/* 颜色颜色 */ 图图9.37 父子关系示例父子关系示例 图图9.38 各级列表均变成绿色各级列表均变成绿色9.5 CSS9.5 CSS的层叠特性的层叠特性层叠特性层叠特性p color:green; .red color:red; .purple color:purple; #line3 color:blue; 这是第这是第1行文本行文本 这是第这是第2行文本行文本 这是第这是第3行文本行文本 这是第这是第4行文本行文本 这是第这是第5行行文本文本 图图9.40 层叠特性示意层叠特性示意
