《dw教学课件》第七讲----css样式.ppt

网页三剑客,主讲:刘苗,第七讲 CSS样式,3,通过本讲的学习，掌握css属性，熟练应用其规范网页.,教学目标,4,css基本概念 样式类型 选择符 样式规则,本讲主要内容,5,任务一、CSS概述,1、概念 CSS全称cascading style sheets,即层叠样式表，它对整个页面元素定义一个统一的样式。一个样式表可以作用于多个页面.为方便设立统一风格的网站，DW提供了css样式，css样式实际上就是含有多个文本属性和网页属性的结合。,6,2、CSS样式表优点 只修改一个.CSS文件就可以改变页数不定的网页外观和格式。通过样式表将样式和HTML标记分离，只要修改样式表就可以改变与之相关联的HTML标记所标记的内容的样式 可以自由地控制页面布局和外观 在报有浏览器和平台间具有较好的兼容性 精简网页，提高下载速度 可以精简HTML代码,7,任务二、Css样式的创建,1、用类来定义样式表（类选择符） 用户以“.样式表名称”的格式直接指定其名称，当应用样式表时，以“Class=样式表名称”格式插入在要应用的标签前面。这样，可以直接控制样式表的应用范围。,8,2、HTML选择符,9,3、用ID定义样式表（ID选择符） 这是根据超链接的状态控制属性的样式表。对文本建立超链接时、根据链接、访问、激活状态分别显示蓝色、红色、紫色下划线。在各状态属性上应用样式表，可以删除下划线或者改变文字颜色，而且还能制作出鼠标经过这种状态的超链接文本时显示的菜单样式。,10,4、css样式面板 链接独立的样式表文件 新建一个HTML元素样式 编辑存在样式表中的元素样式 删除当前样式表中的样式元素,11,任务三、CSS样式表的定义和应用,1、基本语法 CSS的定义是由三个部分构成：选择符（selector），属性(properties)和属性的取值(value). 基本格式如下： selectorproperty:value 即：(选择符)属性:值,12,如果属性的值是多个单词组成，必须在值上加引号 比如：sans serif pfont-family:“”,“” (定义段落字体为sans serif) 如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开 比如：Ptext-align:center;color:red,13,可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义： h1,h2,h3,h4,h5,h6color:green (这个组里包括所有的标题元素，每个标题元素的文字都为绿色) 定义HTML标记的样式表（ HTML 标记选择符） 选择符可以是多种形式，一般是要定义样式的HTML标记，例如BODY、P、TABLE，可以通过此方法定义它的属性和值，属性和值要用冒号隔开。Bodycolor:black,14,任务四、CSS样式表使用,1、创建样式表 自定义内嵌式样式表 在New CSS Style对话框选择“Make Custom Style(class)创建自定义样式”和This Document Only(仅应用于该文档)”,15,重定义HTML标签样式表 在New CSS Style对话框选择“Redefine HTMLTag(重定义HTML标签)”，在其下拉菜单列表中选择需要重定义的HTML标签 创建外联式样式表 在New CSS Style对话框选择“Make Custom Style (class)(创建自定义样式”和“New Style Sheet File(新建样式表文件)”,16,使用样式表选择器新建样式表 在New CSS Style对话框“使用CSS选择器”选项上面的“选择器”下拉列表中选择要应用样式的标签: a:link链接初始状态 a:visited访问后的状态 a:hover悬停时的状态 a:active点击选取时的状态,17,2、应用样式表 在网页编辑区选取要应用样式的文本或段落等页面元素 在“CSS样式”面板中单击要应用的样式名称. 注:使用外联式样式表要先链接这个外部样式表方法是在“CSS样式”面板中单击“编辑样式表”在“编辑样式表”对话框中，单击“链接”按钮 3、修改样式表 在“CSS样式”面板中单击“编辑样式表”按钮 在弹出的“编辑样式表”对话框中选择“编辑”按钮,18,任务五、 CSS属性设置,定义CSS类型属性 定义CSS样式背景属性 定义CSS样式块属性 定义CSS样式框属性 定义CSS样式边框属性