第6章_CSS样式表.ppt

第6章CSS样式表 学习目标 CSS样式表概述CSS样式表的应用CSS样式表的使用方法利用CSS样式表制作网页 主要内容 6 1CSS样式表概述6 2CSS样式表的应用6 3CSS样式表基本语法6 4CSS选择器6 5CSS使用方法6 6实例 使用CSS样式控制页面6 7DIV CSS布局 6 1CSS样式表概述 CSS样式表的适用场合保证一个网页上相同要素具有一致的风格 可以使用CSS样式表为了保证同一个网站上多个网页风格一致 使这些网页上相同要素具有相同的样式通过CSS样式定义DIV标签 实现网页布局设计多个网页上存在多个方框或边框要求样式一致CSS样式表应用举例 实例1 通过CSS样式表控制主页中字体及超级链接样式 实例2 使用CSS样式表为多个网页设置相同的样式 6 2CSS基本语法 CSS的基本语句的结构是这样的 选择器 属性 属性值 CSS就是由3个基本部分组成 选择器 属性 和 属性值 CSS的核心思想就是首先指定对什么 选择器 进行设置 然后指定对该对象的哪个方面的 属性 进行设置 最后给出该设置的 值 6 3CSS选择器 在CSS的3个组成部分中 对象 很重要 它指定了对哪些页面元素进行设置 因此它有一个专门的名称 选择器 选择器是CSS中很重要的概念 所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的 在CSS中 有几种不同类型的选择器 基本选择器有标记选择器 类别选择器 ID选择器3种 6 3 1标记选择器 一个HTML页面由很多不同的标记组成 而CSS标记选择器就是声明哪些标记采用哪种CSS样式 因此每一种HTML标记的名称都可以作为相应的标记选择器的名称 例如P选择器就是用于声明页面中所有标记的样式风格 P color red font size 30px h1 color blue font size 60px 6 3 2类别 class 选择器 标记选择器一旦声明 那么页面中所有的相应标记都会相应地产生变化 例如当声明了标记为红色时 页面中所有的标记都将显示红色 如果希望其中的某一个标记不是红色 而是蓝色 这时仅依靠标记选择器是不够的 还需引入类别 class 选择器 class选择器的基本语法 对象名 属性 属性值 green color green font size 30px aaa color abc123 font size 30px class选择器的引用 所以的HTML标记中都有一个属性是class 只需给相应标记的class属性进行声明即可 计算机基础 在实际制作中 有时会将两种或两种以上的样式运用到一个标记中 在这里可以给一个标记运用多个class选择器 a1 color green a2 font size 40px 计算机基础 6 3 3ID选择器 ID选择器的使用方法跟class选择器基本相同 不同之处在于ID选择器只能在HTML页面中使用一次 在HTML的标记中只需要利用id属性 就可以直接调用CSS中的ID选择器 ID选择器的基本语法 对象名 属性 属性值 green color green font size 30px aaa color abc123 font size 30px 6 4CSS的使用方法 如何在HTML中使用CSS 包括行内式 内嵌式 链接式 导入式 6 4 1行内式 行内式是所有样式方法中最为直接的一种 它直接对HTML的标记使用style属性 然后将CSS代码直接写在其中 例如欢迎 6 4 2内嵌式 内嵌式样式表就是将CSS写在与之间 并用和标记进行声明 可以看出所有CSS的代码被集中在了同一个区域 方便了后期的维护 内嵌式样式表只对所在的网页有效 h1 color FFFFFF background color 0000ff text indent 2em padding 15px 6 4 3链接式 链接式CSS样式是使用频率最高 也是最为实用的方法 它将HTML页面本身与CSS样式风格分离为两个或多个文件 实现了页面框架HTML代码与美工CSS代码的完全分离 使得前期制作和后期维护都十分方便 6 4 3链接式 语法 type属性用于指定媒体类型 text css是一个层叠样式表rel属性用于定义连接的文件和HTML文档之间的关系 例如 import02 css 6 4 4导入式 6 4 4导入式 导入式样式表与链接式样式表的功能基本相同 只是语法和运作方式上略有区别 导入式是在HTML文件初始化时被导入到HTML文件内 作为文件的一部分采用import方式导入样式表 常用的方法如下 importurl sheet css importurl sheet css importsheet css import sheet css import sheet css 6 4 5用脚本来运用CSS样式 用脚本来运用CSS样式 可以在网页上产生一些动态的效果 如动态地改变字体 颜色 背景 文本属性等 例如变为红色 6 5CSS样式表的应用 在Dreamweaver中定义CSS样式表创建CSS样式表修改CSS样式表删除CSS样式表CSS样式表的使用方法CSS样式表的语法结构选择符 属性1 值1 属性2 值2 选择符可以是类 ID或标签之一 参数说明 属性和属性值之间用 隔开 多个属性之间用 隔开CSS样式表的使用方法方法一 内联式样式单方法二 嵌入式样式单方法三 外部式样式单 6 6实例 使用CSS样式控制页面 创建内嵌式CSS样式表打开 窗口 菜单 单击 CSS样式 命令 或者用快捷键shift F11 打开CSS面板在CSS面板下方单击 新建CSS规则 按钮 打开下列对话框 6 6实例 使用CSS样式控制页面 设置完成后单击 确定 按钮 打开下列对话框 按图中所示设置对话框上参数 6 6实例 使用CSS样式控制页面 创建外部链接式CSS样式表打开CSS面板 方法同前打开新建CSS规则对话框 按下图进行参数设置 规则定义列表框一定要选择 新建样式表文件 6 6实例 使用CSS样式控制页面 单击 确定 按钮 打开 将样式表文件另存为 对话框 如下图所示 选择保存路径为CSS文件夹 输入文件名yangshi 6 6实例 使用CSS样式控制页面 单击 保存 按钮 打开如上图所示对话框 按下图所示设置参数 定义wenzi选择器的CSS规则 6 6实例 使用CSS样式控制页面 6 6实例 使用CSS样式控制页面 采用上述方法定义biankuang的CSS规则 参数设置如下图所示 6 6实例 使用CSS样式控制页面 6 6实例 使用CSS样式控制页面 采用上述方法定义bankuai的CSS规则 参数设置如下图所示 6 6实例 使用CSS样式控制页面 6 6实例 使用CSS样式控制页面 采用上述方法定义a link的CSS规则 参数设置如下图所示 6 6实例 使用CSS样式控制页面 采用上述方法定义a hover的CSS规则 参数设置如下图所示 6 6实例 使用CSS样式控制页面 采用上述方法定义a visited的CSS规则 参数设置如下图所示 6 6实例 使用CSS样式控制页面 把外部CSS样式表链接到页面 CSS样式表文件与网页文件的关系 6 6实例 使用CSS样式控制页面 操作步骤 打开未设置样式的主页文件打开CSS样式面板 单击面板下方的 附加样式表 按钮 打开如下图所示 链接外部样式表 对话框 单击 浏览 按钮 打开如下图所示对话框 选择CSS文件夹中的wenzi css和font css进行链接 网页中相应的样式即发生改变 链接外部样式表对话框 6 6实例 使用CSS样式控制页面 选择样式表文件对话框 套用CSS样式 选中网页上要设置格式的网页元素 在CSS面板对应的样式标签上单击右键 执行快捷菜单中的 套用 命令 6 7DIV CSS布局 关于DIVDIV CSS布局的优势采用CSS布局 CSS文件通常看可以共用 从而大大缩减页面代码 提高页面浏览速度兼容性更好 符合Web标准规范的发展趋势 页面可以在几乎所有的浏览器上浏览 不会出现在不同的浏览器中效果有差距的情况可以缩短网站改版周期 由于网站的布局都是通过外CSS文件来控制 只要修改CSS文件就可以将许多网页的风格格式同时更新 而不需要逐页地更新强大的字体控制和排版能力 CSS控制字体的能力远远优于标签 样式和内容相分离 样式部分分离出来放在一个独立样式文件中 而网页主要来放置内容 可以减少未来网页无效的可能性布局更加灵活 表格布局有很大的局限性 只能遵循tabletrtd的格式 而div可以divulli也可以divolli 在表格布局中 垃圾代码会很多 样式代码和布局代码混合一起 结构比较复杂 而DIV更能体现样式和结构相分离 结构的重构性强 6 7DIV CSS布局 DIV CSS布局实例 CSS布局示意图 6 7DIV CSS布局 插入DIV标签的方法 执行 插入 布局对象 Div标签 命令在 插入 面板的 布局 类别中 单击 插入Div标签 按钮 插入Div标签 对话框 6 7DIV CSS布局 新建文档执行 文件 新建 命令 弹出 新建文档 对话框在 新建文档 对话框中 选择 空白页 类别 在 页面类型 中选择 HTML 执行 文件 保存 命令 将文件保存在站点目录下的 DIV CSS 文件夹中 文件命名为 div css html 创建CSS样式表行 窗口 CSS样式 命令 弹出 CSS样式 面板单击面板右下角的 新建样式 按钮 弹出 新建CSS规则 对话框 设置参数如下图所示 给Body标签定义CSS样式 6 7DIV CSS布局 6 7DIV CSS布局 单击 确定 按钮 打开 body的CSS规则定义 对话框 在 分类 列表中选择 方框 选项 设置参数如下图所示 6 7DIV CSS布局 单击 确定 按钮 完成Body标签样式的定义定义 container容器 单击 CSS样式 面板右下角的 新建样式 按钮 弹出 新建CSS规则 对话框 设置参数如下图所示 6 7DIV CSS布局 单击 确定 按钮 打开 container的CSS规则定义 对话框 设置参数如下图所示 设置 背景 属性 6 7DIV CSS布局 设置 方框 属性 6 7DIV CSS布局 设置 边框 属性 6 7DIV CSS布局 单击 确定 按钮 完成 container容器的定义定义 top容器 单击 CSS样式 面板右下角的 新建样式 按钮 弹出 新建CSS规则 对话框 设置参数如下图所示 新建CSS规则 对话框 6 7DIV CSS布局 单击 确定 按钮 打开 top的CSS规则定义 对话框 设置参数如下图所示 设置 背景 属性 6 7DIV CSS布局 设置 方框 属性 6 7DIV CSS布局 设置 边框 属性 6 7DIV CSS布局 单击 确定 按钮 完成 top容器的定义 定义 left容器 单击 CSS样式 面板右下角的 新建样式 按钮 弹出 新建CSS规则 对话框 在 选择器类型 栏中选择ID 选择器名称 栏中输入 left 规则定义 栏中选择 仅限该文档 单击 确定 按钮 打开 left的CSS规则定义 对话框 设置参数如下图所示 设置 背景 属性 6 7DIV CSS布局 设置 方框 属性 6 7DIV CSS布局 单击 确定 按钮 完成 left容器的定义 定义 main容器 单击 CSS样式 面板右下角的 新建样式 按钮 弹出 新建CSS规则 对话框 在 选择器类型 栏中选择ID 选择器名称 栏中输入 main 规则定义 栏中选择 仅限该文档 单击 确定 按钮 打开 main的CSS规则定义 对话框 设置参数如下图所示 设置 背景 属性 6 7DIV CSS布局 设置 方框 属性 6 7DIV CSS布局 单击 确定 按钮 完成 main容器的定义定义 bottom容器 单击 CSS样式 面板右下角的 新建样式 按钮 弹出 新建CSS规则 对话框 在 选择器类型 栏中选择ID 选择器名称 栏中输入 bottom 规则定义 栏中选择 仅限该文档 单击 确定 按钮 打开 bottom的CSS规则定义 对话框 设置参数如下图所示 插入Div标签 对话框 6 7DIV CSS布局 插入DIV标签在页面中单击 执行 插入 布局对象 Div标签 命令 弹出 插入Div标签 对话框 在 插入 栏中选择 在插入点 在 ID 栏中选择 container 样式 如下图所示 插入Div标签 对话框 6 7DIV CSS布局 单击 确定 按钮 插入DIV标签 修改容器的文字为 container 如下图所示 插入Div标签 对话框 6 7DIV CSS布局 单击 container容器的边框 执行 插入 布局对象 Div标签 命令 弹出 插入Div标签 对话框 设置相应参数 如下图所示 插入Div标签 对话框 6 7DIV CSS布局 单击 确定 按钮 插入DIV标签 修改容器的文字为 top 如下图所示 插入Div标签 6 7DIV CSS布局 单击 top容器的边框 执行 插入 布局对象 Div标签 命令 弹出 插入Div标签 对话框 设置相应参数 如下图所示 插入Div标签 对话框 6 7DIV CSS布局 单击 确定 按钮 插入DIV标签 修改容器的文字为 left 如下图所示 插入Div标签