项目任务5.1引用CSS样式表讲述.ppt

网站设计与网页制作 子项目5使用CSS样式美化首页 项目任务5.1 引用CSS样式表 课程内容 引入CSS样式表 设置页面样式 使用DIV+CSS布局首页 ★ 项目分析 如果要统一网站中网页元素的格式，需要使用CSS样式表。 样式表也叫CSS（cascading style sheet，层叠样式表）。现代网页制作离不开 CSS技术，采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制，可以调整字间距、行间距、取消链接的下划线、固定背景图像等HTML标记无法表现的效果。 样式表的优点就是，在对很多网页文件设置同一种属性时，无须对所有文件反复进行操作，只要应用样式表就可以更加便利地、快捷地进行操作。 此外，CSS的主要优点是容易更新，只要对一处CSS规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。 ★ 技能要求 （1）学会创建CSS样式。 （2）掌握CSS的基本语法。 （3）学会在Dreamweaver设计视图和代码视图中引用样式表和编写CSS样式 ★ 项目展示 使用样式表前后得到的效果 ★ 任务实施 初识CSS CSS格式设置规则由两部分组成：选择器和声明。声明由属性（如font-family）和值（如宋体）两部分组成。 a { font-family: 宋体; font-size: 12px; font-weight: bold;} ★ 任务实施 熟悉样式表种类和CSS选择器 1．根据运用样式表的范围分类 （1）内联样式。 p style=font-size:12px;color:red;这个style定义段落中的字体是12像素的红色字/p。 （2）内部样式表。 head title我的E站/title style type=text/css !-- p{ font-family: 宋体; font-size: 12px;color: red;} -- /style /head （3）外部样式表。可以把所有的样式存放在一个以.css为扩展名的文件里，然后将这个CSS文件链接到各个网页中。 ★ 任务实施 在页面中引入CSS样式表 1．在CSS面板中引入样式表 2．在代码视图中引入样式表 link href=styles/efp.css rel=stylesheet type=text/css ★ 任务实施 熟悉CSS样式代码编写规则 1. 基本语法 CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。 基本格式如下： selector {property: value} （选择符 {属性：值}） 2. 选择符组 我们可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义. p, table{ font-size: 9pt } 效果等效于：p { font-size: 9pt }，table { font-size: 9pt }。 ★ 任务实施 3. 类选择符 用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。 定义一个类：p.right {text-align: right} 在HTML标记里加入定义的class参数：p class=right 这个段落向右对齐的/p 4. ID选择符 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把class换成id即可。定义ID选择符要在ID名称前加上一个“#”号。 P#right {text-align: right} ★ 任务实施 5. 包含选择符 可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：table a{font-size: 12px} 6. 锚的伪类 我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover。我们把它们分别定义不同的效果： a:link {color: #ff0000; text-decoration: none} /* 未访问的链接 */ a:visited {color: #00ff00; text-decoration: none} /* 已访问的链接 */ a:hover {color: #ff00ff; text-decoration: underline} /* 鼠标