第3讲_CSS样式表演示文稿.PPTVIP

层叠样式表CSS 目标 掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层DIV和SPAN标签 1.1 DHTML 简介 1.2 DHTML 的功能 2.1 CSS样式表概述 1996年初诞生了层叠样式表CSS技术。 CSS是层叠样式表Cascading Style Sheet 是用于实现对布局、字体、颜色、背景和其它网页效果实现更加精确的控制，其主旨就是将显示内容和显示的样式定义分离。 CSS样式表既可以定义在HTML文档内部，也可以作为附加文档定义在文档外部。 一个样式表可以作用于多个页面，甚至整个站点，一个HTML文件也可以引用多个CSS样式表中的样式定义。因此，样式表具有更好的易用性和扩展性。 什么是样式？ 常用的样式属性 2.2 CSS的基本规则 1. CSS的基本语法 基本格式： Selector { property: value; } 说明： 属性和属性值之间用冒号（:）隔开，各定义之间用分号（;）隔开。 Selector?:?是选择符 ，指明应用此样式代码的对象。可以是(X)HTML标记、自定义的id或者class对象。 property?:?样式属性，如：大小、颜色、定位、边框等。 value?:?样式属性值，常见形式有一定范围的可选值或带有单位的数值。 eg： P {background:yellow; font-family:courier } 2.2 CSS的基本规则 2. 注释 利用/* …… */为代码加上注释。 eg： P.first { color: green } /* green for the first paragraph of every page */ 2.2 CSS的基本规则 3. CSS选择符的命名规则 （1） 区分大小写 在XHTML中，CSS的 id及class选择符名称是区分大小写的，eg：id=nav不同于id=Nav （2） 采用合法字符 命名必须以英文字母开始，后接字母、数字、下划线等 （3） 使用具有一定语义的字母组合 （4） 制定统一的命名规则 例如：“变量类型_变量名”方式 2.2 CSS的基本规则 3.1 行内样式 3.2 内嵌样式 3.2.1 内嵌样式-选择器 根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 3.2.6 标记指定样式 基本格式： E1.E2 { property: value } E1#E2 { property: value } 说明： 针对于class为E2的E1标记进行样式定义； 针对于id为E2的E1标记进行样式定义； Eg: ul.Blueli{font-family:Arial; color:#369} *针对于class为Blueli的ul标记进行重新定义* 3.2.7 包含选择符 基本格式： E1 E2 { property: value} 注意：E1与E2之间有空格 , 只对E1下的E2的内容指定样式。 E1与E2可以是HTML标记、也可以是类样式或id样式。 Eg: E1与E2为标记 h2 span{ font-size: 12px;color: blue; } spanspan标记/spanh2h2标记/h2h2 span h2 span标记/span 示例/h2 综合示例 h5{color:red;} h5.rock{color:blue;} h5 .rock{color:yellow;} 注意，多了一个空格 h5only h5 tag content/h5 h5 class=rockapply class name rock h5 tag content/h5 h5applyspan class=rockspan tag/spanclass name rock h5 b class=rocktag/bcontent/h5 3.2.8 群组选择符 基本格式： E1,E2,E3 { property: value } 说明： 将同样的定义应用于多个选择符，可以将选择符以逗号（,）分隔的方式并为组。 Eg: h1,h2,h3,h4,h5,span{font:16px Arial; color:#608000} 3.2.9 组合选择符 说明： 各个选择符可以组合使用，非常灵活。 Eg: p #grey span{ } *表示id为grey的p标记下的span标记* 3.3 外部样式 根据样式文件与网页的关联方式又分为： 链接（LINK）外部样式表 导入（import）外部样式表 3.3.1 链接外部样式表 使用LINK（链接）标签 ，语法： HEAD L