第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说，对HTML语言一定不感到陌生，因为它是网页制作的基础，但是如果希望网页能够美观、大方，并且升级维护方便，那么仅仅知道HTML还是不够的，还需要了解CSS。了解CSS基础知识，可以为后面的学习打下基础。 本章主要内容包括： 为什么在网页中加入CSS。 基本的CSS选择器。 在HTML中使用CSS。 设置CSS属性。
CSS是Cascading Style Sheet的缩写，又称为“层叠样式表”，简称样式表。 它是一种制作网页的新技术，现在已经被大多数浏览器所支持，成为网页设计者必不可少的工具之一。
8.1.1 什么是CSS 在1997年W3C颁布HTML 4标准的同时也公布了有关样式表的第一个标准CSS1，自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。 网页设计中我们通常需要统一网页的整体风格，统一的风格大部分涉及网页中文字属性、网页背景色以及链接文字属性等，如果我们应用CSS来控制这些属性，会大大提高网页设计速度，更加统一网页总体效果。 例如下面图8.1和图8.2所示的网页分别为使用CSS前后的效果。
8.1.2 使用CSS的好处 大大缩减页面代码，提高页面浏览速度，缩减带宽成本。 结构清晰，容易被搜索引擎搜索到。用只包含结构化内容的HTML代替嵌套的标记，搜索引擎将更有效地搜索到内容。 缩短改版时间，只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 强大的字体控制和排版能力。使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 提高易用性，使用CSS可以结构化HTML，如<p>标记只用来控制段落，<heading>标记只用来控制标题，<table>标记只用来表现格式化的数据等。 表现和内容相分离，将设计部分分离出来放在一个独立样式文件中。 <table>布局灵活性不大，只能遵循<table>、<tr>、<td>的格式，而<div>可以有各种格式。 <table>布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合在一起，很不直观。而div更能体现样式和结构相分离，结构的重构性强。 以前一些必须通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 可以将许多网页的风格格式同时更新。不用再一页一页地更新了。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
8.1.3 如何编写CSS CSS的文件与HTML文件一样，都是纯文本文件，因此一般的文字处理软件都可以对CSS进行编辑。记事本和UltraEdit等最常用的文本编辑工具对CSS的初学者都很有帮助。 Dreamweaver这款专业的网页设计软件在代码模式下对HMTL、CSS和JavaScript等代码有着非常好的语法着色以及语法提示功能，对CSS的学习很有帮助。 在Dreamweaver编辑器中，对于CSS代码，在默认情况下都采用粉红色进行语法着色，而HTML代码中的标记则是蓝色，正文内容在默认情况下为黑色。而且对于每行代码，前面都有行号进行标记，方便对代码的整体规划。
8.1.3 如何编写CSS 当已经选定某个CSS样式，例如上例中的color样式，在其冒号后面再按空格键时，Dreamweaver编辑器中会弹出新的详细提示框，让用户对相应CSS的值进行直接选择。如图8.4所示的调色板就是其中的一种情况。
8.1.4 CSS基本语法 CSS的语法结构仅由3部分组成，分别为选择符、样式属性和值，基本语法如下。 选择符{样式属性:取值;样式属性:取值;样式属性:取值;…} 选择符(selector)指这组样式编码所要针对的对象，可以是一个XHTML标签，如body，hl；也可以是定义了特定id或class的标签，如＃main选择符表示选择<div id=main>，即一个被指定了main为id的对象。浏览器将对CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。 属性(property)是CSS样式控制的核心，对于每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位和浮动方式等。 值(value)是指属性的值，形式有两种，一种是指定范围的值，如float属性，只可以应用到left、right和none 3种值中；另一种为数值，如width能够取值于0～9999px，或通过其他数学单位来指定。
8.1.5 浏览器与CSS 网上的浏览器各式各样，绝大多数浏览器对CSS都有很好的支持，因此设计者往往不用担心其设计的CSS文件不被用户所支持。但目前主要的问题在于，各个浏览器之间对CSS很多细节的处理上存在差异，设计者在一种浏览器上设计的CSS效果，在其他浏览器上的显示效果很可能不一样。就目前主流的两大浏览器IE与Firefox而言，在某些细节的处理上就不尽相同。即使IE6与IE7，对相同页面的浏览效果也存在一些差异。 使用CSS制作网页，一个基本的要求就是主流的浏览器之间的显示效果要基本一致。通常的做法是一边编写HTML和CSS代码，一边在两个不同的浏览器上进行预览，及时地调整各个细节，这对深入掌握CSS也是很有好处的。 另外Dreamweaver的“视图”模式只能作为设计时的参考来使用，绝对不能作为最终显示效果的依据，只有浏览器中的效果才是大家所看到的。
8.2 基本CSS选择器 选择器(selector)是CSS中很重要的概念，所有HTML语言中的标签都是通过不同的CSS选择器进行控制的。 在CSS中，有各种不同类型的选择器，基本选择器有标签选择器、类别选择器和ID选择器3种，下面详细介绍。
8.2.1 标签选择器 一个完整的HTML页面是有很多不同的标签组成。标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。例如p选择器，下面就是用于声明页面中所有<p>标签的样式风格。 p{ font-size:14px; color:093; } 每一个CSS选择器都包含了选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标签声明多种样式风格，如图8.5所示。
8.2.2 类别选择器 定义类型选择器时，在自定义类的名称前面要加一个“.”号。 8.2.2 类别选择器 定义类型选择器时，在自定义类的名称前面要加一个“.”号。 类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范，如图8.6所示。
8.2.3 ID选择器 ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，其格式如图8.8所示。
在HTML网页中添加CSS有4种方法：链接方式、行内方式、导入样式和内嵌样式，下面分别介绍。
8.3.1 链接外部样式表 链接方式就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内。这种方法最适合大型网站的CSS样式定义。 基本语法： <link type="text/css" rel="stylesheet" href="外部样式表的文件名称"> 语法说明： (1) 链接外部样式表时，不需要使用style元素，只需直接用<link>标记放在<head>标记中就可以了。 (2) 同样外部样式表的文件名称是要嵌入的样式表文件名称，后缀为.css。 (3) CSS文件一定是纯文本格式。 (4) 在修改外部样式表时，引用它的所有外部页面也会自动地更新。 (5) 外部样式表中的URL相对于样式表文件在服务器上的位置。 (6) 外部样式表优先级低于内部样式表。 (7) 可以同时链接几个样式表，靠后的样式表优先于靠前的样式表。
8.3.2 行内方式 行内方式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。行内方式的使用是直接在HTML标记里添加style参数，而style参数的内容就是CSS的属性和值，在style参数后面的引号里的内容相当于在样式表大括号中的内容。 基本语法： <标记 style="样式属性：属性值;样式属性：属性值…"> 语法说明： (1) 标记：HTML标记，如body、table、p等。 (2) 标记的style定义只能影响标记本身。 (3) style的多个属性之间用分号分隔。 (4) 标记本身定义的style优先于其他所有样式定义。
8.3.3 嵌入外部样式表 嵌入外部样式表就是在HTML代码的主体中直接导入样式表的方法。 基本语法： 语法说明： 8.3.3 嵌入外部样式表 嵌入外部样式表就是在HTML代码的主体中直接导入样式表的方法。 基本语法： <style type=text/css> @import url("外部样式表的文件名称"); </style> 语法说明： (1) import语句后的“;”一定要加上。 (2) 外部样式表的文件名称是要嵌入的样式表文件名称，后缀为.css。 (3) @import应该放在style元素的任何其他样式规则前面。
8.3.4 定义内部样式表 内部样式表允许在它们所应用的HTML文档的顶部设置样式，然后在整个HTML文件中直接调用使用该样式的标记。 8.3.4 定义内部样式表 内部样式表允许在它们所应用的HTML文档的顶部设置样式，然后在整个HTML文件中直接调用使用该样式的标记。 基本语法： <style type="text/css"> <!— 选择符1(样式属性:属性值;样式属性:属性值;…) 选择符2(样式属性:属性值;样式属性:属性值;…) 选择符3(样式属性:属性值;样式属性:属性值;…) … 选择符n(样式属性:属性值;样式属性:属性值;…) --> 语法说明： (1) <style>元素是用来说明所要定义的样式，type属性是指style元素以CSS的语法定义。 (2) <!--… -->隐藏标记：避免了因浏览器不支持CSS而导致错误，加上这些标记后，不支持CSS的浏览器，会自动跳过此段内容，避免一些错误。 (3) 选择符1…选择符n：选择符可以使用HTML标记的名称，所有的HTML标记都可以作为选择符。 (4) 样式属性主要是关于对选择符格式化显示风格的也是属性名称。 (5) 属性值设置对应也是属性的值。
可以使用Dreamweaver对所有的CSS属性进行设置。
8.4.1 设置CSS类型属性 使用“CSS样式定义”对话框中的“类型”选项可以定义文本的基本属性，如图8.10所示。
8.4.2 设置CSS背景属性 在“分类”列表中选择“背景”选项，背景属性的功能主要是在网页的元素后面添加固定的背景颜色或图像，如图8.12所示。
8.4.3 设置CSS区块属性 在“分类”列表中选择“区块”选项，可以定义样式的间距和对齐设置，如图8.14所示。
8.4.4 设置CSS方框属性 在“分类”列表中选择“方框”选项，如图8.16所示。
8.4.5 设置CSS边框属性 在“分类”列表中选择“边框”选项，可以定义边框的属性，如图8.18所示。
8.4.6 设置CSS列表属性 在“分类”列表中选择“列表”选项，为列表选项卡定义列表设置，如图8.20所示。
8.4.7 设置CSS定位属性 在“分类”列表中选择“定位”选项，如图8.22所示。
8.4.8 设置CSS扩展属性 在“分类”列表中选择“扩展”选项，如图8.24所示。 Page-break-before：其中两个属性的作用是为打印的页面设置分页符。 Page-break-after：检索或设置对象后出现的页分割符。 Cursor：指针位于样式所控制的对象上时改变指针图像。 Filter：对样式所控制的对象应用特殊效果。
8.5 综合实例——利用Dreamweaver对网页添加CSS样式 由于“可视化”和操作简便，在Dreamweaver中编写CSS的人很多，下面介绍在Dreamweaver中给网页添加CSS样式的方法，具体操作步骤如下。 (1) 在打开的Dreamweaver窗口中选择“格式”|“CSS样式”|“新建”命令，如图8.26所示。 (2) 打开“新建CSS规则”对话框，选择“选择器类型”，在“选择器名称”中输入选择器名称body，最后在“选择定义规则的位置”列表框中选择“仅限该文档”，这样产生的CSS代码就会直接出现在文档中，否则会新建一个独立的CSS文件，并把代码写到这个文件中，设置好后的对话框如图8.27所示。
8.5 综合实例——利用Dreamweaver对网页添加CSS样式 (3) 单击“确定”按钮，会出现一个“body的CSS规则定义”对话框，左侧是一个目录，右侧是针对每个目录的具体设置项目，首先显示的是“类型”页，这时用鼠标单击一下“color”旁边的小矩形，会出现一个颜色选择面板，这时可以选择一种颜色，如图8.28所示。 (4) 这里选择深绿色，设置body内的正文文字颜色。然后在左侧的分类中选择“背景”，这时就会切换到“背景”页，在“Background-color”选项中选择浅绿色，也可以直接输入“#9F9”，如图8.29所示。
8.5 综合实例——利用Dreamweaver对网页添加CSS样式 (5) 选择左侧分类中的“区块”，然后在右侧的“Text-align”下拉列表中选择“left”，如图8.30所示。 (6) 单击“确定”按钮，属性设置完成，现在回到Dreamweaver的拆分文档窗口中，可以看到左侧显示的是CSS代码，如下所示，右侧显示网页的效果，如图8.31所示。 <style type="text/css"> body { color: #060;background-color: #9F9;text-align: left; } </style>
8.6 本 章 小 结 CSS是为了简化Web页面的更新工作而诞生的，它使网页变得更加美观，维护更加方便。CSS在网页制作中起着非常重要的作用，对于控制网页中对象的属性、增加页面中内容的样式、精确的布局定位等都发挥了非常重要的作用，是网页设计师必须熟练掌握的内容之一。 网页的设计与布局好与不好，CSS的学习很重要，深信自己坚持每天多学一点。本章主要介绍为什么在网页中加入CSS、基本的CSS选择器、在HTML中使用CSS、设置CSS属性等CSS基础知识。
8.7 练 习 题 1．填空题 2．操作题 参见教材P148