项目七 利用CSS美化网站.ppt

项目七 利用CSS美化网站 任务一 创建及应用CSS 【知识目标】 1.了解CSS的功能 2.掌握CSS规则的定义 3.掌握CSS的创建和应用 4.掌握CSS的编辑方法 任务一 创建及应用CSS 【技能目标】 1.能根据页面需要，合理定义CSS规则 2.能利用Dreamweaver创建及应用CSS 3.能利用Dreamweaver编辑CSS 任务一 创建及应用CSS 【项目描述】 本项目主要学习利用CSS设计网页，在图7-1的基础上，通过CSS样式设计，实现GS创意家居网站首页。本任务主要整体规划页面样式，定义GS创意家居网站首页需要的样式规则。 7.1.1 项目准备 1.CSS概述 CSS是Cascading Style Sheets（层叠样式表）的简称，是W3C组织指定的一种网页新技术，可以精确控制页面布局、文本、颜色、背景、边框和其他页面效果。 2.CSS特点 可以灵活控制网页中各种元素的外观和位置。 可以为网页中的元素设置各种过滤器，从而产生诸如阴影、模糊等只有在图像处理软件中方可实现的效果，美化页面效果。 可以结合脚本语言，实现多种动态效果。 可以更快更容易地维护及更新大量的网页。 3.CSS规则 什么是CSS规则？ CSS样式的一大特性就是能向文档中的一组元素类型应用某些规则 CSS规则组成 规则由选择器和声明块组成，声明块包含一个或多个声明，每个声明则是一个“属性:值”对。 4.CSS选择器类型 标签选择器 网页文档的标签选择器是最基本的选择器。在CSS中，可以对某一具体标签的样式进行重新定义。 td{background-color：#ff0000} 类选择器 要应用样式而无需考虑具体涉及的元素，最常用的方法就是使用类选择器。在 CSS 中，类选择器以类名前有一个点号显示： .title{ font-size: 30px } ID选择器 ID选择器可以为标有特定 id 的 HTML 元素指定特定的样式，以id前一个#号显示。 #title{ font-size: 30px } 后代选择器 5.CSS样式面板 打开面板 选择菜单【窗口】，单击【CSS样式】，显示CSS样式表面板 面板的构成： 规则列表：位于面板1区，显示规则（选择器）名称。 属性列表：位于面板2区，显示该规则对应的属性及属性值。点击【添加属性】，则可为该规则添加一个声明。 控制按钮：位于面板右下角，包含附加样式表按钮、新建CSS样式按钮、编辑样式按钮、删除CSS样式按钮。通过这四个按钮，可完成有关样式的主要操作。 显示按钮：位于面板左下角，设置属性列表不同的显示方式，包含显示类别视图按钮、显示列表视图按钮、只显示设置属性按钮。 6.创建及应用CSS样式 创建样式 选择菜单栏【窗口】，单击【CSS样式】，打开CSS样式面板。 单击CSS样式面板右下角新建CSS样式按钮，弹出【新建CSS规则】对话框，如下图所示。 6.创建及应用CSS样式 应用样式 直接引用式 这种方法是将CSS样式直接作用于HTML标签 。 内部文档引用式 这种方法是CSS样式定义于页面文档的head/head之间，作用的范围是当前的HTML文档。 外部文档引用式 这种方式CSS样式定义于CSS样式表文件，要使用其中定义的规则，首先应将CSS样式表附加到页面文档。 7.1.2 项目实现 1.规划页面 根据分析，可以将GS创意家居网站首页所需的CSS规则归纳如下表所示。 2.创建样式表文件 文件名为：webstyle.css 3.附件样式表 7.1.3 知识拓展 1.继承性 CSS样式同样具备编程语言的一样的继承性，它允许样式在应用于某个特定的元素的同时，还可以作用于它的后代元素。 2.层叠性 当多条CSS规则作用于一个对象，就出现了样式的层叠现象。 如果这些规则中的属性没有冲突，则这个对象的样式即为这些规则的属性和 2.层叠性 若规则之间属性冲突，则那条属性占优呢？ CSS样式的优先级定义如下： 规则定义的位置不同，其优先级也不同。直接引用式优先于内部文档引用式，内部文档引用式优先于外部文档引用式； 选择器的类型不同，优先级也不同。首先，不同类型的选择符分配不同的权值： 标签选择符：权值为1； 类选择符：权值为10； ID选择符：权值为100； 伪元素选择符：权值为1。然后，每条规则的权值以如下方式进行计算： 统计选择符中的标签个数，然后乘以1； 统计选择符中的ID属性个数，然后乘以10；? 统计选择符中的CLASS属性个数，然后乘以100。以此方法为标准，最后将所有权值相加，即可得到当前规则的总权 值，最后根据权值大小来觉得哪条规则优先级大。 7.1.4 项目训练 根据效果图，制