《网页表现语言——CSS单飞的鞋子》由会员分享，可在线阅读，更多相关《网页表现语言——CSS单飞的鞋子（19页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作教程网页设计与制作教程 ( (第第4 4版）版）机械工业出版社同名教材机械工业出版社同名教材 配套电子教案配套电子教案一一 CSSCSS简介简介二二 CSSCSS样式面板样式面板三三 创建并使用内部样式表创建并使用内部样式表四四 创建并使用外部创建并使用外部CSSCSS样式样式五五 实实训训第第7 7章章 网页表现语言网页表现语言CSSCSS7.1.1 CSS7.1.1 CSS的特点和用途的特点和用途CSSCSS是一种格式化网页的标准方式，它扩展了是一种格式化网页的标准方式，它扩展了HTMLHTML的功的功 能，使网页设计者能够以更有效的方式设置网页格式。能，使网页设计者能够以更
2、有效的方式设置网页格式。CSSCSS 样式表是由一系列样式选择器和样式表是由一系列样式选择器和CSSCSS属性组成的，它支持字属性组成的，它支持字 体属性、颜色和背景属性、文本属性、边框属性、列表属性体属性、颜色和背景属性、文本属性、边框属性、列表属性 及精确定位网页元素等属性，从而大大增强了网页的格式化及精确定位网页元素等属性，从而大大增强了网页的格式化 能力能力。CSS CSS的出现简化了这样的工作，的出现简化了这样的工作，CSSCSS是通过对页面结构的是通过对页面结构的 风格控制的思想，控制整个页面的风格的。当需要更改这些风格控制的思想，控制整个页面的风格的。当需要更改这些 页面的样式设
3、置时，只要在样式表中进行修改，而不用对每页面的样式设置时，只要在样式表中进行修改，而不用对每 个页面逐个修改，从而大大简化了格式化的工作。个页面逐个修改，从而大大简化了格式化的工作。7.1 CSS7.1 CSS简介简介7.1.2 CSS7.1.2 CSS规则规则样式样式由一组规则定义并存放在与要设置格式的实际文本由一组规则定义并存放在与要设置格式的实际文本 分离的位置（通常在外部样式表或分离的位置（通常在外部样式表或HTMLHTML文档的文件头部分文档的文件头部分 中）。因此，可以将中）。因此，可以将h1h1标签的某个规则一次应用于多个标签标签的某个规则一次应用于多个标签 （如果在外部样式表中
4、，则可以将此规则一次应用于多个不（如果在外部样式表中，则可以将此规则一次应用于多个不 同页面上的标签）。通过这种方式，同页面上的标签）。通过这种方式，CSSCSS可提供非常便利的可提供非常便利的 更新功能。如果用户在一个位置更新更新功能。如果用户在一个位置更新CSSCSS规则，使用已定义规则，使用已定义 样式的所有元素的格式设置将自动更新为新样式。样式的所有元素的格式设置将自动更新为新样式。7.1 CSS7.1 CSS简介简介7.1.3 CSS7.1.3 CSS常用属性常用属性用户用户可以定义可以定义CSSCSS规则的属性，如文本字体、背景图像和规则的属性，如文本字体、背景图像和 颜色、间距和
5、布局属性以及列表元素外观。首先创建新规则颜色、间距和布局属性以及列表元素外观。首先创建新规则 ，然后定义下列任意属性。，然后定义下列任意属性。1 1定义定义CSSCSS类型类型属性属性2 2定义定义CSSCSS样式背景属性样式背景属性3 3定义定义CSSCSS样式区块属性样式区块属性4 4定义定义CSSCSS样式方框属性样式方框属性5 5定义定义CSSCSS样式边框属性样式边框属性6 6定义定义CSSCSS样式列表属性样式列表属性7 7定义定义CSSCSS样式定位样式定位属性属性8 8定义定义CSSCSS样式扩展属性样式扩展属性7.1 CSS7.1 CSS简介简介1 1CSSCSS样式面板视图
6、样式面板视图在在“ “全部全部” ”模式和模式和“ “正在正在” ”模式下，模式下，CSSCSS样式面板都允许用户在样式面板都允许用户在 属性窗格中改变属性窗格中改变3 3种视图种视图状态。状态。 类别视图：将类别视图：将DreamweaverDreamweaver支持的支持的CSSCSS属性分为八个类别属性分为八个类别 ：字体、背景、区块、边框、方框、列表、定位和扩展名。：字体、背景、区块、边框、方框、列表、定位和扩展名。 每个类别的属性都包含在一个列表中，用户可以单击类别名每个类别的属性都包含在一个列表中，用户可以单击类别名 称旁边的加号按钮称旁边的加号按钮 展开或折叠它。展开或折叠它。
7、列表视图：按照字母顺序显示列表视图：按照字母顺序显示DreamweaverDreamweaver支持的所有支持的所有 CSSCSS属性。属性。 属性视图：为默认视图，仅显示那些已进行设置的属性。属性视图：为默认视图，仅显示那些已进行设置的属性。7.2 CSS7.2 CSS样式面板样式面板2 2CSSCSS样式面板按钮样式面板按钮在在“ “全部全部” ”模式和模式和“ “正在正在” ”模式下，模式下，CSSCSS样式面板还样式面板还包含包含4 4个按钮个按钮 。 附加：附加链接到或导入到当前文档中的外部样式表。附加：附加链接到或导入到当前文档中的外部样式表。 新建：新建新建：新建CSSCSS规则
8、，用户可以选择要创建的样式类型。规则，用户可以选择要创建的样式类型。 编辑：编辑当前文档或外部样式表中的样式。编辑：编辑当前文档或外部样式表中的样式。 删除：删除删除：删除CSSCSS样式面板中选定的规则或属性，并从它所样式面板中选定的规则或属性，并从它所 应用的所有元素中删除格式设置。应用的所有元素中删除格式设置。7.2 CSS7.2 CSS样式面板样式面板7.3.1 7.3.1 创建自定义样式创建自定义样式创建自定义样式的方法如下：创建自定义样式的方法如下：将将插入点放在文档中，然后执行以下操作之一：插入点放在文档中，然后执行以下操作之一： 执行执行“ “格式格式”“”“CSSCSS样式样
9、式”“”“新建新建” ”命令。命令。 在在CSSCSS样式面板中，单击面板右下侧的样式面板中，单击面板右下侧的“ “新建新建CSSCSS规则规则” ”按按 钮钮 。 在文档窗口中选择文本，从属性面板的在文档窗口中选择文本，从属性面板的“ “目标规则目标规则” ”弹出菜弹出菜 单中选择单中选择“ “新新CSSCSS规则规则” ”，然后单击，然后单击“ “编辑规则编辑规则” ”按钮。按钮。7.3 7.3 创建并使用内部样式表创建并使用内部样式表7.3.2 7.3.2 创建仅应用于一个创建仅应用于一个HTMLHTML元素的样式元素的样式创建仅应用于一个创建仅应用于一个HTMLHTML元素的样式的方法
10、如下：元素的样式的方法如下： 打开打开“ “新建新建CSSCSS规则规则” ”对话框。对话框。 在在“ “新建新建CSSCSS规则规则” ”对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的“ “选选 择器类型择器类型” ”为为“ “IDID（仅应用于一个（仅应用于一个HTMLHTML元素）元素）” ”，然后在，然后在“ “选选 择器名称择器名称” ”文本框中输入文本框中输入IDID名称，例如，名称，例如，# #myhead1myhead1。7.3 7.3 创建并使用内部样式表创建并使用内部样式表7.3.3 7.3.3 创建重定义创建重定义HTMLHTML标签样式标签样式创建
11、重定义创建重定义HTMLHTML标签样式的方法如下：标签样式的方法如下： 打开打开“ “新建新建CSSCSS规则规则” ”对话框。对话框。 在在“ “新建新建CSSCSS规则规则” ”对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的“ “选选 择器类型择器类型” ”为为“ “标签（重新定义标签（重新定义HTMLHTML元素）元素）” ”，然后在，然后在“ “选择选择 器名称器名称” ”文本框中输入或从下拉列表中选择文本框中输入或从下拉列表中选择HTMLHTML元素的名称元素的名称 ，例如，例如，h1h1，如图，如图7-187-18所示。所示。 选择定义规则的位置。选择定义规
12、则的位置。7.3 7.3 创建并使用内部样式表创建并使用内部样式表7.3.4 7.3.4 创建链接样式创建链接样式创建重定义创建重定义HTMLHTML标签样式的方法如下：标签样式的方法如下： 打开打开“ “新建新建CSSCSS规则规则” ”对话框。对话框。 在在“ “新建新建CSSCSS规则规则” ”对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的规则的“ “选选 择器类型择器类型” ”为为“ “复合内容（基于选择的内容）复合内容（基于选择的内容）” ”，然后在，然后在“ “选择选择 器名称器名称” ”文本框中输入或从下拉列表中选择超链接状态的名称文本框中输入或从下拉列表中选择超
13、链接状态的名称 ，例如，例如，a:linka:link，如图，如图7-197-19所示。所示。 选择定义规则的位置。选择定义规则的位置。 单击单击“ “确定确定” ”按钮，完成样式属性的设置。按钮，完成样式属性的设置。7.3 7.3 创建并使用内部样式表创建并使用内部样式表7.3.5 7.3.5 样式的应用样式的应用 在文档窗口中，选择要应用在文档窗口中，选择要应用CSSCSS样式的对象。样式的对象。 执行下列操作之一：执行下列操作之一： 在在CSSCSS样式面板中，选择样式面板中，选择“ “全部全部” ”模式，右键单击要应用的模式，右键单击要应用的 样式的名称，然后从弹出菜单中选择样式的名称
14、，然后从弹出菜单中选择“ “套用套用” ”，如图，如图7-207-20所示所示 。 从从“ “类类” ”弹出菜单中选择要应用的类样式。弹出菜单中选择要应用的类样式。 在文档窗口中，右键单击所选对象，从弹出菜单中选择在文档窗口中，右键单击所选对象，从弹出菜单中选择 “ “CSSCSS样式样式” ”，然后选择要应用的样式。，然后选择要应用的样式。 执行执行“ “格式格式”“”“CSSCSS样式样式” ”命令，然后在子菜单中选择要应命令，然后在子菜单中选择要应 用的样式。用的样式。7.3 7.3 创建并使用内部样式表创建并使用内部样式表7.3.6 7.3.6 案例一：制作曙光大学网站导航条菜单案例一
15、：制作曙光大学网站导航条菜单【案例综述案例综述】使用使用CSSCSS样式制作曙光大学网站导航条，该导样式制作曙光大学网站导航条，该导 航条带有下拉菜单。航条带有下拉菜单。【案例展示案例展示】本案例的效果如图本案例的效果如图7-227-22所示。所示。7.3 7.3 创建并使用内部样式表创建并使用内部样式表7.4.1 7.4.1 创建外部样式文件创建外部样式文件创建外部样式文件的方法如下：创建外部样式文件的方法如下： 打开打开“ “新建新建CSSCSS规则规则” ”对话框。对话框。 在在“ “新建新建CSSCSS规则规则” ”对话框中，指定要创建的对话框中，指定要创建的CSSCSS规则的选规则的
16、选 择器类型，输入或选择选择器的名称。择器类型，输入或选择选择器的名称。 选择定义规则的位置为选择定义规则的位置为“ “（新建样式表文件）（新建样式表文件）” ”，如图，如图7-287-28 所示。所示。 单击单击“ “确定确定” ”按钮，打开按钮，打开“ “将样式表文件另存为将样式表文件另存为” ”对话框，输对话框，输 入样式表的文件名，如图入样式表的文件名，如图7-297-29所示。单击所示。单击“ “保存保存” ”按钮，外部按钮，外部 样式文件创建完毕。样式文件创建完毕。7.4 7.4 创建并使用外部创建并使用外部CSSCSS样式样式7.4.2 7.4.2 链接外部样式链接外部样式链接外部样式就是当浏览器读取
