第4章页面设计-CSS.pptVIP

Web技术原理及应用Web数据库原理和应用 烟台大学计算机学院 陈智育 内容 CSS CSS: Cascading Style Sheets CSS: 层叠样式表, 级联样式表; W3C标准[2.0] CSS: 将Web显示[表示]从HTML内容[结构]中分离出来 样式: 定义如何显示HTML元素 表: 样式通常存放在样式表中,常独立为CSS文件 CSS文件为多网页服务. 可同时控制多个网页的样式和布局(统一风格); 一个Web文件也可引用多个CSS文件 层叠: 多个样式定义会叠加在一起 CSS-样式引用方式 内联样式: 在元素内部, 用style属性设置 样式的作用限于元素内部 style属性值为样式规则(见后) 几乎所有体部标签都支持style属性 内容和显示仍混在一起, 尽量少用 CSS-样式引用方式 内部样式表 在Web文件head中, 用style标签定义 样式的作用限于本文件 style标签中可包含多个规则条目 style标签的type属性默认值为”text/css” 使用注释符以适应不支持CSS的浏览器 CSS-样式引用方式 外部样式表(链接) CSS样式独立为文件(.css), 可由多个网页共用 head中使用link标签链接CSS文件 网页中可同时链接多个CSS文件 CSS文件由多个规则条目构成 CSS-样式引用方式 外部样式表(引入) 在head的style标签中使用或CSS文件中 用@import声明引入外部CSS文件 表现和link方式一样 声明语句由CSS文件内容完全替换(C语言) 记得末尾加分号 CSS-样式引用方式 对象引用 将HTML元素作为文档对象 应用文档对象模型的访问方法 JavaScript动态修改style对象属性来改变样式 注意名称变化(例: font-size=fontSize) CSS-样式层叠 五种样式引用方式可混合使用 层叠: 多种样式设置(多方式,多文件)综合效果 继承: 下面未定义的样式, 继承上面的 覆盖: 下面定义的样式, 覆盖上面的 样式层叠(覆盖)优先级(低-高) 浏览器缺省样式 外部样式表(链接) 外部样式表(引入) 内部样式表 内联样式表 对象引用 CSS-样式层叠 CSS-样式规则条目定义 规则条目由3部分构成: 选择符[selector], 样式属性名, 属性值 条目括号中内容也称样式规则 由一个或多个属性对组成, 由分号间隔 多字属性值必须加引号(双引号或单引号) 规则条目定义中可添加注释/*…*/ CSS-选择符 选择符: 给谁定义样式 HTML标签: 可以是一个或多个 (逗号分隔) 类选择符 id选择符 上下文选择符 伪类 CSS-选择符 选择符: 类选择符 CSS-选择符 选择符: id选择符 CSS-选择符 选择符: 上下文选择符 CSS-选择符 选择符: 伪类 伪类用于区分标记的不同状态 交互的动态响应, 将表示和行为合在一起 CSS属性 CSS属性: 可以定义哪些样式 字体属性 文本属性 颜色和背景属性 方框属性(版式属性) 列表属性(分类属性) 定位属性 CSS-字体属性 字体属性 字体: font-family 字号: font-size 字形: font-style 字重: font-weight 小型大写: font-variant CSS-字体属性 例4-40 查看网页效果 和书上代码的不同: XHTML, CSS文件引用 引用方式: 外部样式表(link) 样式条目规则: 标签选择符, 类选择符 查看HTML和CSS文件 更换CSS文件 例4-40a.css 内容未变 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-height: 行高 text-indent: 缩进 text-decoration: 修饰 CSS-文本属性 例4-42 文本属性示例 查看网页效果 样式条目规则: id选择符, 类选择符 查看HTML和CSS文件 div和span CSS-颜色和背景属性 颜色和背景属性 color: 前景色(RGB: #00F) background-color: