资源描述
,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第4章 使用CSS样式美化网页,本章学习要点：,1CSS层叠样式表基础知识,2创建CSS层叠样式表,3管理CSS层叠样式表,4应用CSS层叠样式表,第4章 使用CSS样式美化网页本章学习要点：,1,4.1 认识CSS样式,CSS样式即层叠样式表，是Cascading Style Sheets的缩写，它能够控制网页样式、统一站点风格，并允许网页样式与内容相分离。通过使用CSS样式，能够节省许多重复性的格式设置，使用户很轻松地设置网页元素的显示格式和位置，从而提高了网页的整体美观。,4.1 认识CSS样式 CSS样式即层叠样式表，是,2,4.1.1 认识【CSS样式】面板,css样式面板,4.1.1 认识【CSS样式】面板,3,4.1.2 CSS样式表分类,根据CSS样式表存放的位置以及其应用范围，CSS样式表分为以下三种：,1外部CSS,2内部CSS,3内联CSS,4.1.2 CSS样式表分类 根据CSS样式表,4,4.1.3 CSS基本语法,CSS格式设置规则由两部分组成：选择器和声明。选择器需要标识已设置格式元素（如A标签、类名称、ID或复合内容）的术语，而声明则用于定义样式元素。,4.1.3 CSS基本语法 CSS格式设置规,5,声明由属性和值两部分组成，中间使用半角英文下的冒号“:”分隔,如“.txt”类的定义：,.txt color:#FFF;background-color:#39C;,font-size:18px;line-height:15px;,4.1.3 CSS基本语法,声明由属性和值两部分组成，中间使用半角英文下,6,4.2 创建CSS样式,单击【CSS面板】右下角的按钮，弹出【新建CSS规则】对话框，如下图所示：,4.2 创建CSS样式 单击【CSS面板】右下,7,4.2 创建CSS样式,1类：可用于HTML中的任何元素。,2ID：只能应用于唯一的标签，并且该标签的ID也是唯一的。,3标签：用于重新定义某个HTML标签的格式，即定义某种类型页面元素的格式。,4复合内容：用于创建或改变一个或多个类、ID或标签的复合规则样式表。,4.2 创建CSS样式1类：可用于HTML中的任何元素。,8,4.2.1 建立内部CSS样式表,1内联CSS样式,内联CSS样式是所有CSS样式中比较简单和直观的方法，即直接把CSS样式代码添加到HTML的标签中，作为HTML标签的属性存在。,例如：“蓝色18像素显示的内联CSS样式文本信息”。,4.2.1 建立内部CSS样式表1内联CSS样式,9,4.2.1 建立内部CSS样式表,2内部CSS样式,内部CSS样式即将CSS样式代码添加到“”标签之间，并且用“”标签进行声明。,内部CSS样式即在【新建CSS规则】对话框中，选择【选择器类型】，并输入或选择【选择器名称】，在【规则定义】中选择“仅限该文档”选项。,4.2.1 建立内部CSS样式表2内部CSS样式,10,4.2.2 建立外部CSS样式表,建立外部样式表的方法与内部样式表的过程相同，只是在【规则定义】中要选择“新建样式表文件”选项。,4.2.2 建立外部CSS样式表 建立外部样式表,11,4.3 应用CSS样式,4.3.1 应用内部CSS样式表,1应用【类】规则,2应用【ID】规则,3应用【标签】规则,4应用【复合内容】规则,4.3 应用CSS样式4.3.1 应用内部CSS样式表,12,4.3.2 应用外部CSS样式表,外部样式表创建并保存后，可以随时调用该样式表，并应用在任意所需的文档中。若用户需要将外部CSS文件导入到打开的网页文档中，则可以在【CSS样式】面板中单击按钮，打开【链接外部样式表】对话框，如下图所示。,4.3.2 应用外部CSS样式表 外部样式表创,13,4.3.2 应用外部CSS样式表,通过单击【浏览】按钮，在弹出的【选择样式表文件】对话框中查找外部的样式表文件，如下图所示。,4.3.2 应用外部CSS样式表 通过单击【浏,14,4.4 利用CSS样式表美化网页,4.4.1 设置【类型】属性,4.4 利用CSS样式表美化网页4.4.1 设置【类型】属性,15,4.4 利用CSS样式表美化网页,4.4.2 设置【背景】属性,4.4 利用CSS样式表美化网页4.4.2 设置【背景】属性,16,4.4 利用CSS样式表美化网页,4.4.3 设置【区块】属性,4.4 利用CSS样式表美化网页4.4.3 设置【区块】属性,17,4.4 利用CSS样式表美化网页,4.4.3 设置【区块】属性,4.4 利用CSS样式表美化网页4.4.3 设置【区块】属性,18,4.4 利用CSS样式表美化网页,4.4.4 设置【方框】属性,4.4 利用CSS样式表美化网页4.4.4 设置【方框】属性,19,4.4 利用CSS样式表美化网页,4.4.5 设置【边框】属性,4.4 利用CSS样式表美化网页4.4.5 设置【边框】属性,20,4.4 利用CSS样式表美化网页,4.4.6 设置【列表】属性,4.4 利用CSS样式表美化网页4.4.6 设置【列表】属性,21,4.4 利用CSS样式表美化网页,4.4.6 设置【列表】属性,4.4 利用CSS样式表美化网页4.4.6 设置【列表】属性,22,4.4 利用CSS样式表美化网页,4.4.7 设置【定位】属性,4.4 利用CSS样式表美化网页4.4.7 设置【定位】属性,23,4.4 利用CSS样式表美化网页,4.4.8 设置【扩展】属性,4.4 利用CSS样式表美化网页4.4.8 设置【扩展】属性,24,4.4 利用CSS样式表美化网页,4.4.9 设置【过渡】属性,4.4 利用CSS样式表美化网页4.4.9 设置【过渡】属性,25,4.5 课堂案例CSS应用,具体操作步骤：,1打开光盘文件“examplechapter04index1.html”，如下图所示：,4.5 课堂案例CSS应用具体操作步骤：,26,4.5 课堂案例CSS应用,2创建内联CSS样式,（1）在标签选择器选择“”后的“”标签,（2）单击【拆分】按钮，进入拆分视图,（3）将鼠标光标定位到左侧代码窗口已选区域的“”标签内部，输入一个空格，在展开的提示列表中选择“style”,（4）根据提示输入或选择“style”的“background”属性值，即“”。,内联CSS样式是直接在HTML标签中使用style属性，因此无需套用即可显示样式，网页效果如下图所示。,4.5 课堂案例CSS应用2创建内联CSS样式,27,4.5 课堂案例CSS应用,应用内联CSS样式,4.5 课堂案例CSS应用 应用内联CSS样,28,4.5 课堂案例CSS应用,2创建内部CSS样式,选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，单击面板底部按钮，打开【新建CSS规则】对话框，通过选取不同的【选择器类型】来创建不同的CSS样式。,4.5 课堂案例CSS应用2创建内部CSS样式,29,4.5 课堂案例CSS应用,(1)类：.hd的CSS规则定义,4.5 课堂案例CSS应用(1)类：.hd的CSS规则,30,4.5 课堂案例CSS应用,(1)类：.txt的CSS规则定义,4.5 课堂案例CSS应用(1)类：.txt的CSS规,31,4.5 课堂案例CSS应用,(1)类：.txt的CSS规则定义,4.5 课堂案例CSS应用(1)类：.txt的CSS规,32,4.5 课堂案例CSS应用,应用CSS样式,（1）选中设计窗口中“生活感悟”文本,（2）右键单击【CSS面板】【所有规则】下的“.Hd”样式,（3）在弹出的快捷菜单中选择“应用”。,（4）分别选中设计窗口左侧的日记列表和窗口右侧“生活感悟”下的所有文本,（5）使用上述方法应用“.txt”样式。,4.5 课堂案例CSS应用应用CSS样式,33,4.5 课堂案例CSS应用,应用【类】CSS样式后的网页效果如下图所示：,4.5 课堂案例CSS应用应用【类】CSS样式后的网页效果,34,（2）ID,本例定义了ID为“top”的窗口顶部单元格的样式。,定义CSS样式,在【选择器类型】中选择【ID（仅应用于一个HTML元素）】，在【选择器名称】下拉列表中选择“#top”，单击【确定】按钮，并设置【背景】的【Background-color】属性为“#AACF68”。,应用CSS样式,当元素已经被赋予ID，对应的ID规则会自动匹配。应用【ID】样式后的网页效果如下图所示：,4.5 课堂案例CSS应用,（2）ID4.5 课堂案例CSS应用,35,4.5 课堂案例CSS应用,（3）标签,本例重定义了超链接标签“a”标签的样式。,定义CSS样式,在【选择器类型】中选择【标签（重新定义HTML元素）】，在【选择器名称】中选择“a”，单击【确定】按钮，属性设置如下图所示。,应用CSS样式,对“a”标签重定义后，系统会自动应用到具有“a”标签，即具有超级链接的网页元素上。,4.5 课堂案例CSS应用（3）标签,36,4.5 课堂案例CSS应用,标签“a”的CSS规则定义,4.5 课堂案例CSS应用标签“a”的CSS规则定义,37,（4）复合内容,本例定义了页面底部单元格的背景图像。,定义样式,（1）新建CSS规则，【选择器类型】自动选择【复合内容（基于选择的内容）】,（2）【选择器名称】自动输入“#tb tr#bot”,（3）设置【背景】的【Background-image】属性为“images/bot.png”。,应用样式,【复合内容】CSS样式是以上3类规则使用方法进行结合来应用样式的。应用样式后的网页效果如下图所示：,4.5 课堂案例CSS应用,（4）复合内容4.5 课堂案例CSS应用,38,3导入CSS样式,本例定义的是标题文本样式。,（1）单击【CSS面板】底部按钮，打开【链接外部样式表】对话框,（2）选择【文件/URL】为“chang3css.css”，【添加为】选择“导入”，单击【确定】按钮。,4.5 课堂案例CSS应用,3导入CSS样式4.5 课堂案例CSS应用,39,4.5 课堂案例CSS应用,（2）应用CSS样式,应用类,选中“我的每一天”和“人生如茶，静心以对”文本，右侧单击“.myday”样式，在弹出的快捷菜单中选择“应用”，然后再次选择“人生如茶，静心以对”文本，应用“.hd”样式，完成文本样式的套用。,4.5 课堂案例CSS应用（2）应用CSS样式,40,4.5 课堂案例CSS应用,应用标签样式,分别选中“5月2日 晴 星期三”、“5月3日 晴 星期四”和“5月4日 阴 星期五”文本，单击【属性】检查器【HTML】标签上【格式】后的下拉列表，在弹出的列表中选择“标题3”。设置了标题的文本会自动应用“h3”样式。,4.5 课堂案例CSS应用应用标签样式,41,4.5 课堂案例CSS应用,整个网页效果如下图所示：,4.5 课堂案例CSS应用整个网页效果如下图所示：,42,
展开阅读全文