第9节 CSS样式使用-YS.pptVIP

第1章 网页设计概述 　第2章 HTML语言基础 　　第3章 Dream weaver 基础 　　　第4章 网页中的基础元素 　　　　第5章 网页页面布局 　　　　　第6章 网页中的层和时间轴 　　　　　　第7章 表单的应用 第8章 在网页中使用行为 　第9章 CSS样式使用 　　第10章 网页中的多媒体应用 　　　第11章 模板和库 　　　　第12章 站点测试和发布 　　　　　第13章 Flash 简介 　　　　　　第14章 Fireworks 简介 第9章 CSS样式使用 第9章 CSS样式使用 9.1 CSS样式概述 9.2 使用CSS样式 9.3 CSS样式设置 9.4 CSS样式经典实例 本章小结 9.1 CSS样式概述 定义CSS样式表 CSS样式定义由三部分构成： 选择符（selector）、 属性（properties）、 属性值（value）。 定义CSS样式的格式为： 选择符{属性:属性值;属性:属性值…} CSS样式需要在head内部的style …/style中进行定义或引用外部CSS文件，在body部分使用。 9.1 CSS样式概述 CSS的应用方式有以下两种： 外部CSS样式表：以扩展名为.css的文件而存在，文件中内容即是所有样式的选择和声明。该文件可做为共享文件，让多个文档共同引用并应用，达到站点文件样式的一致性。同时，如果修改该样式表文件，所有引用的文档都将改变其样式，达到网站迅速改版的目的。导入：import 或 链接: link style type=text/css @import url(CSS/colors1.css); /style link href=CSS/Level3_3.css rel=stylesheet type=text/css / 内部CSS样式表：只存在于当前文档中，并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。 9.2 使用CSS样式 9.2 使用CSS样式 9.2 使用CSS样式 选择符 类选择符 使用自命名的标识符定义CSS样式。类选择符样式的定义格式为： 类选择符{属性:属性值;} 选择符前面自动加“.”表示这是一个类选择符 ID选择符 使用自命名的标识符定义CSS样式。ID选择符样式的定义格式为： #ID选择符{属性;属性值;} 选择符前面加“#”表示这是一个ID选择符。 选择符 标记选择符 CSS样式的选择符可以是HTML标记，这种样式重新定义了特定标记的外观。使用标记选择符定义CSS样式的格式为： 标记选择符{属性:属性值;} CSS属性 9.2 使用CSS样式 9.2 使用CSS样式 9.2 使用CSS样式 9.2 使用CSS样式 9.2 使用CSS样式 9.3 CSS样式设置 css盒子模型 css盒子模型 实例 9.3 CSS样式设置 类型属性 类型属性 「字体」（font-family），设定时，需考虑浏览器中有无该字体。 「大小」（font-size），注意度量单位。 「粗细」（font-weight），除了normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置方式。 「样式」（font-style），也就是字型。 「行高」（line-height），就是行距。注意，行距只能是以字体大小值为参照 「变形」（font-variant），可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性。 「大小写」（text-transform），这项属性能轻而易举地控制字母大小写，有首字大写（capitalize、大写（uppercase）、小写（lowercase）和无（none，使所有继承文字和变形参数被忽略，文字将以正常形式显示）等4种。 「修饰」（text-decoration），用于控制链接文本的显示形态，有下划线（underline）、无下划线（overline）、删除线（line-through）、闪烁（blink）和无（none ，使上述效果均不会发生）等5种修饰方式。但IE4不支持文字闪烁。  9.3 CSS样式设置 9.3 CSS样式设置 类型属性 以新建的类“.word”为例，来说明如何设置类型属性。应用“.word”样式的文字效果如图所示： 9.3 CSS样式设置 背景属性 「背景颜色」（background-color），设置背景颜色。 「背景图像」（background-image），设置网页背景图像。 「重复」（background-repeat），控制背景图像的平铺方式，有不