Dreamweaver教程第8章.pptVIP

学习目的与要求 创建CSS样式表 掌握CSS样式的属性项目设置方法 在文档中应用样式表，会管理样式表 会应用CSS滤镜对文字和图像做出特殊效果。 8.1 创建CSS样式 CSS样式：层叠式样式（简称CSS），是一种比较先 进的网页控制技术，主要用来指定布局、 字体、颜色、背景以及其他的一些图文元 素的格式。 CSS样式一般为分嵌入式和外部链接式两种类型。嵌入式是在独立的文档中应用的CSS样式；外部链接式样式应用于多个文档，生成专门的*.css文件。 内部样式表文件：创建的样式只对当前文档起作用， 这样的样式称为内部样式表文件。 外部样式表文件：保存在外部但可以链接到当前文档 中的样式称为外部样式表文件。 8.1 创建CSS样式 8.1.1 新建CSS样式 （1）选择菜单【窗口】|【CSS样式】命令，打开　　 CSS样式面板。 （2）在面板右侧的下拉菜单中选择【新建CSS样 式】，出现“新建CSS样式”对话框。 8.1 创建CSS样式 8.1.2 CSS样式面板 1．“正在”模式 （1）单击CSS 样式面板顶部的“正在”按钮。 （2）选择当前页中的一个文本元素以显示它的属性。 （3）在“所选内容的摘要”窗格中选择一个属性并编辑。 8.1 创建CSS样式 8.1.2 CSS样式面板 3． 添加属性 （1）在“所有规则”窗格中选择一条属性（“所有”模式），或者在“所选内容的摘要”窗格中选择一个属性（“当前”模式）。 （2）执行下列操作之一 如果在“属性”窗格中选择了“只显示设置属性”视图，请单击“添加属性”链接并添加属性。 如果在“属性”窗格中选择了“类别”视图或“列表”视图，则为要添加的属性填入一个值。 8.1 创建CSS样式 8.1.2 CSS样式面板 4． CSS样式面板上的按纽 ：类别视图，将 CSS 属性划分为 8 个类别 ：列表视图，按字母顺序显示 CSS 属性。 ：设置属性视图，仅显示那些已设置的属性。 ：附加样式表，打开“链接外部样式表”对话框。 ：新建 CSS 规则。 ：编辑样式，编辑当前文档或外部样式表中的样 式。 ：删除CSS 样式面板中的所选规则或属性。 8.1 创建CSS样式 8.1.3 CSS样式规则对话框 （1）名称：输入样式的名称。 （2）选择器类型：选择创建样式的类型，有3种样 式可供选择。 类：创建一个应用于文本和文本块的CSS样式。 标签：选择重新定义的标签。 高级：对特定的HTML标签组合或含有某个ID属性的 所有标签进行重新定义。 （3）“定义在”有2个选项。 仅对该文档：设置的CSS样式只对当前文档起作用 新建样式表文件：保存为样式表文件*.css 。 8.1 创建CSS样式 8.1.4 样式定义对话框 8.1 创建CSS样式 8.1.5 样式的类型 1．定义类样式并应用于表格的实例 （1）定义左上角的单元格边框 单击新建按钮 ，在【选择器类型】中选择【类】，在【名称】后输入“left”，【定义在】项选为【仅对该文档】。 8.1 创建CSS样式 8.1.3 CSS样式规则对话框 在【分类】栏中，选择【边框】选项 8.1 创建CSS样式 8.1.3 CSS样式规则对话框 （2）应用该样式 在网页中插入一个2行2列的表格，表格的边框为1，将光标定位到表格第一行的第1个单元格，在文档窗口左下角的标签中选择td，选中这个单元格。打开【属性】面板，单击【样式】后面的下拉列表从中选择“left” 8.1 创建CSS样式 8.1.3 CSS样式规则对话框 （3）定义右下角的单元格边框 在CSS样式窗口中，单击新建按钮，在【选择器类型】中选择【类】，在【名称】后输入“right”，【定义在】项选为【仅对该文档】。 在【分类】栏中，选择【边框】选项，设置“左”、“上”的线型为“虚线”，线的宽度为“1”，“颜色”值为“#666666”。 进入设计视图，将光标定位到表格的右下角的单元格内部，在文档窗口左下角的标签中选择td，选中这个单元格，在属性面板中应用样式“right”。 8.1 创建CSS样式 8.1.3 CSS样式规则对话框 2．标签 创建新的CSS样式时，在“新建CSS样式”对话框中的【选择择器类型】选项中选择【标签】，可以在【标签】下拉列表中选择相应的标签。 8.1 创建CSS样式 8.1.3 CSS样式规则对话框