2. 10 CSS样式(课件）-高二《网页设计与制作》同步教学（北京理工版）

2. 10 CSS样式 层叠样式表(Cascading Style Sheets,CSS)，简称样式表，是一系列格式规则，使用CSS样式可以更好地控制网页外观，从精确的布局到特定的字体和样式。 CSS最主要的目的是使页面格式设置与页面内容分开，可以单独设置样式，然后应用到页面中，以提高网页设计和管理维护的效率。 2.10.1 “ CSS样式”面板 “CSS样式”面板提供了对样式表的设置和管理的全部功能，打开文档后，选择“窗口”“CSS样式”命令，或按快捷键Shift+F11，均可打开“CSS样式”面板。未定义和使用样式时，"CSS样式”面板不显示任何样式内容，如图2-129所示;定义了样式后，"CSS样式”面板显示已有的样式和使用中的样式信息，如图2-130所示。 返回 下一页 上一页 2. 10 CSS样式 要能够熟练地利用CSS样式面板进行样式管理，首先应熟悉“CSS样式”面板的各个构成要素，如图2-131所示，其中各要素的说明如下。 类别视图:在CSS样式面板的属性栏中，将属性划分为8个类别—字体、背景、区块、边框、方框、列表、定位和扩展。每个类别的属性都包含在一个列表中，可以单击类别。 (1)名称旁边的加号(+)按钮展开或折叠它。“设置属性”(蓝色)将出现在列表顶部。 (2)列表视图:在CSS样式面板的属性栏中，按字母顺序显示CSS属性。设置属性视图:在CSS样式面板的属性栏中，仅显示已设置的属性。 (3)附加样式表:单击该按钮可以应用已有的CSS样式到当前文本。 返回 下一页 上一页 2. 10 CSS样式 (4)新建CSS样式:单击该按钮可以新建一个CSS样式。 (5)编辑样式:单击该按钮可以编辑当前的CSS样式。 (6)删除CSS样式:单击该按钮可以删除当前CSS样式。 CSS样式面板中还有一个“正在”按钮，单击该按钮可显示当前所选元素使用的CSS样式。 2.10.2新建CSS样式 新建CSS样式的方法如下。 (1)新建一个HTML文件。 (2)单击CSS样式面板中的“新建CSS规则”按钮，打开如图2-132所示的“新建CSS规则”对话框。 返回 下一页 上一页 2. 10 CSS样式 “新建CSS规则”对话框中各选项的含义如下: ·选择器类型:从列表中选择新建CSS样式的类型，有类、标签和高级3个选项。 ·定义在:有两个选项，“新建样式表文件”和“仅对该文档”。“新建样式表文件”可以定义一个外部CSS样式表。为了使网站整体风格一致，通常创建外部的CSS样式表，供站点中的页面使用。“仅对该文档”可以创建一个当前文档的内部CSS样式，这个样式表保存在当前文档中。 (3)选择目标类型，单击“确定”按钮，进入到CSS样式定义窗口，定义CSS样式列表。 下面分别讲解类、标签和高级3个选项的CSS样式的制作。 返回 下一页 上一页 2. 10 CSS样式 2.10.3使用类自定义规则 类选项可以设计新的CSS样式，可以定义该项的名称及样式的组合。 (1)新建HTML文件。 (2)单击CSS样式面板中的“新建CSS规则”按钮，弹出图2-133所示的“新建CSS规则”对话框。在选择器类型选项区域中选中“类”单选按钮，在名称栏中输入text，选择“定义在”选项下的“仅对该文档”。 (3)单击“确定”按钮，打开图2-134所示的“text的CSS规则定义”窗口。首选项为类型选项，在类型选项区域中可定义文本的字体，大小等选项。 返回 下一页 上一页 2. 10 CSS样式 字体:单击该项右侧的下拉按钮，会弹出字体选择菜单，可在菜单中选择所需选项。 大小:选择字号或输入数值精确控制字的大小。 样式:有正常、偏斜体、斜体。偏斜体比斜体倾斜的角度略小。 行高:可输入数值，控制两行文本之间的距离。单位有磅、像素、英寸、厘米、百分比。 修饰:常用的设置有带下划线文字、带上划线文字、带删除线文字。 ·粗细:可设置文字为正常、粗、细。 ·大小写:设置英文单同首字母大写、全部大写或全部小写。 ·颜色:设置文本的字体、大小、颜色，使用方法与文本属性面板基本相同。 返回 下一页 上一页 2. 10 CSS样式 (4)如图2-135所示，单击分类栏中的“背景”选项。 背景栏中各选项的含义如下。 ·背景颜色:设置网页或网页元素(如表格)的背景颜色，单击该项的颜色块可以打开颜色样本面板，从中可以选择所需颜色。 ·背景图像:设置网页或网页元素(如表格)的背景图案。单击“浏览”按钮可以打开如图2-136所示的“选择图像源文件”对话框，通过该对话框可以查找和选择目标背景图像。 ·重复:设置当图像不足以填充网页或网页元素时是否重复填充以及如何重复填充。 “重复”为默认值，图像由左向右由上向下重复填充。横向重复、纵向重复分别指在水平或垂直方向上重复图像