第五讲使用CSS样式
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.CSS规则的应用范围 规则的应用范围
CS4中 有外部样式表和内部样式表， 在Dreamweaver CS4中，有外部样式表和内部样式表，区 别在于应用范围和存放位置不同， 别在于应用范围和存放位置不同，下面是对这两种样式表 的介绍： 的介绍： 外部CSS样式表：存储在一个单独的外部CSS(.CSS) CSS样式表 CSS(.CSS)文件 外部CSS样式表：存储在一个单独的外部CSS(.CSS)文件 而非HTML文件)中的若干组CSS规则。 HTML文件 CSS规则 (而非HTML文件)中的若干组CSS规则。此文件利用文档头 部分的链接或@import @import规则链接到网站中的一个或多个页 部分的链接或@import规则链接到网站中的一个或多个页 面。 内部(嵌入式)CSS样式表：若干组包括在HTML )CSS样式表 HTML文档头部分 内部(嵌入式)CSS样式表：若干组包括在HTML文档头部分 的<style>标签中的CSS 规则。 <style>标签中的CSS 规则。 标签中的 除了外部和内部样式表外，还有内联样式， 除了外部和内部样式表外，还有内联样式，该样式定义在 整个HTML文档中的特定标签实例中， HTML文档中的特定标签实例中 整个HTML文档中的特定标签实例中，一般不建议使用该样 式。
新建CSS规则对话框中的基本操作 新建CSS规则对话框中的基本操作
“为CSS规则选择上下文选择器类型”：可以在该下拉列表中 选择要创建的选择器类型选项。选择“类”选项，可以创建一个 作为class属性，应用于任何HTML元素的CSS样式。选择ID选 项，可以定义包含特定ID属性标签的CSS样式。选 择“标签” 选项，可以重新定义特定HTML标签的默认格式。选择“复合内 容” 选项，可以定义可同时应用两个或多个标签、类或ID的复 合样式。 “选择或输入选择器名称”：可以在下拉列表中选择选择器名 称或者输入选择器名称。最主要的是类名称必须以句点开头，并 且可以包含任何字母和数字组合，例如.myhead1。ID名称必须 以#号开头，并且可以包含任何字母和数字组合，例如#mylD1。 “选择定义规则的位置”：可以在下拉列表中选择定义规则的 位置，如果要将规则放置到已附加到文档的样式表中，选择相应 的样式表。如果要创建外部样式表，选择“新建样式表文件”选 项。若要在当前文档中嵌入样式，选择“仅限该文档”选项。 在没有设置样式选项的情况下单击“确定”按钮，将产生一个新的 空白规则。
使用CSS样式 使用CSS样式
精美的网页离不开CSS技术，使用CSS技术， 可以有效地对页面的布局、字体、颜色、背景 和其他效果实现更加精确的控制。CSS样式的 全名为Cascading Style Sheet，它可以定义 HTML标签，按列表的语法将许多文字、图片、 表格、表单、图层等设计加以格式设定。在 HTML语法中，常常需要使用到一些设定颜色、 字体大小或框线粗细之类的标签，而CSS在开 始制作网页时就将这些设定做好，不需要在制 作网页文档时再反复写入同样的标签。
CSS样式面板 CSS样式面板
CSS样式面板的基本操作 CSS样式面板的基本操作
拖动窗格之间的边框来调整窗格的大小，通过拖动“属性”列的分 隔线调整这些列的大小。 选择某个规则时，该规则中定义的所有属性都会显示在“属性”窗 格中。可以在“属性”窗格中修改CSS，而无论它是嵌入在当前文 档中还是链接到附加的样式表。默认情况下， “属性”窗格仅显 示那些先前已设置的属性，并按字母顺序排列它们。 单击“显示列表视图”按钮 ，可以打开列表视图，该视图中显 示所有可用属性的按字母顺序排列的列表，已设置的属性排在顶部。 单击“显示类别视图”按钮 ，可以打开类别视图，该视图中显 示按类别分组的属性，例如字体、背景、区块、边框等，已设置的 属性位于每个类别的顶部。 注释：对“属性”窗格所做的任何更改都将立即应用到网页文档中， 可以在操作的同时预览效果。
1.CSS样式类型 1.CSS样式类型
CS4中 可以定义以下样式类型: 在Dreamweaver CS4中，可以定义以下样式类型: 类样式：可让用户将样式属性应用于页面上的任何元素。 类样式：可让用户将样式属性应用于页面上的任何元素。 HTML标签样式 重新定义特定标签( h1)的格式 创建或更改h1 标签样式： 的格式。 HTML标签样式：重新定义特定标签(如 h1)的格式。创建或更改h1 标签的CSS 样式时，所有用h1 h1标签设置了格式的文本都会被立即 标签的CSS 样式时，所有用h1标签设置了格式的文本都会被立即 更新。 更新。 高级样式：重新定义特定元素组合的格式，或其他CSS CSS允许的选择 高级样式：重新定义特定元素组合的格式，或其他CSS允许的选择 器表单的格式(例如，每当h2标题出现在表格单元格内时， h2标题出现在表格单元格内时 器表单的格式(例如，每当h2标题出现在表格单元格内时，就会应 用选择器td h2)。高级样式还可以重定义包含特定id id属性的标签 用选择器td h2)。高级样式还可以重定义包含特定id属性的标签 的格式(例如， #myStyle定义的样式可以应用于所有包含属性 定义的样式可以应用于所有包含属性／ 的格式(例如，由#myStyle定义的样式可以应用于所有包含属性／ 值对id= myStyle”的标签 id=“myStyle 的标签) 值对id= myStyle 的标签)。
CSS样式简介 样式简介
CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使 用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可 以避免重复操作。CSS样式表是对HTML语法的一次重大革新，它位于文 档的<head>区，作用范围由CLASS或其他任何符合CSS规范的文本来设置 。对于其他现有的文档，只要其中的CSS样式符合规范，Dream weaver就 能识别它们。
CSS样式面板 CSS样式面板
使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性，也 使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性，也 可以跟踪网页文档可用的所有规则和属性。 选择“窗口”|“CSS样式”命令，打开“CSS样式”面板。在该面板顶部的有“ 选择“窗口”|“CSS样式”命令，打开“CSS样式”面板。在该面板顶部的有“全 部”和“正在”两种模式，单击相应的按钮，即可在两种模式之间切换，并 正在” 且可以在这两种模式下进行修改CSS属性操作。 且可以在这两种模式下进行修改CSS属性操作。 1. “全部”模式 单击“CSS样式”面板中的“全部”按钮，切换到“全部”模式，此时 单击“CSS样式”面板中的“全部”按钮，切换到“全部”模式，此时 “CSS样式”面板显示了“所有规则”窗格和“属性”窗格。“所有规则 CSS样式”面板显示了“所有规则”窗格和“属性”窗格。“所有规则 ”窗格中显示当前文档中定义的规则和附加到当前文档的样式表中定义的 所有规则的列表。使用属性“窗格”可以编辑“所有规则”窗格中任何所 选规则的CSS属性。 选规则的CSS属性。 2. “正在”模式 “正在”模式 单击“CSS样式”面板中的“正在”按钮，切换到“正在”模式，此时 单击“CSS样式”面板中的“正在”按钮，切换到“正在”模式，此时 “CSS样式”面板显示了“所选内容的摘要”窗格。在该窗格中显示文档 CSS样式”面板显示了“所选内容的摘要”窗格。在该窗格中显示文档 中当前所选内容的CSS属性；“规则”窗格显示所选属性的位置。“属性 中当前所选内容的CSS属性；“规则”窗格显示所选属性的位置。“属性 ”窗格，可以编辑应用于所选内容的规则的CSS属性。 ”窗格，可以编辑应用于所选内容的规则的CSS属性。
样式存放在与要设置格式的实际文本分离的位置， 样式存放在与要设置格式的实际文本分离的位置，通常在外部样 式表或HTML文档的文件头部分中。因此，可以将h1 HTML文档的文件头部分中 h1标签的某个规则 式表或HTML文档的文件头部分中。因此，可以将h1标签的某个规则 一次应用于许多标签(如果在外部样式表中，则可以将此规则一次 一次应用于许多标签(如果在外部样式表中， 应用于多个不同页面上的许多标签) 这样，CSS就可以提供非常便 应用于多个不同页面上的许多标签)。这样，CSS就可以提供非常便 利的更新功能。若在一个位置更新CSS规则， CSS规则 利的更新功能。若在一个位置更新CSS规则，使用已定义样式的所 有元素的格式设置将自动更新为新样式。 有元素的格式设置将自动更新为新样式。
新建CSS规则 新建CSS规则
创建一个CSS规则后，可Hale Waihona Puke Baidu用来自动完成HTML标签的格式设置或者 创建一个CSS规则后，可以用来自动完成HTML标签的格式设置或者 class或ID属性所标识的文本范围的格式设置。 class或ID属性所标识的文本范围的格式设置。 将光标移至网页文档中，选择“格式”|“CSS样式”|“新建”命令，打开“ 将光标移至网页文档中，选择“格式”|“CSS样式”|“新建”命令，打开“新 建CSS规则”对话框，如图所示。 CSS规则”
CSS样式的概念 CSS样式的概念
CSS样式是 样式是Cascading Style Sheets(层叠样式单 的简称，也可以称为 层叠样式单)的简称 样式是 层叠样式单 的简称，也可以称为“ 级联样式表”，它是一种网页制作的新技术， 级联样式表 ，它是一种网页制作的新技术，利用它可以对网页中的文 本进行精确的格式化控制。 本进行精确的格式化控制。
CSS规则 CSS规则
CSS规则由两部分组成：选择器和声明(大多数情况下为包含多个声明 的代码块)。选择器是标识已设置格式元素的术语，例如 p、h1、类名 称或ID，而声明块则用于定义样式属性。例如下面CSS规则中，h1 是 选择器，大括号({})之间的所有内容都是声明块。 h1 { font-size: 12 pixels； font-family:Times New Roman； font-weight:bold； } 每个声明都由属性(例如上面规则中的font-family和值(例如Times． NewRoman)两部分组成。在如上的CSS规则中，已经创建了h1标签样 式，即所有链接到此样式的h1标签的文本大小为12像素、字体为Times New Roman、字体样式为粗体。
在网页文档中使用CSS 在网页文档中使用CSS样式 CSS样式
在Dreamweaver CS4中，可以创建一个CSS样式，然后应用于网页文档 CS4中，可以创建一个CSS样式，然后应用于网页文档 的某个部分，完成文本的格式化。
创建CSS样式表 创建CSS样式表
在Dreamweaver CS4中，可以很方便地创建、编辑CSS样式表定义，并 CS4 可以很方便地创建、编辑CSS样式表定义， 且不需要直接编辑CSS代码，即使不懂CSS层叠样式表定义语法的用户 且不需要直接编辑CSS代码，即使不懂CSS层叠样式表定义语法的用户 ，也能轻松完成定义。Dreamweaver CS4提供了功能非常强大的CSS样 也能轻松完成定义。 CS4提供了功能非常强大的CSS样 式编辑器，不但可以在页面中直接插入CSS 样式定义，还可以创建、 式编辑器 ，不但可以在页面中直接插入 CSS样式定义 ，还可以创建、 编辑独立的CSS样式表文件。 编辑独立的CSS样式表文件。 选择“文件” 新建”命令，打开“新建文件”对话框， 选择“文件”| “新建”命令，打开“新建文件”对话框，在左侧的列表 框中选择“示例中的页”选项卡， 框中选择“示例中的页”选项卡，在“示例文件夹”列表框中选择“CSS 示例文件夹”列表框中选择“ 样式表” 选项 ， 样式表 ” 选项， 在 “ 示例页” 中可以选择预定义CSS 样式选项。 在 示例页 ” 中可以选择预定义 CSS样式选项 。 Dreamweaver CS4中提供了非常丰富的预定义样式表。 CS4中提供了非常丰富的预定义样式表。