网页设计与制作 普通高等教育“十一五”国家级规划教材 作者 于筱荔 第21章 样式风格设计.pptVIP

21.1.3 CSS的语法规则 　　CSS样式由两部分组成：选择器和声明。例如： H1 { Font-size: 16 pixels; Font-family: Helvetica; Font-weight: bold; } CSS术语中的cascading表示向同一个元素应用多种样式的能力。多个定义的样式向下“层叠”到Web页面上的元素，并最终创建用户想要的设计效果。 21.2.3 “CSS样式”面板中的按钮 面板底部共有7个按钮： （1）“选择器类型”选项组用于选择要定制的样式类型： 类（可用于任何标签）：创建可作为class属性应用于文本范围或文本块的自定义样式。 标签（重新定义特定标签的外观）：重定义特定HTML标签的默认格式设置。 高级（ID、伪类选择器等）：为具体某个标签组合或所有包含Id属性的标签定义格式设置。 （2）“名称”下拉列表随“选择器类型” 的类型不同而变化。 选择“类”选项时：则为“名称”文本框，用于输入样式名称。此类样式名必须以英文句号开头，可以包含任何字母和数字组合，如.style1。 选择“标签”选项时：则为“标签”下拉列表，用于输入或从下拉列表选择一个HTML标签。 选择“高级”选项时：则为“选择器”下拉列表，用于输入一个或多个HTML标签，也可以从下拉列表提供的选择器中选择一个标签。 （3）“定义在”选项组用于定义样式的使用范围。 “新建样式表文件”单选按钮：定义外部层叠样式表。选择此按钮后单击“确定”按钮，弹出“保存样式表文件为”对话框，要求将样式保存成一个样式文件。 “仅对该文档”单选按钮：定义只能应用于该文档的样式。 1．“类型”部分 如图所示： 2．“背景”部分 如图所示： 3．“区块”部分 如图所示： 4．“方框”部分 如图所示： 5．“边框”部分 如图所示： 6．“列表”部分 如图所示： 7．“定位”部分 如图所示： 8. “扩展”部分 如图所示： 21.4 CSS样式的管理 21.4.1 应用自定义的CSS样式 １．应用自定义的CSS样式 （1）在文档窗口中，选定要应用样式的对象。可以在文档窗口中直接选择对象，也可以使用窗口底部状态栏的标签选择器来选择对象。 （2）从“属性”检查器上的“样式”列表中选择要应用的样式，如图所示。有些样式应用后会立刻在文档窗口中显示出来，有些样式应用后需在IE浏览器中才能显示出来。 21.4 CSS样式的管理 21.4 CSS样式的管理 21.4 CSS样式的管理 说明： 样式表文件的扩展名为“.css”。 “链接”：只是读入样式表中的信息，而没有将信息导入到当前文档中。 “导入”：将外部CSS样式表中的信息导入到当前文档中。 在 “媒体”下拉列表中选择样式表的目标媒体。 单击“确定”按钮，在CSS样式面板的“全部”模式下，可以看到附加的外部CSS样式表文件。 21.4 CSS样式的管理 21.4.3 导出外部CSS样式表 为了达到样式的共享，可以导出文档中存在的所有样式： （1）打开CSS样式面板，切换到“全部”模式。 （2）选择要导出的样式，并单击鼠标右键，从弹出的菜单中选择“导出”，出现“导出样式为CSS文件”对话框。 （3）设置样式文件的文件名和文件夹位置，单击“保存”按钮，关闭对话框，完成样式的导出。 21.4 CSS样式的管理 21.4.4 编辑CSS样式表 １．编辑当前文档中创建的CSS样式表 在CSS样式面板的“全部”模式下，选择要修改的样式，然后采取以下任意一种方法来进行编辑： 单击鼠标右键，从菜单中选择“编辑”，在对话框中编辑。 单击CSS样式面板下方的“编辑样式”按钮。 双击要修改的样式。 在“全部”模式的“属性”窗格中，直接进行编辑。 注：编辑完成后，系统会立即重新格式化所有该样式表控制的对象。 21.4 CSS样式的管理 2．编辑外部CSS样式表 方法一：在应用它的文档中进行编辑。编辑方法与文档中创建的样式的编辑方法一样。编辑时，会自动弹出样式表文件的代码窗口，所进行的修改不仅会立即反映到文档窗口中，而且也会反映到外部样式表文件中，因此，在编辑完成后还需对该样式文件进行保存。 方法二：打开外部样式表文件进行编辑。打开需要更新的样式表文件，直接对其中的样式属性进行编辑，完成后保存并关闭样式表文件。网站中所有应用该样式表的内容将全部自动更新。 21.4 CSS样式的管理 21.4.5 CSS样式的优先顺序 （1）如果将两种样式应用于同一文本，在没有