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

1、网页三剑客主讲:刘苗1ppt课件第七讲 CSS样式2ppt课件通过本讲的学习，掌握css属性，熟练应用其规范网页.教学目标3ppt课件css基本概念样式类型选择符样式规则本讲主要内容4ppt课件任务一、CSS概述1、概念 CSS全称cascading style sheets,即层叠样式表，它对整个页面元素定义一个统一的样式。一个样式表可以作用于多个页面.为方便设立统一风格的网站，DW提供了css样式，css样式实际上就是含有多个文本属性和网页属性的结合。5ppt课件2、CSS样式表优点 只修改一个.CSS文件就可以改变页数不定的网页外观和格式。通过样式表将样式和HTML标记分离，只要修改样式

2、表就可以改变与之相关联的HTML标记所标记的内容的样式 可以自由地控制页面布局和外观 在报有浏览器和平台间具有较好的兼容性 精简网页，提高下载速度 可以精简HTML代码6ppt课件任务二、Css样式的创建1、用类来定义样式表（类选择符） 用户以“.样式表名称”的格式直接指定其名称，当应用样式表时，以“Class=样式表名称”格式插入在要应用的标签前面。这样，可以直接控制样式表的应用范围。7ppt课件2、HTML选择符8ppt课件3、用ID定义样式表（ID选择符） 这是根据超链接的状态控制属性的样式表。对文本建立超链接时、根据链接、访问、激活状态分别显示蓝色、红色、紫色下划线。在各状态属性上应用

3、样式表，可以删除下划线或者改变文字颜色，而且还能制作出鼠标经过这种状态的超链接文本时显示的菜单样式。9ppt课件4、css样式面板链接独立的样式表文件 新建一个HTML元素样式 编辑存在样式表中的元素样式 删除当前样式表中的样式元素10ppt课件任务三、CSS样式表的定义和应用1、基本语法CSS的定义是由三个部分构成：选择符（selector），属性(properties)和属性的取值(value). 基本格式如下：selectorproperty:value 即：(选择符)属性:值11ppt课件如果属性的值是多个单词组成，必须在值上加引号比如：sans serif pfont-family:

4、“”,“”(定义段落字体为sans serif) 如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开比如：Ptext-align:center;color:red12ppt课件可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1,h2,h3,h4,h5,h6color:green (这个组里包括所有的标题元素，每个标题元素的文字都为绿色)定义HTML标记的样式表（ HTML 标记选择符） 选择符可以是多种形式，一般是要定义样式的HTML标记，例如BODY、P、TABLE，可以通过此方法定义它的属性和值，属性和值要用冒号隔开。Bodycolor

5、:black13ppt课件任务四、CSS样式表使用1、创建样式表自定义内嵌式样式表在New CSS Style对话框选择“Make Custom Style(class)创建自定义样式”和This Document Only(仅应用于该文档)”14ppt课件重定义HTML标签样式表在New CSS Style对话框选择“Redefine HTMLTag(重定义HTML标签)”，在其下拉菜单列表中选择需要重定义的HTML标签创建外联式样式表在New CSS Style对话框选择“Make Custom Style (class)(创建自定义样式”和“New Style Sheet File(新建

6、样式表文件)”15ppt课件使用样式表选择器新建样式表 在New CSS Style对话框“使用CSS选择器”选项上面的“选择器”下拉列表中选择要应用样式的标签:a:link链接初始状态a:visited访问后的状态a:hover悬停时的状态a:active点击选取时的状态16ppt课件2、应用样式表 在网页编辑区选取要应用样式的文本或段落等页面元素 在“CSS样式”面板中单击要应用的样式名称.注:使用外联式样式表要先链接这个外部样式表方法是在“CSS样式”面板中单击“编辑样式表”在“编辑样式表”对话框中，单击“链接”按钮3、修改样式表在“CSS样式”面板中单击“编辑样式表”按钮 在弹出的“编辑样式表”对话框中选择“编辑”按钮17ppt课件任务五、 CSS属性设置定义CSS类型属性定义CSS样式背景属性定义CSS样式块属性定义CSS样式框属性定义CSS样式边框属性定义CSS样式列表属性定义CSS样式定位属性18ppt课件本讲主要学习了htm