[工学]第03讲CSS基础.pptVIP

1.4 常用属性和属性值 文本属性text 2 4）行高属性（line-height） 这个属性设定每行之间的距离。其值有以下设定方法：normal（默认值）、length（长度）、percentage（百分比）。例如： p1 {line-height:1cm} 5）字间距属性（letter-spacing） 这个属性用来设定字符之间的距离。normal（默认值）、 length（长度）。例如： p1 {letter-spacing: 3mm} 3/3 1.4 常用属性和属性值 背景属性background 3 背景属性主要用来定义选择符对象的背景颜色、背景图片及其显示方式的。常用的属性如下。 1）背景颜色属性（background-color） 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。例如： body {background-color:#99FF00;} 2）背景图片属性（background-image） 这个属性为HTML元素设定背景图片，相当于HTML中background属性。例如： body{background-image:url(bg.jpg);} 1/4 1.4 常用属性和属性值 背景属性background 3 3）背景重复属性（background-repeat） 这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在默认状态下，图片既横向重复，又竖向重复。可选值有：repeat-x，背景图片横向重复、repeat-y，背景图片竖向重复、no-repeat，背景图片不重复 例如： body {background-image:url(bg.jpg); background-repeat:repeat-y} 2/4 《网页设计与制作》电子教案 授课教师：颜一鸣? * 网页设计与制作－－css基础 难点疑点 重点知识 主要任务 第3讲 CSS基础 1、网页常用标签的使用 2、上机实验讲解 课程导入 难点疑点 重点知识 课程导入 第3讲 CSS基础 掌握CSS的基本语法 任务1： 掌握CSS的各种选择符 任务2： 主要任务 掌握CSS的常用属性 任务3： 掌握网页中使用CSS 任务4： 难点疑点 主要任务 课程导入 第3讲 CSS基础 重点知识 网页中使用CSS的3种方法，CSS选择符和常用属性的使用 主要任务 重点知识 课程导入 第3讲 CSS基础 难点疑点 1、类型选择符、类选择符和ID选择符的 区别? 2、网页外联文件路径问题 第3讲 CSS基础 1.1 CSS基础语法 1.2 选择符的使用 1.3 在HTML网页中使用CSS 1.4 常用属性和属性值 授课提纲 1.1 CSS基础语法 CSS概述 1 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率（实例1） 外部样式表通常存储在 CSS 文件中 1.1 CSS基础语法 基本结构 2 CSS 规则由两个部分构成：选择符，以及一条或多条声明。 每条声明由一个属性和一个值组成。 选择符 { 声明1; 声明2; …… } 选择符 { 属性1:属性值; 属性2:属性值; …… } 注意：css语言不区分在小写，建议使用小写 1.1 CSS基础语法 注释与转义字符 3 CSS 注释语法 CSS中使用反斜杠（\）作为转义字符。转义符的作用是让之后的那个字符失去本该具有的“特殊意义”，从而变为一个纯字面字符。 /*注释内容*/ Div\:first { color:#f00; } 第3讲 CSS基础 1.1 CSS基础语法 1.2 选择符的使用 1.3 在HTML网页中使用CSS 1.4 常用属性和属性值 授课提纲 1.2 选择符的使用 通配选择符 1 通配选择符是用“ * ”号来表示，即匹配任意元素。格式如下 参考实例2 * {color:red} 1.2 选择符的使用 类型选择符 2 类型选择符也可以称为标签选择符，其直接以文档语言（HTML、XHTML）中的标签或标记作为选择符。使用类型选择符，其实就是改变HTML中标签的默认样式。 h1 {font-size:12px;} 1.2 选择符的使用 类选择符 3 类选择符是表示指定选择符的类别，可以为某一个选择符指定不同的分类，也可以直接指定分类名称。 1）相对类选择符 使用类选择符能够把相同的元素分类定