《网站设计》第9章 CSS层叠样式表的应用

第9章CSS层叠样式表的应用 91关于CSS样式表 92刨建新的CSS样式 93【CSs样式】面板的使用

第9章 CSS层叠样式表的应用 9.1 关于CSS样式表 9.2 创建新的CSS样式 9.3 【CSS样式】面板的使用

9.1关于CSS样式表 回用CSS的优点一 控制页面中的每个元素(精确定位) 对HTML语言处理样式的最好补充 把内容和格式处理相分离,减少工作量 目录 上一页 下一页 退出

9.1 关于CSS样式表 一、使用CSS的优点 1． 控制页面中的每一个元素（精确定位）。 2． 对HTML语言处理样式的最好补充。 3． 把内容和格式处理相分离，减少工作量

9.1关于CSS样式表 、CS的类型 自定义CSS样式 自定义CSS样式(也称为类样式),可以将样式属性设 置为任何文本范围或文本块 HTM标签样式 HTM标签样式,用于重新定义特定标签,如H的格式 创建或更改H标签的CS样式时,所有用H标签设置了 格式的文本都立即更新 CSS选择器样式 aCSS选择器样式重定义特定标签组合的格式(如每当H2 标题出现在表格单元格内时都应用dh2),或重定义包 目录 含特定i属性的所有标签的格式 上一页 下一页 退出

9.1 关于CSS样式表 二、CSS的类型 自定义CSS样式 ◼ 自定义CSS样式（也称为类样式），可以将样式属性设 置为任何文本范围或文本块。 HTML标签样式 ◼ HTML标签样式，用于重新定义特定标签，如H1的格式。 创建或更改H1标签的CSS样式时，所有用H1标签设置了 格式的文本都立即更新。 CSS选择器样式 ◼ CSS选择器样式重定义特定标签组合的格式（如每当H2 标题出现在表格单元格内时都应用td h2），或重定义包 含特定id属性的所有标签的格式

9.1关于CSS样式表 、CSs样式在网页文档中的3种存在方式 外部文件方式 外部CS样式文件,是一系列存储在一个单独 的外部文件cs文件(并非HIM文件)中的 CSS样式。 CSS文件的引用是在HM的head t页)其中的 Style. css文件应为已编好的样式表文件。 下一页 退出

9.1 关于CSS样式表 三、 CSS样式在网页文档中的3种存在方式 1． 外部文件方式 ◼ 外部CSS样式文件，是一系列存储在一个单独 的外部文件.css文件（并非HTML文件）中的 CSS样式。 ◼ CSS文件的引用是在HTML的标 签之间编写下列语句： 其中的Style.css文件应为已编好的样式表文件

9.1关于CSS样式表 、CSS样式在网页文档中的3种存在方式 2.内部文档头方式 内部(或嵌入式)CSS样式表,是一系列包含 在HTML文档head部分的sty1e标签内的C式 将风格直接定义在文档头之间 如: 样式表的具体内容 目录 上一页 下一页 退出

9.1 关于CSS样式表 三、 CSS样式在网页文档中的3种存在方式 2.内部文档头方式 ◼ 内部（或嵌入式）CSS样式表，是一系列包含 在HTML文档head部分的style标签内的CSS样式。 ◼ 将风格直接定义在文档头之间 ， 如：

9.1关于CSS样式表 、"CSS样式在网页文档中的3种存在 方式 3.直接插入式 直接插入式很简单,只需在每个HM标 签后书写CSS属性即可 例如:规定一个 Table标志中的字为红 色,字体大小为10pt,则可书写如下: 目录 上一页 下一页 退出

9.1 关于CSS样式表 三、 CSS样式在网页文档中的3种存在 方式 3.直接插入式 ◼ 直接插入式很简单，只需在每个HTML标 签后书写CSS属性即可。 ◼ 例如：规定一个Table标志中的字为红 色，字体大小为10pt，则可书写如下：

92 Dreamweaver中创建新的cSS样式 无在页面属性”申设置 页而屈性 链接字体:(同页面字体 大小 链接颜色):#0900变换图像链接): 已访问链接):#36活动链接():□r0 下划线样式①:[好终有下划线 L确定取消应用」』帮助00 目录 切换到“代码”视图,可以看到对“页面属性”进 上一页 行的设置,变成了一段CSS样式代码,嵌在文档头 之间 下一页 退出

9.2 Dreamweaver中创建新的CSS样式 1. 在“页面属性”中设置 切换到“代码”视图，可以看到对“页面属性”进 行的设置，变成了一段CSS样式代码，嵌在文档头 之间

92 Dreamweaver中创建新的cSS样式 文本编辑 Dreamweaver mX2004在属性检查器中 增加了“样式”选项,这一选项的功能 是在设计页面时进行添加字体、设置颜 色、大小等样式操作时,“样式”中套 用样式; 如果套用的Cs样式不是文字,而是表格 同样可以在属性面板中设置CSS。在属性 目录 面板中都有一个类别( Class),在这里 上一页 就可以设计表格的CSs样式。 下一页 退出

9.2 Dreamweaver中创建新的CSS样式 2. 文本编辑 Dreamweaver MX 2004在属性检查器中 增加了“样式”选项，这一选项的功能 是在设计页面时进行添加字体、设置颜 色、大小等样式操作时，“样式”中套 用样式； 如果套用的CSS样式不是文字，而是表格， 同样可以在属性面板中设置CSS。在属性 面板中都有一个类别（Class），在这里 就可以设计表格的CSS样式

93【CSs样式】面板的使用 CSS样式面板 【窗口】【CSS样式】命令 v设计 ss样式M祥式行为 G应用样式C编辑样式 万无CSS样式 编辑样式 目录 附加样式 上一页 删除样式 下一页 新建样式 退出

9.3 【CSS样式】面板的使用 1、CSS样式面板 ◼ 【窗口】｜【CSS样式】命令 附加样式 新建样式 编辑样式 删除样式

93【CSs样式】面板的使用 徊CSS样式面板 窗口】|【CSS样式】命令 在“CSS样式”面板的底部有4个功能按钮,它 们各自的作用是: 【附加样式表】按钮:可调出“链接外部样式表”对 话框,从中选择要链接到或导入到当前文档中的外部 样式表 【新建CS样式】按钮:单击后可弹出“新建CSS样式 对话框,使用“新建CS样式”对话框可以选择要创建 的样式类型。 a【编辑样式表】按钮:单击后可弹出“CS样式定义” 目录 对话框。编辑当前文档或外部样式表中的何样式 除CSS样式】按钮:删除“CS5样式”面板中的所 上一页 选样式,并从应用该样式的所有元素中删除样式 下一页 退出

9.3 【CSS样式】面板的使用 3. CSS样式面板 ◼ 【窗口】｜【CSS样式】命令 ◼ 在“CSS样式”面板的底部有4个功能按钮，它 们各自的作用是： 【附加样式表】按钮：可调出“链接外部样式表”对 话框，从中选择要链接到或导入到当前文档中的外部 样式表。 【新建CSS样式】按钮：单击后可弹出“新建CSS样式” 对话框，使用“新建CSS样式”对话框可以选择要创建 的样式类型。 【编辑样式表】按钮：单击后可弹出“CSS样式定义” 对话框。编辑当前文档或外部样式表中的任何样式。 【删除CSS样式】按钮：删除“CSS样式”面板中的所 选样式，并从应用该样式的所有元素中删除样式