《《页面设计css》ppt课件》由会员分享，可在线阅读，更多相关《《页面设计css》ppt课件（40页珍藏版）》请在金锄头文库上搜索。
1、Web技术原理及应用 Web数据库原理和应用,烟台大学计算机学院 陈智育,第4章 页面设计-CSS,内容,什么是CSS,1,样式引用方式和层叠顺序,2,样式条目定义规则,3,样式属性,4,CSS,CSS: Cascading Style Sheets CSS: 层叠样式表, 级联样式表; W3C标准2.0 CSS: 将Web显示表示从HTML内容结构中分离出来 样式: 定义如何显示HTML元素 表: 样式通常存放在样式表中,常独立为CSS文件 CSS文件为多网页服务. 可同时控制多个网页的样式和布局(统一风格); 一个Web文件也可引用多个CSS文件 层叠: 多个样式定义会叠加在一起,CSS-
2、样式引用方式,内联样式: 在元素内部, 用style属性设置 样式的作用限于元素内部 style属性值为样式规则(见后) 几乎所有体部标签都支持style属性 内容和显示仍混在一起, 尽量少用,CSS-样式引用方式,内部样式表 在Web文件head中, 用style标签定义 样式的作用限于本文件 style标签中可包含多个规则条目 style标签的type属性默认值为”text/css” 使用注释符以适应不支持CSS的浏览器,CSS-样式引用方式,外部样式表(链接) CSS样式独立为文件(.css), 可由多个网页共用 head中使用link标签链接CSS文件 网页中可同时链接多个CSS文件
3、CSS文件由多个规则条目构成,mystyle.css,CSS-样式引用方式,外部样式表(引入) 在head的style标签中使用或CSS文件中 用import声明引入外部CSS文件 表现和link方式一样 声明语句由CSS文件内容完全替换(C语言) 记得末尾加分号,类似#include,CSS-样式引用方式,对象引用 将HTML元素作为文档对象 应用文档对象模型的访问方法 JavaScript动态修改style对象属性来改变样式 注意名称变化(例: font-size=fontSize),驼峰命名法,查看效果,CSS-样式层叠,五种样式引用方式可混合使用 层叠: 多种样式设置(多方式,多文件)
4、综合效果 继承: 下面未定义的样式, 继承上面的 覆盖: 下面定义的样式, 覆盖上面的 样式层叠(覆盖)优先级(低-高) 浏览器缺省样式 外部样式表(链接) 外部样式表(引入) 内部样式表 内联样式表 对象引用,P158 同样式表中越后优先级越高 选择符也有优先级 !important,CSS-样式层叠,外部样式表,内部样式表,层叠样式表,?,浏览器 默认,CSS-样式规则条目定义,规则条目由3部分构成: 选择符selector, 样式属性名, 属性值 条目括号中内容也称样式规则 由一个或多个属性对组成, 由分号间隔 多字属性值必须加引号(双引号或单引号) 规则条目定义中可添加注释/*/,CS
5、S-选择符,选择符: 给谁定义样式 HTML标签: 可以是一个或多个 (逗号分隔) 类选择符 id选择符 上下文选择符 伪类,带特殊属性的标签做选择符,CSS-选择符,选择符: 类选择符,标签.类名: 区分同一种标签的格式,.类名: 对不同标签的应用相同样式,一个标签可以归属多个类,CSS-选择符,选择符: id选择符,为某单一元素指定样式, 因为,同一Web页中,id是唯一的 类似内联样式, 但id选择符更好,下面两种id选择符写法皆可,CSS-选择符,选择符: 上下文选择符,表明多层嵌套, 用空格分隔,CSS-选择符,选择符: 伪类 伪类用于区分标记的不同状态 交互的动态响应, 将表示和行
6、为合在一起,手册,CSS属性,CSS属性: 可以定义哪些样式 字体属性 文本属性 颜色和背景属性 方框属性(版式属性) 列表属性(分类属性) 定位属性,CSS样式表中文手册.chm,CSS-字体属性,字体属性 字体: font-family 字号: font-size 字形: font-style 字重: font-weight 小型大写: font-variant,CSS-字体属性,例4-40 查看网页效果 和书上代码的不同: XHTML, CSS文件引用 引用方式: 外部样式表(link) 样式条目规则: 标签选择符, 类选择符 查看HTML和CSS文件 更换CSS文件 例4-40a.cs
7、s 内容未变,CSS-字体属性,多单词加引号, 备选, 分号可不加,CSS-字体属性,font-size的值 相对长度单位: em-相对当前字体的大小, 1.5em ex-相对当前字体的高度 px-像素, 相对显示分辨率 绝对长度单位 pt点, pc派卡(pica), in英寸,cm,mm 1in = 2.54cm = 25.4 mm = 72pt = 6pc 其他串值和百分数 查阅手册: 语法复合,取值,说明,示例, 应用标签,CSS-文本属性,文本属性 text-align: 水平对齐 vertical-align: 垂直对齐 letter-spacing: 字符间隔 line-heigh
8、t: 行高 text-indent: 缩进 text-decoration: 修饰,CSS-文本属性,例4-42 文本属性示例 查看网页效果 样式条目规则: id选择符, 类选择符 查看HTML和CSS文件 div和span,CSS-颜色和背景属性,颜色和背景属性 color: 前景色(RGB: #00F) background-color: 背景色 background-image: 背景图 background-repeat: 背景重复 background-position: 背景位置(复合) background-attachment: 背景附属 background: 背景复合属性,
9、CSS-颜色和背景属性,例4-41 颜色和背景属性示例 查看网页效果 样式条目规则: 上下文选择符 查看HTML和CSS文件 表格样式,CSS-颜色和背景属性,背景图 图像文件 重复方式: repeat(默认), no-repeat repeat-x, repeat-y 图像位置 复合属性-前x和y; x,y单独指定 串值, 长度数, 百分数,CSS-方框属性,设置元素的边界,边框的属性值 应用于块元素: body, div, p, td 方框属性: border: 边框 margin: 外边距 padding: 内边距,CSS-方框属性,手册完全属性,CSS-方框属性,例4-43 方框属性示
10、例 查看网页效果 样式条目规则: 标签#ID, 如div#div1 查看HTML和CSS文件 用两个div代替表格和段落 float:对象是否左右浮动 clear:两边是否可有浮动对象,CSS-方框属性,border 颜色,宽度, 线型 : 4条边单独设置: border-top4 3种属性分别设置: border-color3 分边和分属性设置: border-top-color4*3 padding和margin 只是距离值 4条边单独设置: padding-top, margin-top,border: blue 20pt groove;,padding: 20pt; margin: 1
11、0px 30px;,CSS-方框属性,同时设置4条边: border-width, border-style, border-color, padding, margin 1个值: 应用于4条边 2个值: 前应用上下; 后应用左右 4个值: 依次应用于top, right, bottom, left, 顺时针,padding: 20pt; margin: 10px 30px; margin: 10px 30px 10px 30px;,CSS-列表属性,应用ul, ol, li 列表属性 list-style-type: 表项标记 list-style-position: 标记位置 list-s
12、tyle-image: 图像标记 list-style: 复合属性,CSS-列表属性,例4-44 列表属性示例 查看网页效果 查看HTML和CSS文件,CSS-列表属性,list-style-position inside, outside list-style-image list-style-type ul和ol无区别,P166 表4-22,CSS-定位属性,用于2维和3维定位 position: 定位方式 static, absolute不占地方, relative top: 上距 left: 左距 bottom: 下距 right: 右距 z-index: z轴叠放次序 符号整数, 值
13、大在上,缺省值0 absolute方式: 同地方才能容纳多个内容, 层叠效果,CSS-定位属性,例4-45a 二维定位属性示例 查看网页效果 样式作用层叠: div, div.block1, div.block2 查看HTML和CSS文件,CSS-定位属性,例4-45b 三维定位示例 查看网页效果 查看HTML和CSS文件 z-index大的在上, 小的在下, 可为负值,回顾,CSS介绍 CSS引用方式 内联, 内部, 外部链接, 外部引用, 对象引用 CSS样式层叠顺序 CSS样式条目规则 选择符: 标签, 类, ID, 上下文, 伪类 CSS属性 字体, 文本, 颜色和背景, 方框, 列表, 定位,其他,作业: P172 CSS: 4.7, 4.8,烟台大学计算机学院 陈智育,Thank You !,
