资源描述
网页设计与制作教程(第4版）,机械工业出版社同名教材配套电子教案,CSS简介CSS样式面板创建并使用内部样式表创建并使用外部CSS样式五实训,第7章网页表现语言CSS,7.1.1CSS的特点和用途CSS是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。CSS样式表是由一系列样式选择器和CSS属性组成的，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性及精确定位网页元素等属性，从而大大增强了网页的格式化能力。CSS的出现简化了这样的工作，CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。当需要更改这些页面的样式设置时，只要在样式表中进行修改，而不用对每个页面逐个修改，从而大大简化了格式化的工作。,7.1CSS简介,7.1.2CSS规则样式由一组规则定义并存放在与要设置格式的实际文本分离的位置（通常在外部样式表或HTML文档的文件头部分中）。因此，可以将h1标签的某个规则一次应用于多个标签（如果在外部样式表中，则可以将此规则一次应用于多个不同页面上的标签）。通过这种方式，CSS可提供非常便利的更新功能。如果用户在一个位置更新CSS规则，使用已定义样式的所有元素的格式设置将自动更新为新样式。,7.1CSS简介,7.1.3CSS常用属性用户可以定义CSS规则的属性，如文本字体、背景图像和颜色、间距和布局属性以及列表元素外观。首先创建新规则，然后定义下列任意属性。1定义CSS类型属性2定义CSS样式背景属性3定义CSS样式区块属性4定义CSS样式方框属性5定义CSS样式边框属性6定义CSS样式列表属性7定义CSS样式定位属性8定义CSS样式扩展属性,7.1CSS简介,1CSS样式面板视图在“全部”模式和“正在”模式下，CSS样式面板都允许用户在属性窗格中改变3种视图状态。类别视图：将Dreamweaver支持的CSS属性分为八个类别：字体、背景、区块、边框、方框、列表、定位和扩展名。每个类别的属性都包含在一个列表中，用户可以单击类别名称旁边的加号按钮展开或折叠它。列表视图：按照字母顺序显示Dreamweaver支持的所有CSS属性。属性视图：为默认视图，仅显示那些已进行设置的属性。,7.2CSS样式面板,2CSS样式面板按钮在“全部”模式和“正在”模式下，CSS样式面板还包含4个按钮。附加：附加链接到或导入到当前文档中的外部样式表。新建：新建CSS规则，用户可以选择要创建的样式类型。编辑：编辑当前文档或外部样式表中的样式。删除：删除CSS样式面板中选定的规则或属性，并从它所应用的所有元素中删除格式设置。,7.2CSS样式面板,7.3.1创建自定义样式创建自定义样式的方法如下：将插入点放在文档中，然后执行以下操作之一：执行“格式”“CSS样式”“新建”命令。在CSS样式面板中，单击面板右下侧的“新建CSS规则”按钮。在文档窗口中选择文本，从属性面板的“目标规则”弹出菜单中选择“新CSS规则”，然后单击“编辑规则”按钮。,7.3创建并使用内部样式表,7.3.2创建仅应用于一个HTML元素的样式创建仅应用于一个HTML元素的样式的方法如下：打开“新建CSS规则”对话框。在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“ID（仅应用于一个HTML元素）”，然后在“选择器名称”文本框中输入ID名称，例如，#myhead1。,7.3创建并使用内部样式表,7.3.3创建重定义HTML标签样式创建重定义HTML标签样式的方法如下：打开“新建CSS规则”对话框。在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“标签（重新定义HTML元素）”，然后在“选择器名称”文本框中输入或从下拉列表中选择HTML元素的名称，例如，h1，如图7-18所示。选择定义规则的位置。,7.3创建并使用内部样式表,7.3.4创建链接样式创建重定义HTML标签样式的方法如下：打开“新建CSS规则”对话框。在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“复合内容（基于选择的内容）”，然后在“选择器名称”文本框中输入或从下拉列表中选择超链接状态的名称，例如，a:link，如图7-19所示。选择定义规则的位置。单击“确定”按钮，完成样式属性的设置。,7.3创建并使用内部样式表,7.3.5样式的应用在文档窗口中，选择要应用CSS样式的对象。执行下列操作之一：在CSS样式面板中，选择“全部”模式，右键单击要应用的样式的名称，然后从弹出菜单中选择“套用”，如图7-20所示。从“类”弹出菜单中选择要应用的类样式。在文档窗口中，右键单击所选对象，从弹出菜单中选择“CSS样式”，然后选择要应用的样式。执行“格式”“CSS样式”命令，然后在子菜单中选择要应用的样式。,7.3创建并使用内部样式表,7.3.6案例一：制作曙光大学网站导航条菜单【案例综述】使用CSS样式制作曙光大学网站导航条，该导航条带有下拉菜单。【案例展示】本案例的效果如图7-22所示。,7.3创建并使用内部样式表,7.4.1创建外部样式文件创建外部样式文件的方法如下：打开“新建CSS规则”对话框。在“新建CSS规则”对话框中，指定要创建的CSS规则的选择器类型，输入或选择选择器的名称。选择定义规则的位置为“（新建样式表文件）”，如图7-28所示。单击“确定”按钮，打开“将样式表文件另存为”对话框，输入样式表的文件名，如图7-29所示。单击“保存”按钮，外部样式文件创建完毕。,7.4创建并使用外部CSS样式,7.4.2链接外部样式链接外部样式就是当浏览器读取到HTML文档的样式表链接标记时，将向所链接的外部样式表索取样式。1代码链接方式2操作链接方式,7.4创建并使用外部CSS样式,7.4.3案例二：创建曙光大学网站样式【案例综述】创建曙光大学网站外部样式统一网站的风格。【案例展示】将曙光大学网站首页的内部样式转换为外部样式后，网站首页的风格与使用内部样式完全一致，效果如图7-34所示。,7.4创建并使用外部CSS样式,7.5.1制作“爱家美食”网站奶茶评测页面【实训综述】使用内部样式制作“爱家美食”网站奶茶评测页面。【实训展示】实例效果如图7-40所示。,7.5实训,7.5.2实训二：创建“爱家美食”网站样式【实训综述】读者在学习了CSS样式的基础上，进一步加强样式的定义与应用练习，积累更多的样式使用经验。【实训展示】创建“爱家美食”网站的外部样式，应用样式后的页面效果如图7-41所示。,7.5实训,1使用CSS样式制作如图7-42所示的页面。2使用CSS样式制作如图7-43所示的页面。3打开站长书库CSS教程页面（,7.6习题,
展开阅读全文