网页设计与制作 工业和信息化普通高等教育“十二五”规划教材立项项目 作者 雷伟军 第9章 CSS样式表.pptVIP

第9章CSS样式表 9.1 CSS的基本概念 9.1.1 CSS简介 9.1.2 CSS基本语法 9.1.3 CSS样式的分类 9.1.4 CSS选择器 9.1.5 在Dream weaver中使用CSS样式表 9.1.1 CSS简介 1.什么是CSS CSS是Cascading Style Sheets（层叠样式表）的简称。CSS是W3C（World Wide Web Consortium）定义和维护的标准，用来定义如何显示 HTML 元素外观（字体、字号、间距和颜色等）的计算机语言。 2. CSS的功能 CSS样式表的功能一般可以归纳为以下几点。 可以灵活地控制网页中文字的字体、颜色、大小、间距等。 可以灵活地设置一段文本的行高、缩进，并可以为其加入三维效果的边框。 可以方便地为网页中的任何元素设置不同的背景颜色和背景图像。 可以精确地控制网页中各元素的位置。 可以与脚本语言相结合，从而产生各种动态效果。 可以使HTML 代码更简练，缩短了浏览器打开页面的时间。 9.1.2 CSS基本语法 1.基本组成 CSS样式表由若干个样式(也称规则)组成， 每个样式由两部分组成：选择器和声明(若干声明的集合)。选择器是表示要对谁设置样式，声明用于表示要设置成什么效果。每个声明由两部分组成：属性和属性值。 2.书写规范 声明 CSS代码中的所有标点符号使用英文标点符号。每个声明的属性和属性值用冒号(:)隔开,为了便于阅读，在冒号左右各添加一个空格。每个声明用分号（;）隔开，为了便于阅读，一行最好只写一个声明。 (2) 单位的使用 在CSS中，如果属性值是一个数字，那么必须为这个数字安排一个具体的单位，除非该数字是由百分比组成的比例，或者是数字0。 (3) 引号的使用 多数CSS的属性值都是数字值或预先定义好的关键字，然而，还有一些属性值则是含有特殊意义的字符串。这时，引用这样的属性值就需要为其添加引号。典型的字符串属性值就是各种字体的名称。 (4) 大小写敏感 CSS 对大小写不敏感，但class 和 id 选择符的名称对大小写是敏感的 (5) 注释 CSS的注释以“/*”开头，以“*/”结尾。注释独占一行也可放在行尾。 9.1.3 CSS样式的分类 1.内联样式 内联样式只能定义某个特定网页元素的样式(不需要使用选择器)，并且CSS和HTML代码混在一起，不方便后期维护，这是一种过渡型的CSS，不建议使用。 内联CSS是利用HTML标签的style属性(每个HTML元素都有这个属性)设置CSS样式。 2. 内部样式表 在需要设置单个页面的样式时，可以使用内部样式表，并且定义的样式只能用于当前文档。 通常用于平时练习或只在这个页面中使用的样式的情况下。 内部样式表由若干组包括在 HTML 文档头部分的 style 标签中的 CSS 规则组成。 在使用内部CSS代码时应注意，style标签只能放置于HTML文档的head标签内。 3.外部样式表 在需要同时控制多个网页文档的外观以便在多个页面上实现统一的格式时，可以使用外部样式表。外部样式表将CSS代码(若干组 CSS 规则)存储在一个单独的外部 CSS (.css) 文件中。 CSS文件（.css）与网页文档（.html）并没有什么直接的关系。如果需要用外部CSS文件控制网页文档的外观，则需要在网页文档head标签区域中使用link标签导入。 9.1.4 CSS选择器 选择器是CSS代码的对外接口，网页浏览器就是根据CSS代码的选择器，实现和HTML代码的匹配，然后读取CSS代码的属性和属性值，将其应用到网页文档中。 CSS的选择器名称只允许包括字母，数字以及下划线，并只能以字母和下划线开头 在CSS中常用3种选择器，标签选择器、类选择器、ID选择器。 基本选择器 标签选择器 在HTML一百种左右的标签(随着HTML版本的更新，标签个数也在不断的变化中)中，CSS允许用户直接定义多数HTML标签的样式。标签选择器就是HTML的标签名。 标签选择器通常用于改变整个文档中所有该类型标签为新的样式。 (2)类选择器 类选择器可以把不同的HTML标签归为一类，为其定义相同的样式，简化CSS代码。一个类选择器可以用于网页文档中的多种标签或多个标签。