第10章 CSS的基础知识

1、第10章 CSS的基础知识 10.1 样式表和HTML的关系10.2 样式表的基本结构10.3 如何在网页中加入css 10.4 class与id类选择符 10.5 div与span标签 10.6 CSS的几个特性 上一页上一页下一页下一页目目 录录结结 束束本本 节节10.3 如何在网页中加入css 10.3.1 在行内直接加入样式10.3.2 把样式表嵌入到文档头10.3.3 链接到样式表10.3.4 输入样式表 上一页上一页下一页下一页目目 录录结结 束束本本 节节10.4.1 class类选择符10.4.2. id类选择符 10.4 class与id类选择符 上一页上一页下一页下一页目

2、目 录录结结 束束本本 节节10.5.1 div标签10.5.2 span标签 10.5 div与span标签 上一页上一页下一页下一页目目 录录结结 束束本本 节节第10章 CSS的基础知识 CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以掌握，非常容易。上一页上一页下一页下一页目目 录录结结 束束本本 节节 样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(Cascading StyleShe

3、ets，简称CSS)。那什么是样式呢？样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思？意思是当我们在HTML文件中引用数个定义样式文件（CSS文件）时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。 样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。10.1 样式表和HTML的关系上一页上一页

4、下一页下一页目目 录录结结 束束本本 节节 HTML 4.0版本已经包括了样式表的内容。样式表正在逐渐改变设计、制作网页的方法，为网页创新奠定了基础。 样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两部分相互分离，从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷，而样式表代码独立出来后则从另一角度控制网页外观。 利用样式表，可以将站点上所有的网页都指向某个CSS文件，用户只需要修改CSS文件中的某一行，那么整个站点都会随之发生改变。这样，通过样式表就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。上一页上一页下一页下一页目目 录录结结

5、 束束本本 节节 样式表的基本结构是怎样的？下面通过一个简单的样式表实例，让你获得对样式表整体性的感性认识。首先建立一个简单的HTML文件。10.2 样式表的基本结构上一页上一页下一页下一页目目 录录结结 束束本本 节节例例10-1：建立一个简单的样式表，效果如图：建立一个简单的样式表，效果如图10.1所示。所示。文件ex10-01.html的源代码 简单的样式表样式表这是一个简单的样式表上一页上一页下一页下一页目目 录录结结 束束本本 节节 现在，给这个HTML文件加一些样式表。只需在标签之前插入以下代码： 这样就已经制作出了使用样式表的网页。从浏览器中打开网页（当然首先要保证浏览器支持样式

6、表），网页显示效果如下图所示。上一页上一页下一页下一页目目 录录结结 束束本本 节节 简单样式表效果上一页上一页下一页下一页目目 录录结结 束束本本 节节 由这个简单的样式表实例，可以看出： 一个样式表由许多样式规则组成的，用以告诉浏览器怎样去显示一个网页文档。 样式表的核心是规则，样式表的规则如下： 选择符属性1:值1;属性2:值2 如，h1color:green 这个规则就是告诉浏览器所有标签和之间的文字以绿色显示。 其中h1就是选择符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名（如color）和属性值（如green）。上

7、一页上一页下一页下一页目目 录录结结 束束本本 节节10.3 如何在网页中加入css 我们可以使用四种方法将样式表加入到网页中，每种方法都有其不同的优点： 1将样式表加入到HTML文件行中 2将样式表嵌入到HTML文件的文档头中 3将一个外部样式表链接到HTML文件上 4将一个外部样式表输入到HTML文件中 以上四种方法，可分成内部样式表（前两者）及外部样式表（后两者）两类。上一页上一页下一页下一页目目 录录结结 束束本本 节节10.3.1 在行内直接加入样式 可以直接在HTML代码行中加入样式规则，这种方法适用于指定网页内的某一小段文字的显示风格。不过，利用这种方法定义样式时，效果只可以控制

8、该标签，其语法如下： 上一页上一页下一页下一页目目 录录结结 束束本本 节节10.3.2 把样式表嵌入到文档头 在标签中，用设置style属性的方法，一次只能控制一个标签的样式，实在让人看不出CSS对网页设计有什么特别的效果。在这一节，我们将讲述在文档头嵌入样式表规则的方法，浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表，就可采用该方法。 这种方法就是将所有的样式表信息都列于HTML文档的头部，基本语法如下：上一页上一页下一页下一页目目 录录结结 束束本本 节节.上一页上一页下一页下一页目目 录录结结 束束本本 节节 说明： 标签是用来说明所要定义的样式。type属性是指

9、定标签以CSS的语法定义。 样式表基本格式中的type=text/css用于说明这是一段CSS规则代码。 为了防止不支持CSS的浏览器将标签间的CSS规则当成普通字符串，而显示在网页上，应将CSS的规则代码插入标签之间。 选择符1.选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。 样式属性：定义样式的属性名称上一页上一页下一页下一页目目 录录结结 束束本本 节节 前面，我们介绍了在文档头嵌入样式表规则的方法。这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独

10、立的CSS文件中，并将该文件链接或输入到要运用样式的HTML文件。 这种方法就是将多个HTML文件都链接到一个样式表文件。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。如果维护的站点很大，则这种方式绝对会有其用武之地。它的使用方法是：创建一个普通的网页，但不使用规则，而是在HTML文档头部使用标签。10.3.3 链接到样式表上一页上一页下一页下一页目目 录录结结 束束本本 节节基本语法如下：.上一页上一页下一页下一页目目 录录结结 束束本本 节节 说明： *.css为预先编写好的样式表文件。 外部样式表文件中不能含有任何像或这样的HTML标签。样

11、式表仅仅由样式表规则或声明组成。 在href属性中可以使用绝对URL或者相对URL。 外部样式表文件中，无须使用注释标签。 如同发布HTML文件那样，将这个CSS文件发布到服务器中。在网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。 上一页上一页下一页下一页目目 录录结结 束束本本 节节 单一的样式可以通过多个样式表给出，例如： 在这个例子中，3个样式表组合成一个contemporary样式，要将多个样式表组合成一个单一样式，必须在每个样式表中使用相同的title。 当样式被应用到很多的网页时，采用链接到外部样式表的方式是理想的。网页制作者使用外部样

12、式表可以仅仅通过改变一个文件而改变整个网站的外观；同样，大多数浏览器会保存外部样式表文件到缓冲区，从而提高了显示网页时的速度。上一页上一页下一页下一页目目 录录结结 束束本本 节节 输入样式表的方法同链接到外部样式表文件类似。其语法如下： 说明： import语句后的“；”号是必须的。 要输入的样式表文件的扩展名为.css。10.3.4 输入样式表上一页上一页下一页下一页目目 录录结结 束束本本 节节 我们介绍了四种样式表的使用方法，这四种方法在使用上各有其特色，但当这四种方法同时出现时，浏览器会以哪种方法为优先使用呢？答案是在行内直接加入样式顺序为最高。至于其他三种的顺序则是一样的，如果其他

13、三种方法同时出现，且各方法定义的样式又都不同时，浏览会选择较后定义的样式来显示。上一页上一页下一页下一页目目 录录结结 束束本本 节节 10.4.1 class类选择符class类选择符用于指定标签属于何种样式类。class类选择符的使用语法如下:10.4 class与id类选择符 class、id类选择符能给网页制作者带来极大的便利。上一页上一页下一页下一页目目 录录结结 束束本本 节节或者上一页上一页下一页下一页目目 录录结结 束束本本 节节 下面是语法各部分的说明： *.a1.*.an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由class

14、类选择符所引用的设置。*符号也可以用HTML内的标签替代（即标签1.标签n），此外*符号，在设置可以省略。 标签1.a1.标签n.an：为HTML的标签名称，即前面提过的*符号，也可以用HTML内的标签替代。不同点在于，若在定义class类选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。上一页上一页下一页下一页目目 录录结结 束束本本 节节 例如，在样式表中可以定义这样的类，代码如下：.ppcolor:lime; font-family:黑体p.ptcolor:blue; font-family:仿宋 这些类可以使用class属性在HTML中引用： 这是我们定义的PP类 这

15、是我们定义的PT类 在这个例子中，pp类可以用于任何HTML标签，因为它在样式表中没有与特定的HTML标签关联。而这个例子中pt类只能用于标签。 对于HTML文档中在结构上相同的部分，类是应用样式的有效办法。上一页上一页下一页下一页目目 录录结结 束束本本 节节 id类选择符与class两者最大的差别在于定义样式名称前的符号,用class定义时为“*.样式名称”；若用id定义时为“#样式名称”。 id与class虽然在标签内的定义写法不太一样，但基本上其显示在网页上的效果是一样的。id类选择符的使用语法如下:10.4.2. id类选择符上一页上一页下一页下一页目目 录录结结 束束本本 节节或者

16、下面是语法各部分的说明：(1) #a1.#an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。(2) 标签1.a1.标签n.an：为HTML的标签名称，不同点在于，若在id选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。上一页上一页下一页下一页目目 录录结结 束束本本 节节 10.5.1 div标签 标签可用来定义网页上的一个特定区域，在该区域范围内可包含文字、图形、表格、窗体，甚至其他div等。在标签内的所有内容，都将调用此标签所定义出的样式，且区域与区域间彼此是独立的。 当编写HTML文件，要

17、定义区域间使用不同样式时，就可以使用标签达到这个效果。 标签应用于HTML文件，其语法如下： . 或者 . 在使用标记时，可以使用width与height属性设置区域的大小。 上一页上一页下一页下一页目目 录录结结 束束本本 节节 10.5.2 span标签 标签主要用来定义网页上的区域，通常用于比较大范围的设置，而标签也可以用在区段的定义，不过一般都是用在网页中某一小段文件段落。其语法如下：.或者. span标签被加入到HTML中的主要目的是用于样式表，所以当样式表失效时它就没有任何作用。span标签可以使用clsss和id类选择符。 与的差异： 在区域内的对象与区域外的上下文会自动换行；而

18、区域内的对象与区域外的上下文不会自动换行。 与标签可同时使用，但建议标签可包含，但最好不要包含标签，否则会造成标签的区域不完整，而形成断行的现象。上一页上一页下一页下一页目目 录录结结 束束本本 节节 10.6 CSS的几个特性 1可以归类CSS的规则可以多个HTML标签采用同一样式，例： h1,pfont-family:黑体 这项规则设定所有被和标签包含的网页内容将用黑体显示。上一页上一页下一页下一页目目 录录结结 束束本本 节节 2样式表的规则具有继承性 样式表的规则可从母体延续到子体，例： bcolor:blue 这项规则告诉浏览器将所有之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢？ 这是一个样式表实例 对于标签并没有设定样式，但因为位于之中，所以它将继承母体设定的样式，也以蓝色显示。上一页上一页