dw教学第七讲css样式.ppt

网网页页三三剑剑客客主主讲讲:刘苗刘苗1编辑ppt第七第七讲讲 CSS样样式式2编辑pptn通通过过本本讲讲的的学学习习，，掌掌握握css属属性性，，熟熟练练应应用用其其规规范范网网页页.教学目教学目标标3编辑pptncss基本概念基本概念n样样式式类类型型n选择选择符符n样样式式规则规则本本讲讲主要内容主要内容4编辑ppt任任务务一、一、CSS概述概述1、概念、概念 CSS全全称称cascading style sheets,即即层层叠叠样样式式表表，，它它对对整整个个页页面面元元素素定定义义一一个个统统一一的的样样式式一一个个样样式式表表可可以以作作用用于于多多个个页页面面.为为方方便便设设立立统统一一风风格格的的网网站站，，DW提提供供了了css样样式式，，css样样式式实实际际上上就就是是含含有有多多个个文文本属性和网本属性和网页页属性的属性的结结合5编辑ppt2、、CSS样样式表式表优优点点n 只只修修改改一一个个.CSS文文件件就就可可以以改改变变页页数数不不定定的的网网页页外外观观和和格格式式通通过过样样式式表表将将样样式式和和HTML标标记记分分离离，，只只要要修修改改样样式式表表就就可可以以改改变变与与之之相相关关联联的的HTML标标记记所所标记标记的内容的的内容的样样式式n 可以自由地控制可以自由地控制页页面布局和外面布局和外观观n 在在报报有有浏览浏览器和平台器和平台间间具有具有较较好的兼容性好的兼容性n 精精简简网网页页，提高下，提高下载载速度速度n 可以精可以精简简HTML代代码码6编辑ppt任任务务二、二、Css样样式的式的创创建建1、用、用类类来定来定义样义样式表（式表（类选择类选择符）符） 用用户户以以“.样样式式表表名名称称”的的格格式式直直接接指指定定其其名名称称，，当当应应用用样样式式表表时时，，以以“Class=‘样样式式表表名名称称’”格格式式插插入入在在要要应应用用的的标标签签前前面面。

这这样样，，可可以以直直接接控控制制样样式式表表的的应应用范用范围围7编辑ppt2、、HTML选择选择符符8编辑ppt3、用、用ID定定义样义样式表（式表（ID选择选择符）符） 这是是根根据据超超链接接的的状状态控控制制属属性性的的样式式表表对文文本本建建立立超超链接接时、、根根据据链接接、、访问、、激激活活状状态分分别显示示蓝色色、、红色色、、紫紫色色下下划划线在在各各状状态属属性性上上应用用样式式表表，，可可以以删除除下下划划线或或者者改改变文文字字颜色色，，而而且且还能能制制作作出出鼠鼠标经过这３３种种状状态的的超超链接文本接文本时显示的菜示的菜单样式9编辑ppt4、、css样样式面板式面板n链接独立的接独立的样式表文件式表文件n 新建一个新建一个HTML元素元素样式式n 编辑存在存在样式表中的元素式表中的元素样式式n 删除当前除当前样式表中的式表中的样式元素式元素10编辑ppt任任务务三、三、CSS样样式表的定式表的定义义和和应应用用1、基本、基本语语法法　　CSS的的 定定 义义 是是 由由 三三 个个 部部 分分 构构 成成 ：： 选选 择择 符符（（selector）），，属属性性(properties)和和属属性性的的取取值值(value). 基本格式如下：基本格式如下：　　　　selector{property:value} 即：即：(选择选择符符){属性属性:值值}11编辑pptn如果属性的如果属性的值值是多个是多个单词组单词组成，必成，必须须在在值值上加引号上加引号比如：比如：sans serif p{font-family:“”,“”}(定定义义段落字体段落字体为为sans serif) 如如果果需需要要对对一一个个选选择择符符指指定定多多个个属属性性时时，，使使用用分分号号将所有的属性和将所有的属性和值值分开分开比如：比如：P{text-align:center;color:red}12编辑pptn可可以以把把相相同同属属性性和和值值的的选选择择符符组组合合起起来来书书写写，，用用逗逗号将号将选择选择符分开，符分开，这样这样可以减少可以减少样样式重复定式重复定义义：：h1,h2,h3,h4,h5,h6{color:green} (这这个个组组里里包包括括所所有有的的标标题题元元素素，，每每个个标标题题元元素素的的文文字都字都为绿为绿色色)n定定义义HTML标记标记的的样样式表（式表（ HTML 标记选择标记选择符）符） 选择选择符可以是多种形式，一般是要定符可以是多种形式，一般是要定义样义样式的式的HTML标记标记，例如，例如BODY、、P、、TABLE┈┈┈┈，可以通，可以通过过此方法定此方法定义义它的属性和它的属性和值值，属性和，属性和值值要用冒号隔要用冒号隔开。

开Body{color:black}13编辑ppt任任务务四、四、CSS样样式表使用式表使用1、、创创建建样样式表式表<1>自定自定义义内嵌式内嵌式样样式表式表在在New CSS Style对话对话框框选择选择“Make Custom Style(class)—创创建自定建自定义样义样式式”和和This Document Only(仅应仅应用于用于该该文档文档)”14编辑ppt<2>重定重定义义HTML标签样标签样式表式表在在New CSS Style对话对话框框选择选择“Redefine HTMLTag(重定重定义义HTML标签标签)”，在其下拉菜，在其下拉菜单单列表中列表中选择选择需需要重定要重定义义的的HTML标签标签<3>创创建外建外联联式式样样式表式表在在New CSS Style对话对话框框选择选择“Make Custom Style (class)(创创建自定建自定义样义样式式”和和“New Style Sheet File(新新建建样样式表文件式表文件)”15编辑ppt<4>使用使用样样式表式表选择选择器新建器新建样样式表式表 在在New CSS Style对对话话框框“使使用用CSS选选择择器器”选选项项上上面面的的“选选择择器器”下下拉拉列列表表中中选选择择要要应应用用样样式式的的标标签签:a:link——链链接初始状接初始状态态　　a:visited——访问访问后的状后的状态态　　a:hover——悬悬停停时时的状的状态态　　a:active——点点击选击选取取时时的状的状态态16编辑ppt2、、应应用用样样式表式表 ①①在网在网页编辑页编辑区区选选取要取要应应用用样样式的文本或段落等式的文本或段落等页页面元素面元素 ②②在在“CSS样样式式”面板中面板中单击单击要要应应用的用的样样式名称式名称.注注:使用外使用外联联式式样样式表要先式表要先链链接接这这个外部个外部样样式表．方式表．方法是在法是在“CSS样样式式”面板中面板中单击单击“编辑样编辑样式表式表”在在“编编辑样辑样式表式表”对话对话框中，框中，单击单击“链链接接”按按钮钮3、修改、修改样样式表式表①①在在“CSS样样式式”面板中面板中单击单击“编辑样编辑样式表式表”按按钮钮 ②②在在弹弹出的出的“编辑样编辑样式表式表”对话对话框中框中选择选择“编辑编辑”按按钮钮17编辑ppt任任务务五、五、 CSS属性属性设设置置n定定义义CSS类类型属性型属性n定定义义CSS样样式背景属性式背景属性n定定义义CSS样样式式块块属性属性n定定义义CSS样样式框属性式框属性n定定义义CSS样样式式边边框属性框属性n定定义义CSS样样式列表属性式列表属性n定定义义CSS样样式定位属性式定位属性18编辑pptn本本讲讲主主要要学学习习了了html中中很很重重要要的的css层层叠叠样样式式表表，，几种几种样样式表的制作，式表的制作，css属性及属性属性及属性值值本本讲讲小小结结19编辑ppt上机作上机作业业n对对所做的网站运用所做的网站运用样样式表式表规规范范20编辑ppt。