第3节层叠样式表基础.pptVIP

天津师范大学管理学院 李天侠 内容 3.1 层叠样式表概述 3.2 CSS定义格式和使用形式 3.3 样式表中的样式定义类型 3.4 多层样式表的层叠与继承 3.5 CSS的常用属性 3.6 层叠样式盒模型 学习目标 了解层叠样式表。 掌握内部、外部层叠样式表的使用方法。 掌握样式类、ID类的定义和使用。 了解层叠和继承的特点。 了解CSS基本属性的使用方法。 3.1 层叠样式表概述 层叠样式表CSS（Cascading Style Sheets）是一种标记性语言。 用途：增强和控制网页样式。即控制网页内容的表现形式。 意义：简化XHTML页面标记，使表现和结构分离。深层的意义是易于维护和改版。 什么是样式? 样式就是格式，文字大小、颜色，图片位置设置等，就是显示内容的样式。 什么是层叠？ 可以对一个对象同时设置多个样式，按层次顺序处理。 CSS版本 1996年，推出CSS1版本（Cascading Style Sheets Level 1），1997年推出CSS2。 （详细了解/TR/REC-CSS2 ） 3.2 CSS定义格式和使用形式 3.2.1 CSS定义格式 3.2.2 CSS的使用形式 3.2.1 CSS定义格式 CSS构成： 一系列的样式CS集合。 CS构成： 选择符(selector) 属性(property) 值(value) CS定义格式： 选择符{属性1:属性值1;属性2:属性值2;……} 说明 选择符：指定样式将要作用的对象， 选择符分类： XHTML的标记符 类名 用ID标志的特殊对象 选择符标识对大小写敏感，一般使用小写标识。 应用技巧： 如果多个定义的对象有共同的样式声明，可以采取分组定义的方法。 例，h1,h2,h2,h3,h5,h6 {color: green; } 3.2.2 CSS的使用形式 内部样式表 在head中的style标记内进行定义。 外部样式表 定义在一个样式文件中。 内嵌样式 在具体的标记中通过属性style进行定义。 代码中出现的内部样式表和外部样式表 html head title大学城/title meta http-equiv=Content-Type content=text/html; charset=gb2312 link rel=stylesheet href=css.css type=text/css style type=text/css !-- .border01 { border: 1px solid #000000; } table { font-size: 12px} -- /style …. /html 1. 内嵌样式 内嵌样式又称为行内样式（Inline styles）。 在XHTML标记中，使用style属性定义。 定义格式： 标记 style=属性:属性值; 属性:属性值 ... 特点：作用范围只限于该标记中的修饰内容。 例1，在chap0301.html文件中，使用内嵌样式。 !—chap0301.html -- html xmlns=/1999/xhtml head title例1，内嵌样式/title/head body h1 style=font-family:黑体;font:20px; color:red这是使用CSS的内嵌样式。/h1 h1 style=margin-left:100px;font:30px; color:blue这是使用CSS的内嵌样式。/h1 /body/html 2. 内部样式表 内部样式表定义在当前网页的style/style标记之间。 定义格式： style type=text/css !-- 选择符1{属性1:属性值1; 属性2:属性值2 ;...} /* 注释 */ 选择符2{属性1:属性值1; 属性2:属性值2; ...} ... 选择符n{属性1:属性值1; 属性2:属性值2; ...} -- /style type属性：指定以CSS/ JavaScript的语法定义。 “text/css”：使用CSS定义 “text/javascript”：使用JavaScript定义 “/*…*/”是在CSS中使用的注释语句。 !-- … --防止不支持STYLE元素的浏览器会将其中的样式定义当作文本显示出来。 例2，在chap0302.html文件中，定义网页中段落标记p的样式为文字居中显示、字体是黑体、字体大小是15pt、颜色是红色，然后引用该样式显示信息。 style!--