网页设计与制作项目式教程 教学课件 作者 凌云项目七项目七 利用CSS美化网站.ppt

《网页设计与制作项目式教程 教学课件 作者 凌云项目七项目七 利用CSS美化网站.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目七利用CSS美化网站任务一创建及应用CSS【知识目标】1.了解CSS的功能2.掌握CSS规则的定义3.掌握CSS的创建和应用4.掌握CSS的编辑方法任务一创建及应用CSS【技能目标】1.能根据页面需要，合理定义CSS规则2.能利用Dreamweaver创建及应用CSS3.能利用Dreamweaver编辑CSS任务一创建及应用CSS【项目描述】本项目主要学习利用CSS设计网页，在图7-1的基础上，通过CSS样式设计，实现GS创意家居网站首页。本任务主要整体规划页面样式，定义GS创意家居网站首页需要的样式规则。图7-1不带CSS样式的

2、GS创意家居网站首页7.1.1项目准备1.CSS概述CSS是CascadingStyleSheets（层叠样式表）的简称，是W3C组织指定的一种网页新技术，可以精确控制页面布局、文本、颜色、背景、边框和其他页面效果。2.CSS特点可以灵活控制网页中各种元素的外观和位置。可以为网页中的元素设置各种过滤器，从而产生诸如阴影、模糊等只有在图像处理软件中方可实现的效果，美化页面效果。可以结合脚本语言，实现多种动态效果。可以更快更容易地维护及更新大量的网页。3.CSS规则什么是CSS规则？CSS样式的一大特性就是能向文档中的一组元素类型应用某些

3、规则CSS规则组成规则由选择器和声明块组成，声明块包含一个或多个声明，每个声明则是一个“属性:值”对。P{font-family:"宋体";font-size:9pt;color:#666666;}选择器声明块声明声明声明4.CSS选择器类型标签选择器网页文档的标签选择器是最基本的选择器。在CSS中，可以对某一具体标签的样式进行重新定义。td{background-color：#ff0000}类选择器要应用样式而无需考虑具体涉及的元素，最常用的方法就是使用类选择器。在CSS中，类选择器以类名前有一个点号显示：.title{font-s

4、ize:30px}ID选择器ID选择器可以为标有特定id的HTML元素指定特定的样式，以id前一个#号显示。#title{font-size:30px}后代选择器5.CSS样式面板打开面板选择菜单【窗口】，单击【CSS样式】，显示CSS样式表面板面板的构成：规则列表：位于面板1区，显示规则（选择器）名称。属性列表：位于面板2区，显示该规则对应的属性及属性值。点击【添加属性】，则可为该规则添加一个声明。控制按钮：位于面板右下角，包含附加样式表按钮、新建CSS样式按钮、编辑样式按钮、删除CSS样式按钮。通过这四个按钮，可完成有关样式的主要

5、操作。显示按钮：位于面板左下角，设置属性列表不同的显示方式，包含显示类别视图按钮、显示列表视图按钮、只显示设置属性按钮。111216.创建及应用CSS样式创建样式选择菜单栏【窗口】，单击【CSS样式】，打开CSS样式面板。单击CSS样式面板右下角新建CSS样式按钮，弹出【新建CSS规则】对话框，如下图所示。6.创建及应用CSS样式应用样式直接引用式这种方法是将CSS样式直接作用于HTML标签。内部文档引用式这种方法是CSS样式定义于页面文档的之间，作用的范围是当前的HTML文档。外部文档引用式这种方式CSS样

6、式定义于CSS样式表文件，要使用其中定义的规则，首先应将CSS样式表附加到页面文档。7.1.2项目实现1.规划页面根据分析，可以将GS创意家居网站首页所需的CSS规则归纳如下表所示。CSS规则选择器说明导航栏table.nav定义导航栏表格的类属性为nav，如此导航栏文本的CSS规则选择器名称设置为“table.nava”即可中间内容创意产品td.title定义标题栏单元格的类属性为titleul.content01定义内容单元格中项目列表的类属性为content01热门关注td.title定义标题栏的类属性为titleul.cont

7、ent01定义内容单元格中项目列表的类属性为content01创意设计td.title定义标题栏的类属性为titleul.content02定义内容单元格中项目列表的类属性为content02新鲜原创p由于页面中仅此一处存在段落元素，因此要设计这部的样式直接采用标签选择器即可联系我们td.title定义标题栏的类属性为title2.创建样式表文件文件名为：webstyle.css3.附件样式表7.1.3知识拓展1.继承性CSS样式同样具备编程语言的一样的继承性，它允许样式在应用于某个特定的元素的同时，还可以作用于它的后代元素。2.层叠

8、性当多条CSS规则作用于一个对象，就出现了样式的层叠现象。如果这些规则中的属性没有冲突，则这个对象的样式即为这些规则的属性和2.层叠性若规则之间属性冲突，则那条属性占优呢？CSS样式的优先级定义如下：规则定义的位置不同，