《第9章_使用CSS与Div标签课件.ppt》由会员分享，可在线阅读，更多相关《第9章_使用CSS与Div标签课件.ppt（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、本章将介绍CSS和Div标签的基本知识以及使用CSS与Div标签进行网页布局的基本方法。第9章使用CSS和iv标签教学目标了解CSS样式的类型和属性。掌握创建和应用CSS样式的方法。掌握插入Div标签的方法。掌握使用CSS样式与Div标签进行网页布局的方法。9.1 使用CSS样式认识CSS样式创建CSS样式附加CSS样式表应用CSS样式CSS样式的属性本节主要内容：9.1.1 认识CSS样式CSS 是一组样式设置规则，用于控制Web 页面的外观。通过使用CSS 样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML 文档中，而用于定义表现形式的CSS 规则存放在另一个文件中或
2、HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML 文档代码更加简练，缩短浏览器的加载时间。9.1.1 认识CSS样式一、CSS 语法CSS 语法格式：选择器 属性:值。CSS 样式设置规则由3部分组成：选择器、属性和值。如果需要对一个选择器指定多个属性，这些属性可以写在一行，也可以每个属性占一行，属性与属性之间必须使用分号隔开。属性和值要用冒号隔开，如果属性的值是多个单词组成，必须在值上加引号。可以把相同属性和值的选择器组合起来书写，用逗号将选择器分开。h1,pfont-family:黑体,宋体;font-size:24px
3、9.1.1 认识CSS样式二、CSS 的类型根据选择器类型的不同，CSS 样式通常划分为以下3类。（1）类：可创建自定义名称的CSS 样式，能够应用在网页中的任何标签上，类样式以点（.）开头。.pstylefont-family:宋体;font-size:12px在网页文档中使用class属性引用类，凡是含有“class=”pstyle“”（在引用时类名称前没有点标识）的标签都应用该样式，class属性用于指定元素属于何种样式的类。9.1.1 认识CSS样式（2）标签：可对HTML 标签进行重新定义、规范或者扩展其属性，样式名称就是HTML 标签名称。例如，当创建或修改p 标签的CSS 样式时
4、，所有用p 标签进行格式化的文本都将被立即更新。pfont-family:宋体;font-size:12px因此，重定义标签时应多加小心，因为这样做有可能会改变许多页面的布局。比如说，如果对table 标签进行重新定义，就会影响到其他使用表格的页面的布局。9.1.1 认识CSS样式（3）高级：可以创建标签组合、标签嵌套、id 名称等形式的高级CSS 样式。标签组合格式：h1,pfont-size:12px a:link,a:visitedcolor:#000000;text-decoration:none 标签嵌套格式：td h2font-size:18px id 名 称 格 式：#mysty
5、le font-family:宋 体;font-size:12px 可以通过ID 属性应用到id 名称为“mystyle”的标签上。高级CSS 样式有时也会是多种形式的组合：#mytable td a:link,#mytable td a:visitedcolor:#000000 9.1.1 认识CSS样式三、网页引用CSS 的方式（1）内嵌式：样式表内嵌在HTML 文档头部分，例如：文档标题 9.1.1 认识CSS样式（2）内 联 式，即 在 对 象 的 标 记 内 使 用style 属 性 定 义 适 用 其的样式表属性，例如：（3）外部样式表，即单独定义样式表文件，然后将样式表文件附加到
6、HTML 文档，附加的方式有两种：链接和导入。常用的方式是链接。!-9.1.2 创建CSS样式创建CSS 样式的方法是。（1）选择【窗口】/【CSS 样式】命令，打开【CSS 样式】面板。9.1.2 创建CSS样式（2）单击【CSS 样式】面板底部的（新建）按钮打开【新建CSS 规则】对话框。在【选择器类型】选项组中选择要创建的CSS 样式的类型，在【定义在】下拉列表中选择CSS 样式的存放位置。9.1.2 创建CSS样式（3）在【CSS 规则定义】对话框中进行CSS 样式设置。9.1.3 附加CSS样式表外部样式表通常是供多个网页使用的，其他网页文档要想使用已创建的外部样式表，必须通过【附加
7、样式表】命令将样式表文件链接或者导入到文档中。方法是：（1）打开文档，在【CSS 样式】面板中单击（附加样式表）按钮，打开【链接外部样式表】对话框。（2）在【文件/URL】列表框中选择样式表文件，在【添加为】选项组中选择“链接”，这也是默认项。（3）单击 按钮将CSS 样式文件附加到网页文档。9.1.4 应用CSS样式在已经创建好的CSS 样式中，标签CSS 样式、高级CSS样式基本上都是自动应用的。类样式的应用需要进行手动设置，方法有以下几种。一、通过【属性】面板首先选中要应用CSS 样式的内容，然后在【属性】面板的【样式】下拉列表中选择已经创建好的类CSS 样式。9.1.4 应用CSS样式
8、二、通过菜单命令【文本】/【CSS 样式】首先选中要应用CSS 样式的内容，然后选择菜单命令【文本】/【CSS 样式】，从下拉菜单中选择预先设置好的样式名称，这样就可以将被选择的样式应用到所选的内容上。9.1.4 应用CSS样式三、通过【CSS 样式】面板下拉菜单中的【套用】命令 首先选中要应用CSS 样式的内容，然后在【CSS 样式】面板中选中要应用的样式，再在面板的右上角单击 按钮，或者直接单击鼠标右键，从弹出的下拉菜单中选择【套用】命令即可应用样式。9.1.5 CSS样式的属性一、类型属性主 要 用 于 定 义 网 页 中 文 本 的 字 体、大 小、颜 色、样式、行高及文本链接的修饰效
9、果等。9.1.5 CSS样式的属性二、背景属性背景属性主要用于设置背景颜色或背景图像。9.1.5 CSS样式的属性三、区块属性主要用于控制网页元素的间距、对齐方式等。9.1.5 CSS样式的属性四、方框属性CSS 将 网 页 中 所 有 的 块 元 素 都 看 作 是 包 含 在 一 个 方框中的。9.1.5 CSS样式的属性五、边框属性网 页 元 素 边 框 的 效 果 是 在【边 框】分 类 对 话 框 中 进行设置的。9.1.5 CSS样式的属性六、类型属性【列 表】分 类 对 话 框 用 于 控 制 列 表 内 的 各 项 元 素。通 过【列 表】分 类 对 话 框 不 仅 可 以 修
10、 改 列 表 符 号 的 类型，还 可 以 使 用 自 定 义 的 图 像 来 代 替 项 目 列 表 符 号，这 就 使 得 文 档 中 的 列 表 格 式 有 了 更 多 的 外 观。使 用【位 置】（选 项 可 以 定 义 列 表 符 号 的 显 示 位 置，有【外】（在 方 框 之 外 显 示）和【内】（在 方 框 之 内 显 示）两个选项。9.1.5 CSS样式的属性七、定位属性定位属性可以使网页元素随处浮动。9.1.5 CSS样式的属性八、扩展属性对 话 框 包 含 两 部 分：【分 页】栏 中 两 个 属 性 的 作 用是 为 打 印 的 页 面 设 置 分 页 符。【视 觉 效
11、 果】栏 中 的 两个属性的作用是为网页中的元素施加特殊效果。9.2 使用Div标签插入Div标签使用CSS+Div进行网页布局本节主要内容：9.2.1插入Div标签插入Div标签的方法是，选择【插入】/【布局对象】/【Div标签】命令，或在【插入】/【布局】面板中单击（Div标签）按钮，打开【插入Div标签】对话框进行设置即可。9.2.2 使用CSS+Div进行网页布局体会CSS 和Div标签的综合应用。9.2.2 使用CSS+Div进行网页布局在实际应用中，建议读者多使用类CSS 样式，因为它比较灵活，可以被反复引用，而ID 名称CSS 样式不能被多次引用，因为在同一个网页中ID 名称是不允许重复的。实际上，凡是使用ID 名称CSS 样式的，都可以转换为使用类CSS 样式，它们只是形式不同，作用都是一样的。9.2.2 使用CSS+Div进行网页布局在创建网页文档时，使用的CSS 样式是保存在文档头部分，还是单独保存一个CSS 文件，这需要根据实际情况而定。在一个站点中，通常会有很多网页文档，这些网页文档页面的许多部分可能是相同的，在这种情况下，使用CSS 文件比较好，这样在日后修改时，只修改CSS 文件就行了。如果有些CSS 样式只有本页使用，而其他网页文档不使用，可以将这部分CSS 样式放置在网页的文档头部分，其他CSS 样式放置在共用的CSS 文件中。