第9章_CSS样式表课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,9,章,CSS,样式表,学习目标：,CSS,样式表概述,CSS,样式表的应用,CSS,样式表的使用方法,利用,CSS,样式表制作网页,主要内容,9.1 CSS,样式表概述,9.2 CSS,样式表的应用,9.3,实例,使用,CSS,样式控制页面,9.4 DIV+CSS,布局,9.1 CSS,样式表概述,CSS,样式表的适用场合,保证一个网页上相同要素具有一致的风格，可以使用,CSS,样式表,为了保证同一个网站上多个网页风格一致，使这些网页上相同要素具有相同的样式,通过,CSS,样式定义,DIV,标签，实现网页布局设计,多个网页上存在多个方框或边框要求样式一致,CSS,样式表应用举例,【,实例,1】,通过,CSS,样式表控制主页中字体及超级链接样式,【,实例,2】,使用,CSS,样式表为多个网页设置相同的样式,9.2 CSS,样式表的应用,在,Dreamweaver,中定义,CSS,样式表,创建,CSS,样式表,修改,CSS,样式表,删除,CSS,样式表,CSS,样式表的使用方法,CSS,样式表的语法结构,选择符,属性,1,：值,1,；属性,2,：值,2,选择符可以是类、,ID,或标签之一。,参数说明：属性和属性值之间用“：”隔开，多个属性之间用“；隔开,CSS,样式表的使用方法,方法一：内联式样式单,方法二：嵌入式样式单,方法三：外部式样式单,9.3,实例,使用,CSS,样式控制页面,创建内嵌式,CSS,样式表,打开“窗口”菜单，单击“,CSS,样式”命令，或者用快捷键,shift+F11,，打开,CSS,面板,在,CSS,面板下方单击（新建,CSS,规则）按钮，打开下列对话框,9.3,实例,使用,CSS,样式控制页面,设置完成后单击“确定”按钮，打开下列对话框，按图中所示设置对话框上参数,9.3,实例,使用,CSS,样式控制页面,创建外部链接式,CSS,样式表,打开,CSS,面板，方法同前,打开新建,CSS,规则对话框，按下图进行参数设置，规则定义列表框一定要选择“新建样式表文件”,9.3,实例,使用,CSS,样式控制页面,单击“确定”按钮，打开“将样式表文件另存为”对话框，如下图所示，选择保存路径为,CSS,文件夹，输入文件名,yangshi,9.3,实例,使用,CSS,样式控制页面,单击“保存”按钮，打开如上图所示对话框，按下图所示设置参数，定义,wenzi,选择器的,CSS,规则,9.3,实例,使用,CSS,样式控制页面,9.3,实例,使用,CSS,样式控制页面,采用上述方法定义,biankuang,的,CSS,规则，参数设置如下图所示,9.3,实例,使用,CSS,样式控制页面,9.3,实例,使用,CSS,样式控制页面,采用上述方法定义,bankuai,的,CSS,规则，参数设置如下图所示,9.3,实例,使用,CSS,样式控制页面,9.3,实例,使用,CSS,样式控制页面,采用上述方法定义,a:link,的,CSS,规则，参数设置如下图所示,9.3,实例,使用,CSS,样式控制页面,采用上述方法定义,a:hover,的,CSS,规则，参数设置如下图所示,9.3,实例,使用,CSS,样式控制页面,采用上述方法定义,a:visited,的,CSS,规则，参数设置如下图所示,9.3,实例,使用,CSS,样式控制页面,把外部,CSS,样式表链接到页面,CSS,样式表文件与网页文件的关系,9.3,实例,使用,CSS,样式控制页面,操作步骤,:,打开未设置样式的主页文件,打开,CSS,样式面板，单击面板下方的（附加样式表）按钮，打开如下图所示“链接外部样式表”对话框，单击“浏览”按钮，打开如下图所示对话框，选择,CSS,文件夹中的,wenzi.css,和,font.css,进行链接，网页中相应的样式即发生改变,链接外部样式表对话框,9.3,实例,使用,CSS,样式控制页面,选择样式表文件对话框,套用,CSS,样式，选中网页上要设置格式的网页元素，在,CSS,面板对应的样式标签上单击右键，执行快捷菜单中的“套用”命令,9.4,DIV+CSS,布局,关于,DIV,DIV+CSS,布局的优势,采用,CSS,布局，,CSS,文件通常看可以共用，从而大大缩减页面代码，提高页面浏览速度,兼容性更好，符合,Web,标准规范的发展趋势，页面可以在几乎所有的浏览器上浏览，不会出现在不同的浏览器中效果有差距的情况,可以缩短网站改版周期。由于网站的布局都是通过外,CSS,文件来控制，只要修改,CSS,文件就可以将许多网页的风格格式同时更新，而不需要逐页地更新强大的字体控制和排版能力。,CSS,控制字体的能力远远优于,标签。,样式和内容相分离。样式部分分离出来放在一个独立样式文件中，而网页主要来放置内容，可以减少未来网页无效的可能性,布局更加灵活。表格布局有很大的局限性，只能遵循,table,tr,td,的格式，而,div,可以,div,ul,li,也可以,div,ol,li,。,在表格布局中，垃圾代码会很多。样式代码和布局代码混合一起，结构比较复杂，而,DIV,更能体现样式和结构相分离，结构的重构性强,9.4,DIV+CSS,布局,DIV+CSS,布局实例,CSS,布局示意图,9.4,DIV+CSS,布局,插入,DIV,标签的方法,:,执行“插入”,|“,布局对象”,|“Div,标签”命令,在“插入”面板的“布局”类别中，单击“插入,Div,标签”按钮,“插入,Div,标签”对话框,9.4,DIV+CSS,布局,新建文档,执行“文件”,|“,新建”命令，弹出“新建文档”对话框,在“新建文档”对话框中，选择“空白页”类别，在“页面类型”中选择“,HTML”,执行“文件”,|“,保存”命令，将文件保存在站点目录下的“,DIV+CSS”,文件夹中，文件命名为“,div+css.html,”,。,创建,CSS,样式表,行“窗口”,|“CSS,样式”命令，弹出“,CSS,样式”面板,单击面板右下角的“新建样式”按钮，弹出“新建,CSS,规则”对话框，设置参数如下图所示，给,Body,标签定义,CSS,样式。,9.4,DIV+CSS,布局,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，打开“,body,的,CSS,规则定义”对话框，在“分类”列表中选择“方框”选项，设置参数如下图所示,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，完成,Body,标签样式的定义,定义,#container,容器。单击“,CSS,样式”面板右下角的“新建样式”按钮，弹出“新建,CSS,规则”对话框，设置参数如下图所示。,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，打开“,#container,的,CSS,规则定义”对话框，设置参数如下图所示,设置“背景”属性,9.4,DIV+CSS,布局,设置“方框”属性,9.4,DIV+CSS,布局,设置“边框”属性,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，完成,#container,容器的定义,定义,#top,容器。单击“,CSS,样式”面板右下角的“新建样式”按钮，弹出“新建,CSS,规则”对话框，设置参数如下图所示,“新建,CSS,规则”对话框,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，打开“,#top,的,CSS,规则定义”对话框，设置参数如下图所示,设置“背景”属性,9.4,DIV+CSS,布局,设置“方框”属性,9.4,DIV+CSS,布局,设置“边框”属性,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，完成,#top,容器的定义。,定义,#left,容器。单击“,CSS,样式”面板右下角的“新建样式”按钮，弹出“新建,CSS,规则”对话框。在“选择器类型”栏中选择,ID,，“选择器名称”栏中输入“,#left”,，“规则定义”栏中选择“（仅限该文档）”。,单击,【,确定,】,按钮，打开“,#left,的,CSS,规则定义”对话框，设置参数如下图所示。,设置“背景”属性,9.4,DIV+CSS,布局,设置“方框”属性,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，完成,#left,容器的定义。,定义,#main,容器。单击“,CSS,样式”面板右下角的“新建样式”按钮，弹出“新建,CSS,规则”对话框。在“选择器类型”栏中选择,ID,，“选择器名称”栏中输入“,#main”,，“规则定义”栏中选择“（仅限该文档）”。,单击,【,确定,】,按钮，打开“,#main,的,CSS,规则定义”对话框，设置参数如下图所示。,设置“背景”属性,9.4,DIV+CSS,布局,设置“方框”属性,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，完成,#main,容器的定义,定义,#bottom,容器。单击“,CSS,样式”面板右下角的“新建样式”按钮，弹出“新建,CSS,规则”对话框。在“选择器类型”栏中选择,ID,，“选择器名称”栏中输入“,#bottom”,，“规则定义”栏中选择“（仅限该文档）”,单击,【,确定,】,按钮，打开“,#bottom,的,CSS,规则定义”对话框，设置参数如下图所示。,“插入,Div,标签”对话框,9.4,DIV+CSS,布局,插入,DIV,标签,在页面中单击，执行“插入”,|“,布局对象”,|“Div,标签”命令，弹出“插入,Div,标签”对话框，在“插入”栏中选择“在插入点”，在“,ID”,栏中选择“,container”,样式，如下图所示,“插入,Div,标签”对话框,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，插入,DIV,标签，修改容器的文字为“,#container”,，如下图所示,“插入,Div,标签”对话框,9.4,DIV+CSS,布局,单击,#container,容器的边框，执行“插入”,|“,布局对象”,|“Div,标签”命令，弹出“插入,Div,标签”对话框，设置相应参数，如下图所示,“插入,Div,标签”对话框,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，插入,DIV,标签，修改容器的文字为“,#top”,，如下图所示,插入,Div,标签,9.4,DIV+CSS,布局,单击,#top,容器的边框，执行“插入”,|“,布局对象”,|“Div,标签”命令，弹出“插入,Div,标签”对话框，设置相应参数，如下图所示,“插入,Div,标签”对话框,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，插入,DIV,标签，修改容器的文字为“,#left”,，如下图所示,插入,Div,标签,9.4,DIV+CSS,布局,单击,#left,容器的边框，执行“插入”,|“,布局对象”,|“Div,标签”命令，弹出“插入,Div,标签”对话框，设置相应参数，如下图所示,插入,Div,标签,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，插入,DIV,标签，修改容器的文字为“,#main”,，如下图所示,插入,Div,标签,9.4,DIV+CSS,布局,单击,#main,容器的边框，执行“插入”,|“,布局对象”,|“Div,标签”命令，弹出“插入,Div,标签”对话框，设置相应参数，如下图所示,“插入,Div,标签”对话框,9.4,DIV+CSS,布局,单击,【,确定,】,按钮，插入,DIV,标签，修改容器的文字为“,#main”,，如下图所示。,插入,Div,标签,在容器中输入内容,