网页设计与制作 雷伟军 第9章 CSS样式表

《网页设计与制作 雷伟军 第9章 CSS样式表》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章CSS样式表9.1CSS的基本概念9.1.1CSS简介9.1.2CSS基本语法9.1.3CSS样式的分类9.1.4CSS选择器9.1.5在Dreamweaver中使用CSS样式表9.1.1CSS简介1.什么是CSSCSS是CascadingStyleSheets（层叠样式表）的简称。CSS是W3C（WorldWideWebConsortium）定义和维护的标准，用来定义如何显示HTML元素外观（字体、字号、间距和颜色等）的计算机语言。2.CSS的功能CSS样式表的功能一般可以归纳为以下几点。可以灵活地控制网页

2、中文字的字体、颜色、大小、间距等。可以灵活地设置一段文本的行高、缩进，并可以为其加入三维效果的边框。可以方便地为网页中的任何元素设置不同的背景颜色和背景图像。可以精确地控制网页中各元素的位置。可以与脚本语言相结合，从而产生各种动态效果。可以使HTML代码更简练，缩短了浏览器打开页面的时间。9.1.2CSS基本语法1.基本组成CSS样式表由若干个样式(也称规则)组成，每个样式由两部分组成：选择器和声明(若干声明的集合)。选择器是表示要对谁设置样式，声明用于表示要设置成什么效果。每个声明由两部分组成：属性和属性值。2.

3、书写规范声明CSS代码中的所有标点符号使用英文标点符号。每个声明的属性和属性值用冒号(:)隔开,为了便于阅读，在冒号左右各添加一个空格。每个声明用分号（;）隔开，为了便于阅读，一行最好只写一个声明。(2)单位的使用在CSS中，如果属性值是一个数字，那么必须为这个数字安排一个具体的单位，除非该数字是由百分比组成的比例，或者是数字0。(3)引号的使用多数CSS的属性值都是数字值或预先定义好的关键字，然而，还有一些属性值则是含有特殊意义的字符串。这时，引用这样的属性值就需要为其添加引号。典型的字符串属性值就是各种字体的名

4、称。(4)大小写敏感CSS对大小写不敏感，但class和id选择符的名称对大小写是敏感的(5)注释CSS的注释以“/*”开头，以“*/”结尾。注释独占一行也可放在行尾。9.1.3CSS样式的分类1.内联样式内联样式只能定义某个特定网页元素的样式(不需要使用选择器)，并且CSS和HTML代码混在一起，不方便后期维护，这是一种过渡型的CSS，不建议使用。内联CSS是利用HTML标签的style属性(每个HTML元素都有这个属性)设置CSS样式。2.内部样式表在需要设置单个页面的样式时，可以使用内部样式表，并且定义的样式

5、只能用于当前文档。通常用于平时练习或只在这个页面中使用的样式的情况下。内部样式表由若干组包括在HTML文档头部分的style标签中的CSS规则组成。在使用内部CSS代码时应注意，style标签只能放置于HTML文档的head标签内。3.外部样式表在需要同时控制多个网页文档的外观以便在多个页面上实现统一的格式时，可以使用外部样式表。外部样式表将CSS代码(若干组CSS规则)存储在一个单独的外部CSS(.css)文件中。CSS文件（.css）与网页文档（.html）并没有什么直接的关系。如果需要用外部CSS文件控制网页

6、文档的外观，则需要在网页文档head标签区域中使用link标签导入。9.1.4CSS选择器选择器是CSS代码的对外接口，网页浏览器就是根据CSS代码的选择器，实现和HTML代码的匹配，然后读取CSS代码的属性和属性值，将其应用到网页文档中。CSS的选择器名称只允许包括字母，数字以及下划线，并只能以字母和下划线开头在CSS中常用3种选择器，标签选择器、类选择器、ID选择器。基本选择器标签选择器在HTML一百种左右的标签(随着HTML版本的更新，标签个数也在不断的变化中)中，CSS允许用户直接定义多数HTML标签的样式

7、。标签选择器就是HTML的标签名。标签选择器通常用于改变整个文档中所有该类型标签为新的样式。(2)类选择器类选择器可以把不同的HTML标签归为一类，为其定义相同的样式，简化CSS代码。一个类选择器可以用于网页文档中的多种标签或多个标签。在使用类选择器时，先要在CSS代码中添加声明，然后适当的修改HTML文档标记。(3)ID选择器之前介绍的标签选择器和类选择器都是一种范围性的选择器，即可设定多个标签的CSS样式，两个标签各有其用途。在某些方面，ID选择器类似于类选择器，最主要的差别是ID选择器只针对某一个标签的，而类

8、选择器是针对某一类（多个）标签的。在HTML文档中，允许用户为任意一个标签设定id属性。但是，在一个HTML文档中，id属性值不能重复出现，即不允许两个及多个标签使用相同的ID。2.CSS选择方法包含选择通常应用于定义各种多层嵌套网页元素标签的样式，可根据网页元素标签的嵌套关系，帮助浏览器精确地查找该元素的位置。在使用包含选择方法时，需要将具有包含选择关系的