第9章_CSS样式表演示文稿.PPTVIP

第9章 CSS样式表 主要内容 9.1 CSS样式表概述 9.2 CSS样式表的应用 9.3 实例——使用CSS样式控制页面 9.4 DIV+CSS布局 9.1 CSS样式表概述 CSS样式表的适用场合 保证一个网页上相同要素具有一致的风格，可以使用CSS样式表 为了保证同一个网站上多个网页风格一致，使这些网页上相同要素具有相同的样式 通过CSS样式定义DIV标签，实现网页布局设计 多个网页上存在多个方框或边框要求样式一致 CSS样式表应用举例 【实例1】通过CSS样式表控制主页中字体及超级链接样式 【实例2】使用CSS样式表为多个网页设置相同的样式 9.2 CSS样式表的应用 在Dreamweaver中定义CSS样式表 创建CSS样式表 修改CSS样式表 删除CSS样式表 CSS样式表的使用方法 CSS样式表的语法结构 选择符{属性1：值1；属性2：值2……} 选择符可以是类、ID或标签之一。 参数说明：属性和属性值之间用“：”隔开，多个属性之间用“；隔开 CSS样式表的使用方法 方法一：内联式样式单 方法二：嵌入式样式单 方法三：外部式样式单 9.3 实例——使用CSS样式控制页面 创建内嵌式CSS样式表 打开“窗口”菜单，单击“CSS样式”命令，或者用快捷键shift+F11，打开CSS面板 在CSS面板下方单击（新建CSS规则）按钮，打开下列对话框 9.3 实例——使用CSS样式控制页面 设置完成后单击“确定”按钮，打开下列对话框，按图中所示设置对话框上参数 9.3 实例——使用CSS样式控制页面 创建外部链接式CSS样式表 打开CSS面板，方法同前 打开新建CSS规则对话框，按下图进行参数设置，规则定义列表框一定要选择“新建样式表文件” 9.3 实例——使用CSS样式控制页面 单击“确定”按钮，打开“将样式表文件另存为”对话框，如下图所示，选择保存路径为CSS文件夹，输入文件名yangshi 9.3 实例——使用CSS样式控制页面 单击“保存”按钮，打开如上图所示对话框，按下图所示设置参数，定义wenzi选择器的CSS规则 9.3 实例——使用CSS样式控制页面 9.3 实例——使用CSS样式控制页面 采用上述方法定义biankuang的CSS规则，参数设置如下图所示 9.3 实例——使用CSS样式控制页面 9.3 实例——使用CSS样式控制页面 采用上述方法定义bankuai的CSS规则，参数设置如下图所示 9.3 实例——使用CSS样式控制页面 9.3 实例——使用CSS样式控制页面 采用上述方法定义a:link的CSS规则，参数设置如下图所示 9.3 实例——使用CSS样式控制页面 采用上述方法定义a:hover的CSS规则，参数设置如下图所示 9.3 实例——使用CSS样式控制页面 采用上述方法定义a:visited的CSS规则，参数设置如下图所示 9.3 实例——使用CSS样式控制页面 把外部CSS样式表链接到页面 9.3 实例——使用CSS样式控制页面 操作步骤: 打开未设置样式的主页文件 打开CSS样式面板，单击面板下方的（附加样式表）按钮，打开如下图所示“链接外部样式表”对话框，单击“浏览”按钮，打开如下图所示对话框，选择CSS文件夹中的wenzi.css和font.css进行链接，网页中相应的样式即发生改变 9.3 实例——使用CSS样式控制页面 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 9.4 DIV+CSS布局 单击【确定】按钮，完成#container容器的定义 定义#top容器。单击“CSS样式”面板右下角的“新建样式”按钮，弹出“新建CSS规则”对话框，设置参数如下图所示 “新建CSS规则”对话框 标题2： 40号，仿宋，加粗 项目：20号 仿宋