使用CSS样式美化网.ppt

第十章 使用CSS样式美化网页 2010-4-18 学习要点 nCSS类型与基本语法 nCSS定义的方式 nCSS属性设置 n应用CSS样式美化网页 n经常上网的人都会有这样的经验，将浏览器 的显示字体变大或变小，网页中的文字也会 随之发一改变。虽然有时候会给浏览者带来 帮助，但是也会对网页的布局产生影响，网 页的版面会因为字体的改变而变得参差不齐 。 n但是如果使用CSS，网页中的文本始终不随 之发生改变，总是保持着原有的外观。 n现代网页制作离不开CSS技术，使用CSS技 术，可以有关键所在的对页面的布局、字体 、颜色、背景和其他效果实现更加精确的控 制。 n用CSS不仅可以制作出令浏览者赏心悦目的 网页，还能给网页添加许多特效。 n创建CSS样式表的过程，就是对各种CSS属 性的设置过程，所以了解和掌握CSS属性设 置非常重要。 10.1 CSS概述 nCSS是Cascading Style Sheet的缩写， 有些书上称为“层叠样式表”或“级联样式 表”。 n样式表是对以前的HTML语法的一次重 大革新。 n如今风页的排版格式越来越复杂，很多 效果需要通过CSS来实现，DW8在 CSS功能设计上有了很大的改进。 10.1.1 CSS的基本概念 nCSS即层叠样式表，用来控制一个文档中的 某一文本区域外观的一组格式属性。CSS样 式可以用来一次对若干个文档所有的样式进 行控制。 n同HTML样式相比，使用CSS样式表的好处 除了在于它可以同时链边多个文档之外，当 CSS样式有所更新或被修改之后，所有应用 了该样式表的文档都会被自动更新。 nCSS样式表的功能： 1）修饰页面的元素时，避免了对HTML元素的改 动(也就是现在流行的一个概念：“语义化”结构与 表现分享了) n每个浏览器对HTML的解析都不同。HTML原来设计的 时候定位于定义文档的内容，通过使用, 各类标签，所要表达的初衷是“段落”、“表格”之类的信息 。但随着各大浏览器的出现，也逐渐将新的HTML标签 和属性到HTML规范中，以至于使得创建一个合理的语 义化的页面结构变得困难许多。 n通过使用CSS样式，可以定义字体、颜色，那么就可以 让这些原本不需要的表现形式的标记消失，使合理的语 义化标记处于更好的位置，更好的发挥标记的作用。 2) 使我们能够更轻松的控制页面结构和布局 n网站重构随着这个概念的出现，也带来了DIV结构的流 行，因此也就出现了我们现在口头常说的“DIV+CSS做 网站”。单从这个DIV+CSS的叫法来分析，可以了解到 CSS已经被大家用在了页面布局上了。 n但一个页面不是只有控制DIV就控制了全面，还有很多 其它的HTML标记，以前用table布局的页面，一样可以 用CSS来控制它。 3）最根本的也是我们开发人员关心的，提高开发 和维护的效率 n一个网站，如果有很多相同的结构的文件需要修改，涉 及到的工作量是巨大的，但如果通过改CSS来实现页面 的灵活变换，只需要修改某个样式就可以上，效率上大 大提升。 10.1.2 CSS的类型的基本语法 nCSS的属性可分为类型、背景、区块、 方框、边框、列表、定位、扩展8个部 分。 n在建立样式表之前，必须要了解一些 HTML的基础知识。HTML语言由标志 和属性构成，CSS也是如此。 n样式表基本语法如下所示： HTML标志标志属性：属性值；标志属性 ：属性值；标志属性：属性值；。 n现在首先讨论在HTML页面内直接引用 样式表的方法。这个方法属性把样式表 信息包括在标记中，为 了使样式表在整个页面中产生作用，应 该把组标记及其内容话到和 中去。 n例如要设置HTML页面中所有的H1标题字显示为蓝色 ，其代码如下： This a CSS samples 页面内容。 n提示： 标记中包括了type=“text/css”，这 是让浏览器知道是使用CSS样式规则。加 入这一对注释标记是防止有些老 式的浏览器不认识样式表规则，可以把该 段代码忽略不计。 n在使用样式表过程中，经常会有几个标 志用到同一属性，例如规定HTML页面 中凡是粗体字、斜体字、1号标题显示 为红色，按照上面介绍的方法书写成如 下形式： Bcolor:red Icolor:red H1color:red n显然这样书写十分麻烦，引进分组的概 念会使其变得简洁明了，可以写成如下 形式： B,I,H1color:red n用逗号分隔各个HTML标志，把三行代 码合并成一行。 n此外，同一个HTML标志，可能定义到多种属 性，例如规定把从H1H6各级标题定义为红 色黑体字，带下划线，则应写成如下形式： H1,H2,H3,H4,H5,H6 Color:red; Text-decoration:underline; Font-family:”黑体” 10.2 CSS样式面板 n在DW8中，执行选择“窗口CSS样式”命令 ，打开“CSS样式”面板 n在CSS样式面板的底部排列有几个按钮，它 们的功能分别如下： 附加样式表，可以在HTML文档中链接一个外部 的CSS文件 新建CSS样式，可以编辑新的CSS样式文件 编辑样式表，可以编辑原有的CSS规则 删除CSS样式，删除选中的已有的CSS规则 10.3 CSS定义的方式 n定义新的CSS的时候，会看到DW提供 的3种选择方式，即类样式、标签样式 和高级样式。 n在“CSS样式”面板中单击“新建CSS样式 ”按钮，弹出如图所示的“新建CSS样式” 对话框。 n选择器类型有以下3种： 类：定义了一种通用的方式，所有应用了 该方式的元素在浏览器中都遵循该类定义 的规则。类名称必须以句点开头，可以包 含任何字母和数字组合。如果没有输入开 头的句点，DW8将自动输入。 标签：该选项可以对某一具体标签进行重 新定义，这种方式对HTML中的代码进行 设置，其作用是创建或修改某个标签的 CSS后，所有用到该标签进行格式化的文 本都将被立即更新。 若要重新定义特定HTML标签的默认格式，在 “选择器类型”中选择“标签”选项，然后在“ 标签”文本框中输入一个HTML标签，或从 下拉菜单中选择一个标签。 高级：该选项会对某一具体的标签组合或 者含有特定ID属性的标签应用样式。 若要为具体某个标签组合或所有包含特定ID属性的标 签定义格式，在“选择器类型”中选择“高级”选项， 然后在“选择器”文本框中输入一个标签，或从下 拉菜单中选择一个标签，下拉菜单中提供的选择 器分为4种。 na:active:定义了链接被激活时的样式，即鼠标已经单击 了链接，但页面还没有跳转时。 na:hover:定义了鼠标停留在链接的文字上时的样式。常 见设置有文字颜色改变、下划线出现等 na:link：定义了设置有链接文字的样式。常见的有带下划 线（或没有带下划线） na:visited:浏览者已经访问过的链接样式，一般设置其颜 色不同于a:link的颜色，以便给浏览者明显的提示。 10.4 设置CSS的样式 n使用“CSS样式定义”对话框中的“类型” 类别可以定义CSS样式的基本字体。 n在“新建CSS样式”对话框“选择器类型” 中选择“类”选项，单击“确定按钮”，弹 出如图所示对话框，在对话框中设置所 需的样式属性。 10.5 应用CSS样式美化网页 nDW是最早使用CSS的网页工具之一。 通过直观的界面可以定义多种不同的 CSS设置，这些设置可以影响到网页中 的任何元素，从文本的间距到类似于多 媒体的转换，可以随时创建自己的样式 ，然后再链接调用它。 10.5.1 创建嵌入式CSS网页 n本节讲述利用CSS样式对网页文档进行美化 ，具体操作步骤如下： 步骤1：在网页中输入一段文字，选择“文本 CSS样式新建”命令，弹出“新建CSS样式”对话 框。 步骤2：保持默认的设置，单击“确定”，弹出 “.unnamed1的CSS样式定义”对话框，在左边的 列表中选择“类型”选项，在右边的“字体”下拉列表 中选择“宋体”，“大小”设置为12，“行高”设置为24 像素。 步骤3：单击“确定”，可以看到“CSS样式” 面板中增加了新建的CSS样式。 步骤4：在文档中按住鼠标左键向下拖动 选中要套用CSS的文字，在“CSS样式”面 板中单击鼠标右键，在弹出的菜单中选择“ 套用”选项。 步骤5：套用CSS后，按F12键预览。 10.5.2 链接外部现有CSS样式文件 n这个方法最方便管理整个网站的网页风 格，它让网页的文字内容和版面设计分 开。只要在一个CSS文档中定义好网页 的外观风格，所有链接到此CSS文档的 网页，便会按照定义好的风格显示网页 。链接外部CSS样式文件具体操作步骤 如下所示。 步骤1：打开网页，在“CSS样式”面板中选 中样式单击鼠标右键，在弹出的菜单中选 择“附加样式表” 步骤2：选择“附加样式表”后弹出“链接外 部样式表”对话框，在对话框中的“添加为” 选项中选择“链接”选项，单击“文件/URL” 文本框右边的“浏览”按钮，选项相应的文 件，单击“确定按钮” 10.6.3 导出为外部CSS样式表 nCSS样式完成为，还可以导出作为单独 的文件，具体操作步骤如下： 步骤1：在“CSS样式”面板中选中样式单击 鼠标右键，在弹出的下拉菜单中选择“导出 ”选项 步骤2：选择“导出”选项后，弹出“导出样 式为