第3章层叠样式表基础.ppt

层叠样式表基础 天津师范大学管理学院2010 1修正版 第3章 天津师范大学管理学院李天侠 总74页 第2页 内容 3 1层叠样式表概述3 2CSS定义格式和使用形式3 3样式表中的样式定义类型3 4多层样式表的层叠与继承3 5CSS的常用属性3 6层叠样式盒模型 天津师范大学管理学院李天侠 总74页 第3页 学习目标 了解层叠样式表 掌握内部 外部层叠样式表的使用方法 掌握样式类 ID类的定义和使用 了解层叠和继承的特点 了解CSS基本属性的使用方法 天津师范大学管理学院李天侠 总74页 第4页 3 1层叠样式表概述 层叠样式表CSS CascadingStyleSheets 是一种标记性语言 用途 增强和控制网页样式 即控制网页内容的表现形式 意义 简化XHTML页面标记 使表现和结构分离 深层的意义是易于维护和改版 天津师范大学管理学院李天侠 总74页 第5页 什么是样式 样式就是格式 文字大小 颜色 图片位置设置等 就是显示内容的样式 什么是层叠 可以对一个对象同时设置多个样式 按层次顺序处理 天津师范大学管理学院李天侠 总74页 第6页 CSS版本1996年 推出CSS1版本 CascadingStyleSheetsLevel1 1997年推出CSS2 详细了解http www w3 org TR REC CSS2 天津师范大学管理学院李天侠 总74页 第7页 3 2CSS定义格式和使用形式 3 2 1CSS定义格式3 2 2CSS的使用形式 天津师范大学管理学院李天侠 总74页 第8页 3 2 1CSS定义格式 CSS构成 一系列的样式CS集合 CS构成 选择符 selector 属性 property 值 value 天津师范大学管理学院李天侠 总74页 第9页 CS定义格式 选择符 属性1 属性值1 属性2 属性值2 说明选择符 指定样式将要作用的对象 选择符分类 XHTML的标记符类名用ID标志的特殊对象选择符标识对大小写敏感 一般使用小写标识 天津师范大学管理学院李天侠 总74页 第10页 应用技巧 如果多个定义的对象有共同的样式声明 可以采取分组定义的方法 例 h1 h2 h2 h3 h5 h6 color green 天津师范大学管理学院李天侠 总74页 第11页 3 2 2CSS的使用形式 内部样式表在head中的标记内进行定义 外部样式表定义在一个样式文件中 内嵌样式在具体的标记中通过属性style进行定义 天津师范大学管理学院李天侠 总74页 第12页 代码中出现的内部样式表和外部样式表大学城 天津师范大学管理学院李天侠 总74页 第13页 1 内嵌样式内嵌样式又称为行内样式 Inlinestyles 在XHTML标记中 使用style属性定义 定义格式 特点 作用范围只限于该标记中的修饰内容 天津师范大学管理学院李天侠 总74页 第14页 例1 在chap0301 html文件中 使用内嵌样式 例1 内嵌样式这是使用CSS的内嵌样式 这是使用CSS的内嵌样式 天津师范大学管理学院李天侠 总74页 第15页 2 内部样式表内部样式表定义在当前网页的标记之间 定义格式 天津师范大学管理学院李天侠 总74页 第16页 type属性 指定以CSS JavaScript的语法定义 text css 使用CSS定义 text javascript 使用JavaScript定义 是在CSS中使用的注释语句 防止不支持STYLE元素的浏览器会将其中的样式定义当作文本显示出来 天津师范大学管理学院李天侠 总74页 第17页 例2 在chap0302 html文件中 定义网页中段落标记p的样式为文字居中显示 字体是黑体 字体大小是15pt 颜色是红色 然后引用该样式显示信息 天津师范大学管理学院李天侠 总74页 第18页 3 外部样式表外部样式表 样式表文件中的内容 样式表文件的内容结构 选择符1 属性1 属性值1 属性2 属性值2 选择符2 属性1 属性值1 属性2 属性值2 注释 选择符n 属性1 属性值1 属性2 属性值2 文件的扩展名一般为 css 内部样式表转换为外部样式表的方法 将定义在style标记之间的样式表 单独存放到一个文本文件中 天津师范大学管理学院李天侠 总74页 第19页 一个外部样式表文件建立后 可以应用在多个页面中 如果改变了外部样式表 则引用该外部样式表的页面的样式也将改变 应用外部样式表 可以方便改版 维护和管理页面 天津师范大学管理学院李天侠 总74页 第20页 外部样式表文件样例下面是csstest css文件的内容 csstest css p font family 黑体 font size 15pt color green h3 t01 font family 黑体 font size 20pt color red h3 t02 font family 黑体 font size 15pt color blue class01 font family 黑体 font size 11pt color green 该样式将在后面的例中引用 天津师范大学管理学院李天侠 总74页 第21页 引用外部样式表的方法链入外部样式表导入外部样式表 天津师范大学管理学院李天侠 总74页 第22页 链入外部样式表当浏览器读取到XHTML文档的样式表链接标记时 将向所链接的外部样式表索取样式 链接使用link标记 该标记必须放到页面的head标记区内 天津师范大学管理学院李天侠 总74页 第23页 链入外部样式表格式 rel stylesheet 表示在网页中使用外部样式表 type text css 定义了文件的类型是样式表文本 href指定CSS文件的URL 天津师范大学管理学院李天侠 总74页 第24页 例3 在chap0303 html文件中 链入外部样式表文件csstest css 例3 外部样式表 链接引用 天津师范大学管理学院李天侠 总74页 第25页 链接外部样式表 t01样式链接外部样式表 t02样式使用样式类class01显示文本内容的原样这是引用样式P后的段落显示结果 天津师范大学管理学院李天侠 总74页 第26页 导入外部样式表当浏览器在读取HTML XHTML文件时 复制一份外部样式表内容到内部样式表中 导入外部样式表的格式 importurl 外部样式表的文件名 css 声明要放在标记中 每个声明导入一个外部样式表 可以同时导入多个外部样式表 天津师范大学管理学院李天侠 总74页 第27页 例4 在chap0304 html文件中 导入csstest css 例4 外部样式表 导入引用 天津师范大学管理学院李天侠 总74页 第28页 链接外部样式表 t01样式链接外部样式表 t02样式使用样式类class01显示文本内容的原样使用样式类class02显示文本内容的原样这是引用样式P后的段落显示结果 天津师范大学管理学院李天侠 总74页 第29页 问题如何获取网站上的CSS文件 天津师范大学管理学院李天侠 总74页 第30页 3 3样式表中的样式定义类型 3 3 1HTML XHTML标记样式3 3 2样式类3 3 3用ID标志定义3 3 4通配选择符3 3 5伪类 天津师范大学管理学院李天侠 总74页 第31页 3 3 1HTML XHTML标记样式 选择符是XHTML的标记符的定义格式 选择符1 选择符n 属性1 属性值1 属性2 属性值2 当多个标记有相同的样式时 可以同时定义 天津师范大学管理学院李天侠 总74页 第32页 例5 在chap0305 html文件中 定义超级链接标记a的样式为显示热字不带下划线 例5 超级链接a标记样式定义a text decoration none 热字 天津师范大学管理学院李天侠 总74页 第33页 3 3 2样式类 样式类分类独立样式类相对样式类 天津师范大学管理学院李天侠 总74页 第34页 1 独立样式类的定义和引用方法定义格式 类名 属性1 属性值1 属性2 属性值2 特点 任意标记都可以引用独立样式类 这是最常用的一种方法 引用方法 显示内容 天津师范大学管理学院李天侠 总74页 第35页 例6 在chap0306 html文件中 定义一个控制背景显示的独立样式类并引用 天津师范大学管理学院李天侠 总74页 第36页 2 相对样式类的定义和引用方法指相对某个标记定义的类 定义格式 标记符 类名 属性1 属性值1 属性2 属性值2 特点 相同标记 可分类定义为不同的样式 引用 与独立样式类的引用方法一样 显示内容 天津师范大学管理学院李天侠 总74页 第37页 例7 在chap0307 html文件中 定义标题标记H1的相关样式类H01和H02并引用 天津师范大学管理学院李天侠 总74页 第38页 3 3 3用ID标志定义 ID符定义分类 独立ID定义样式方式相对ID定义样式方式 天津师范大学管理学院李天侠 总74页 第39页 1 独立ID定义样式与引用方法定义格式 ID名 属性1 属性值1 属性2 属性值2 ID名 是由网页设计者定义的 引用方法 在指定的XHTML标记中 使用id属性 引用格式 显示内容 天津师范大学管理学院李天侠 总74页 第40页 例8 在chap0308 html文件中 定义独立ID定义样式并引用 天津师范大学管理学院李天侠 总74页 第41页 2 相对ID定义样式与引用方法定义格式 XHTML标记 ID名 属性1 属性值1 属性2 属性值2 引用方法 和独立ID样式的引用方法一样引用格式 显示内容 天津师范大学管理学院李天侠 总74页 第42页 例9 在chap0309 html文件中 定义相对ID样式并引用 天津师范大学管理学院李天侠 总74页 第43页 ID类与Class类的区别定义形式不同引用形式不同使用不同ID是页面中唯一的 就像IP地址一样 而Class可以在不同的网页中重复定义 作用不同定义ID的作用是 定义元素的表现 方便使用JavaScript等脚本 因为在网页中的页面元素使用行为时 要求该元素在页面中有唯一的ID标识 定义Class的主要作用是确定页面的表现形式 通常 为了页面有更好的扩展性 在页面内容中大的布局区域和可能设置动作的地方使用ID 在页面内容等部分使用Class 天津师范大学管理学院李天侠 总74页 第44页 3 3 4通配选择符 通配选择符是 适配所有元素 定义举例 font size 28pt font family 黑体 color FF0000 天津师范大学管理学院李天侠 总74页 第45页 例10 在chap0310 html文件中 定义通配选择符 自动适配所有的标记 例10 定义通用选择符并引用 background color FFCCFF font size 28pt font family 黑体 color FF0000 BODY 通用选择符 控制的显示 段落 显示的文本 天津师范大学管理学院李天侠 总74页 第46页 3 3 5伪类 伪类也是一种选择符 在页面中定义超出结构所能标识的样式 定义格式 选择符 伪类标识 属性 属性值 伪类的标识名是CSS中指定的 数目有限 具体查阅相关文献资料 天津师范大学管理学院李天侠 总74页 第47页 最常出现在a标记上的伪类 1 link语法 a link 属性名 属性值 设置a对象在未被访问前的样式表属性 2 visited语法 a visited 属性名 属性值 设置a对象在其链接地址已被访问过时的样式表属性 3 hover语法 a hover 属性名 属性值 设置a对象上鼠标悬停时的样式表属性 4 active语法 a active 属性名 属性值 设置a对象在被用户激活 即鼠标点击与释放之间发生 时的样式表属性 天津师范大学管理学院李天侠 总74页 第48页 例11 在chap0311 html文件中 定义a的伪类并观察效果 a link text decoration none color 3f3f3f a visited text decoration none a hover font size 32px color CC0000 a active color 009900 天津师范大学管理学院李天侠 总74页 第49页 3 4多层样式表的层叠与继承 如果在网页设计中进行了多种样式设置 就会出现叠加现象 一般地 所有样式将根据下面的规则 重新层叠在一个新的虚拟样式表中 数字序号值大的优先级高 1浏览器缺省设置2外部样式表3内部样式表 位于标签内部 4内联样式 在XHTML元素内部 天津师范大学管理学院李天侠 总74页 第50页 样式表的层叠性就是继承性 继承规则 外部的元素样式会保留下来继承给这个元素所包含的其他元素 所有在元素中嵌套的元素都会继承外层元素指定的属性值 有时会把很多层嵌套的样式叠加在一起 除非另外更改 遇到冲突的地方会以最后定义的为准 天津师范大学管理学院李天侠 总74页 第51页 例12 在chap0312 html中 进行多重样式表的层叠定义 例12 多样式叠加问题 天津师范大学管理学院李天侠 总74页 第52页 链接内部样式表 t01样式链接外部样式表 t02样式 天津师范大学管理学院李天侠 总74页 第53页 3 5CSS的常用属性 属性是CSS中最重要的部分 也是最复杂的部分 常用的属性有颜色属性 字体属性 文本属性 背景属性 定位属性 尺寸属性 布局属性 边距属性 边框属性 补白属性 列表项属性 表格属性等 某些属性只有部分浏览器支持 属性的知识和应用是CSS应用的主体部分 天津师范大学管理学院李天侠 总74页 第54页 3 5 1颜色属性3 5 2字体属性3 5 3文本属性 天津师范大学管理学院李天侠 总74页 第55页 3 5 1颜色属性 格式 color 颜色代码三种设置色彩的方法 十六进制数rgb函数 整数或百分数 色彩名称 天津师范大学管理学院李天侠 总74页 第56页 1 用十六进制数表示色彩值格式 RRGGBBRed Green Blue的取值范围是 00 FF 参数必须是两位数 常见的红色 黑色 白色的设置值分别为 ff0000 000000 ffffff 例 div color ff0000 天津师范大学管理学院李天侠 总74页 第57页 2 用rgb函数表示色彩值格式 rgb R G B R G B可取正整数值或百分数值 正整数值的取值范围为 0 255 百分数值的取值范围为色彩强度的百分比 0 0 100 0 例 div color rgb 12 200 50 天津师范大学管理学院李天侠 总74页 第58页 3 用色彩名称表示色彩值CSS只提供了16种色彩名称 例 div color red 天津师范大学管理学院李天侠 总74页 第59页 3 5 2字体属性 字体属性 FontProperties 包括字体字形字体字号字体风格字重文字变形文字修饰字体 Font 它是前面的综合设置属性 这里仅介绍前三个属性 天津师范大学管理学院李天侠 总74页 第60页 1 字体字形字体字形属性名font family 控制显示的字体 不同的操作系统 其字体名是不同的 对于Windows系统 其字体字形名与Word中的 字体 列表中所列出的字体名称一致 天津师范大学管理学院李天侠 总74页 第61页 格式 font family 字形名称表字体字形名按优先顺序排列 逗号隔开 名称中包含空格 使用引号括起 优先顺序含义 用户端若果没有第1种 就按顺序选择下一种字体字形 直至取系统默认值 例 h2 font family 华文新魏 楷体 GB2312 天津师范大学管理学院李天侠 总74页 第62页 2 字号字号属性名 font size 控制字的大小 格式 font size 绝对尺寸 相对尺寸 百分数 数值绝对尺寸根据对象字体进行调节 可选xx small x small small medium large x large xx large 普通字体为medium 相对尺寸是相对于父对象中字体尺寸进行相对调节 取值smaller和larger 天津师范大学管理学院李天侠 总74页 第63页 百分数取值是基于父对象中字体的尺寸 每一个可以使用百分比值单位所指定的属性 同时也自定义了这个百分比值的参照值 多数情况下 这个参照值是该元素本身的字体尺寸 注意 不是所有属性都支持百分比单位 例 p font size 200 天津师范大学管理学院李天侠 总74页 第64页 数值取值是具体的整数 其单位列表如下 例 h3 font size 20px 天津师范大学管理学院李天侠 总74页 第65页 3 字体风格格式 font style italic oblique normal参数 italic为斜体 对于没有斜体变量的特殊字体 将应用oblique normal为正常的字体 声明此值将取消之前设置 天津师范大学管理学院李天侠 总74页 第66页 3 5 3文本属性 文本属性 TextProperties 包括字间距行高文字对齐文字缩行字母间距 天津师范大学管理学院李天侠 总74页 第67页 1 文字对齐设置对象中文本的水平对齐方式 只用于整块的内容 如 和等 格式 text align left right center justifyleft为左对齐 right为右对齐 center为居中 justify