项目三--使用CSS样式美化网页.pptVIP

在HTML中使用CSS样式的方法 任务实施 1.站点配置 根据所提供的素材完成站点的配置。 2.手工编写HTML文件 在已经配置好的站点下创建网页文件index.html，网页的内容通过手工编定HTML代码来完成。 单元三：使用CSS样式美化页面 任务实施 3. 为网页设计CSS样式并应用 （1）设置body样式 重定义body标签，主要用于定义页面的整体设置。对于当前页面，需要进行整体设置的是页面文字和背景效果。 单元三：使用CSS样式美化页面 图 body的样式规则定义及效果 任务实施 3. 为网页设计CSS样式并应用 （1）设置body样式 样式代码如下： body { font-family: 宋体; font-size: 12px; color: #666; background-image: url(images/bodybg.gif); background-repeat: repeat-x; background-color: #D3F3FB; } 单元三：使用CSS样式美化页面 任务实施 3. 为网页设计CSS样式并应用 （2）重定义table标记 通过重定义table标记定义表格的整体效果，包括：宽度、边框、背景、文字对齐方式等。 单元三：使用CSS样式美化页面 图 table的样式规则定义 任务实施 3. 为网页设计CSS样式并应用 （2）重定义table标记 样式代码为： table { text-align: left; background-color: #FFF; border-bottom-width: 8px; border-bottom-style: double; border-bottom-color: ##32B5D2; width: 700px; } 单元三：使用CSS样式美化页面 图 table的样式规则定义 任务实施 3. 为网页设计CSS样式并应用 （3）重定义H2标记样式 H2的内容只有一幅图片，定义为居中显示。 单元三：使用CSS样式美化页面 h2 { text-align: center; height: 40px; } 任务实施 3. 为网页设计CSS样式并应用 （4）重定义H3标记样式 单元三：使用CSS样式美化页面 h3 { font-size: 13px; font-weight: bold; } 任务实施 3. 为网页设计CSS样式并应用 （5）分别定义类样式.title1,.title2,.title3 单元三：使用CSS样式美化页面 由于各H3标记对应的内容在颜色上是不一样的，所以分别定义三个类样式.title1,.title2,.title3来设置文字的颜色。.title1的样式定义规则如图所示。.title2和.title3的样式定义规则与.tilte1相同，只是文字颜色分别为#006600和#ff9933。 图 .title1的样式规则定 任务实施 3. 为网页设计CSS样式并应用 （5）分别定义类样式.title1,.title2,.title3 样式代码为： 单元三：使用CSS样式美化页面 .title1 { color: #006600; } .title3 { color: #ff9933; } .title2 { color: #206996; } 任务实施 3. 为网页设计CSS样式并应用 （5）分别定义类样式.title1,.title2,.title3 单元三：使用CSS样式美化页面 类样式定义完成后，分别应用在三个H3标记上，效果如图所示。 图 应用了类样式后的h3效果 任务实施 3. 为网页设计CSS样式并应用 （6）重定义P标记 单元三：使用CSS样式美化页面 p { line-height: 20px; text-indent: 2em; } 任务实施 3. 为网页设计CSS样式并应用 （7）设置底部图片之间的间距 为了控制底部两幅图片之间的距离，可以定义一个类样式.pic1（设置其margin属性），然后应用于第一幅图片的img标记上。 单元三：使用CSS样式美化页面 .pic1 { margin-right: 25px; margin-left