周欣然《网页设计技术与应用》第6章　CSS样式表及网页格式化 2013.pptVIP

第6章 CSS样式表及网页格式化 6.1 CSS样式规则创建修改操作 6.2 CSS样式规则语法格式及引用形式 6.3 CSS样式规则管理操作 6.4 CSS样式引入形式 6.5 CSS规则优先级 6.1 CSS样式规则创建修改操作 1 CSS（ Cascading Style Sheets，即层叠样式表 ）功能 6.1 CSS样式规则创建修改操作 1 CSS样式功能 6.1 CSS样式规则创建修改操作 4）选中文字段落标签，在属性面板将style_1 规则挂接到文字段落上。 6.1 CSS样式规则创建修改操作 过程总结如下： 建样式表→将CSS样式规则挂接到网页元素 或 标签上， 或者 选中网页元素 或 标签上→从鼠标快捷菜单选择【新建】项， 6.1 CSS样式规则创建修改操作 3 样式规则修改方式 6.1 CSS样式规则创建修改操作 3 样式规则存储（定义）位置 6.2 CSS 语法格式及引用形式 6.2 CSS 语法格式及及引用形式 6.2 CSS 语法格式及及引用形式 6.2 CSS 语法格式及及引用形式 6.3 CSS样式规则管理操作 规则管理： 复制、 改名、 移动、 应用/挂接、 剪切、 删除、 附加：将CSS文件的规则 引入到当前网页。 6.4 CSS样式引入形式 6.5 CSS规则优先级 实 验 1 效果 2 要求 ① 网页中创建4个CSS样式，分别是 .body——用于设置背景， .box1——用于设置图片的环绕效果， .box2——用于设置正文的字体、背景、缩进、边距， .title——用于设置标题的滤镜效果。 ② 选定不同的对象，应用CSS样式。 总 结 CSS的优点：将网页格式控制部分从网页代码分离出来，使得网页内容、格式两部分可分开设计、存储，一个CSS代码文件可以被多个网页共享，浏览多个网页，下载一次CSS文件就可以了。 创建、编辑、应用CSS样式操作。 学习资料： 《CSS 3 参考手册 4.0.chm》 * 设置网页元素的格式 外观。 2 用CSS设置文字格式示例 将某段落文字设为红色、24像素字体。步骤： 1）在CSS样式面板区域按鼠标右键选择【新建】项， 2）在新建CSS规则对话框输入选择器名称文本框输入 style_1， 3）在CSS规则定义对话框如下设置字体大小、颜色，并点确定按钮，即定义了style_1规则。 设置网页元素的格式 外观。 2 用CSS设置文字格式示例 将某段落文字设为红色、24像素字体。步骤： 1）在CSS样式面板区域按鼠标右键选择【新建】项， 2）在新建CSS规则对话框输入选择器名称文本框输入 style_1， 3）在CSS规则定义对话框如下设置字体大小、颜色，并点确定按钮，即定义了style_1规则， 在代码视图可看到样式表。 效果如下： 代码视图： 无:表示当前没挂接规则，也可取消已挂接的规则。 1）用CSS规则定义对话框修改： 2）在代码视图，挨着分号敲空格后用智能提示修改： 1）存于网页文件的头部 2）存于独立的CSS文件（推荐） 新建规则时选择将规则定义在新建文件或已有的CSS文件。 一个CSS样式表：一系列规则 每条规则： 选择器 和 声明（属性 : 值） .style_1 { font-size: 24px; color: #F00; } 选择器说明该规则怎样与网页标签关联，或者说从网页中选择标签的方式。种类如下： 1 类选择器规则 .important {color:red;} 引用方式: (多次) p class=“important” 这段重要. /p h1 class=“important” 标题一重要. /h1 p.important {color:red;} h1.important {color:blue;} .warning {font-style:italic;} p class=“important warning”这段 important warning./p 2 ID类选择器规则 #intro {font-weight:bold;} p id=introThis is a paragraph of introduction./p 一个网页中只引用一次！ 3 元素选择器 （标签……） p {color:gray;} 4. 选择器分组 h2, p {color:gray;} 5. 属性…… (具有 某属性 的 某标签) a[title=“W3”]{color: r