- JavaScript 从入门到项目实践（超值版）
- 聚慕课教育研发中心
- 7675字
- 2021-03-30 11:00:50
第5章
JavaScript开发基础——CSS知识
◎本章教学微视频：20个 48分钟
学习指引
使用CSS技术可以对文档进行精细的页面美化，CSS不仅可以对单个页面进行格式化，还可以对多个页面使用相同的样式进行修饰，以达到统一的效果。本章将详细介绍CSS的相关基础知识，主要内容包括CSS的相关概念、CSS的基础语法、CSS的编写方法、CSS的选择器以及CSS的调用样式。
重点导读
- 掌握CSS的相关概念。
- 掌握CSS的语法基础。
- 掌握CSS的编写方法。
- 掌握CSS选择器的应用。
- 掌握调用CSS样式的方法。
5.1 CSS的相关概念
CSS是英文Cascading Style Sheets（层叠样式表单）的缩写，通常又称为风格样式表（Style Sheet）或级联样式表，它是用来进行网页风格设计的。给网页添加CSS，最大的优势就是在后期维护中只需要修改代码即可。
5.1.1 CSS能做什么
通过在网页中添加CSS样式表，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。具体来讲，CSS的作用有以下几个方面。
- 在几乎所有的浏览器上都可以使用。
- 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
- 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
- 用户可以轻松地控制页面的布局。
- 用户可以将许多网页的风格、格式同时更新，不用再一页一页地更新了。
- 用户可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
5.1.2 浏览器与CSS
CSS制定完成之后，具有了很多新功能，即新样式。但这些新样式在浏览器中不能获得完全支持，主要在于各个浏览器对CSS的很多细节处理上存在差异。例如，一个标签的某个属性被一种浏览器支持，而另外一种浏览器则不支持，或者两个浏览器都支持，但其显示效果不一样。
各主流浏览器为了自己产品的利益和推广，定义了很多私有属性，以便加强页面显示样式和效果，导致现在每个浏览器都存在大量的私有属性。虽然使用私有属性可以快速构建效果，但是对网页设计者来说这是一个大麻烦，设计一个页面需要考虑在不同浏览器上的显示效果，一个不注意就会导致同一个页面在不同浏览器上显示效果不一致，甚至有的浏览器不同版本之间也具有不同的属性。
如果所有浏览器都支持CSS样式，那么网页设计者只需要使用一种统一标签，就会在不同浏览器上显示统一样式效果。
当CSS被所有浏览器接受和支持的时候，整个网页设计将会变得非常容易，其布局更加合理，样式更加美观，到那个时候，整个Web页面显示会焕然一新。虽然现在CSS还没有完全普及，各个浏览器对CSS的支持还处于发展阶段，但CSS是一个新的、具有发展潜力很高的技术，在样式修饰方面，是其他技术无可替代的。学习CSS技术，才能保证不落伍。
5.1.3 CSS的局限性
CSS的局限性主要体现在定位属性上的局限性以及不同浏览器之间的限制。在使用绝对定位属性的时候，由于元素的位置已经确定，并独立于文档之外，所以当元素中的内容发生变化时，其他元素无法根据绝对定位元素的变化而做出相应的调整，最终将会导致页面中内容重叠或者产生空白。
在使用相对定位属性的时候，由于页面中会保留元素原来占有的位置，所以会在原有位置上产生空白区域，同时，由于相对定位的优先级高于普通元素，所以也可能造成元素内容的重叠。
浏览器支持的不一致性。浏览器的漏洞或缺乏支持的CSS功能，导致不同的浏览器显示出不同的CSS版面编排效果。例如，在微软IE 6.0的旧版本，执行了许多自己的CSS2.0属性，曲解了很多重要的属性，例如width、height和float。
CSS没有父层选择器，CSS选择器无法提供元素的父层或继承性，以符合某种程度上的标准。先进的选择器（例如XPath）有助于进行复杂的样式设计。
不能明确地指定继承性样式的继承性，建立在浏览器中DOM元素的层级和具体的规则上。垂直控制的局限元素的水平放置普遍地易于控制，垂直控制则是非凭直觉性的、较迂回的，甚至是不可能的。
5.1.4 CSS的优缺点
CSS通过控制页面结构的风格，进而控制整个页面的风格，那么使用CSS控制网页风格有什么优点与缺点呢？
使用CSS的优点如下。
（1）加速用户的开发。CSS可以帮助用户做好基础工作，因此可以更快地开始开发。例如，如果两个开发团队一起工作，那么就可以共享彼此的CSS代码，从而提高团队的工作效果。
（2）可以使用跨浏览器功能。CSS已经编写成跨浏览器兼容了，所以用户可以专注于自定义和创建内容而不是调整基础的样式，更好的是CSS还会消除浏览器特定的bug。
（3）给用户干净和对称的布局。基于网格的CSS建立了一个预定义宽度的多列布局，所以用户可以专注于创建内容而不是排列文本块。
（4）强制使用好的网页设计习惯。CSS强制使用好的习惯，如引入打印样式表。它还提供了一系列的选择器，用户可以在所有使用框架的网站或Web应用中使用，这使得网页设计具有一致性。
使用CSS的缺点如下。
（1）限制开发自由。因为CSS有标准的网格、选择器和其他代码，所以限制了用户可以设计的东西，如布局大小、网格宽度、按键类型、样式等。
（2）添加额外代码。CSS不可避免地有一些用户不需要的代码，因此需要被迫接受一些额外的代码。
（3）强迫用户使用语法。通过使用CSS，用户需要被迫接受语法的变化，特别是在使用非标准命名模式的情况下。
5.2 CSS的基础语法
在网页中加入CSS样式的目的是将网页结构代码与网页格式风格代码分离开来，从而使网页设计者可以对网页的布局进行更多的控制。
5.2.1 CSS构造规则
构造CSS的规则由3部分组成，分别是选择符（selector）、属性（property）和属性值（value），其基本格式如下：
（1）selector：指选择符，可以采用多种形式，可以为文档中的HTML标签，例如<body>、<table>、<p>等，但是也可以是XML文档中的标签。
（2）property：指属性，是选择符指定的标签所包含的属性。
（3）value：指属性值，如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用分号（;）隔开。其基本格式如下：
下面就给出一条样式规则，如下所示：
该样式规则选择符是p，具体作用是为段落标签<p>提供样式；color为指定文字颜色属性；red为属性值。此样式表示标签<p>指定的段落文字为红色。
如果要为段落设置多种样式，则可以使用下列语句：
5.2.2 CSS注释语句
CSS注释可以帮助用户对自己写的CSS文件进行说明，如说明某段CSS代码所作用的地方、功能、样式等。
CSS的注释样式如下：
5.3 CSS的编写方法
CSS文件是纯文本格式文件，在编写CSS时，常用的编写方法有两种：一种是使用简单纯文本编辑工具，如记事本；另一种是使用专业的CSS编辑工具，如Dreamweaver。
5.3.1 使用记事本编写CSS
使用记事本编写CSS，首先打开记事本，然后输入相应CSS代码。具体步骤如下。
第一步：打开记事本，输入HTML网页代码，如图5-1所示。
图5-1 输入HTML网页代码
第二步：添加CSS代码。在<head>和</head>标签中间，添加CSS样式代码，如图5-2所示。从窗口中可以看出，在<head>和</head>标签中间，添加了一个<style>和</style>标签，即CSS样式标签。在<style>标签中间，对p样式进行了设定，设置段落居中显示并且颜色为红色。
第三步：运行网页文件。网页编辑完成后，使用IE浏览器打开，可以看到段落在页面中间以红色字体显示。如图5-3所示。
图5-2 添加CSS代码
图5-3 运行网页文件
5.3.2 使用Dreamweaver编写CSS
Dreamweaver的CSS编辑器具有提示和自动创建CSS功能，深受开发人员喜爱。使用Dreamweaver创建CSS步骤如下。
第一步：创建HTML文档。使用Dreamweaver创建HTML文档，此处创建了一个名称为Chap5.2.html文档，输入内容如图5-4所示。
图5-4 输入网页内容
第二步：添加CSS样式。在设计模式中，选中“春花秋月何时了……”段落后，右击并在弹出的快捷菜单中选择“CSS样式”→“新建”菜单命令，弹出“新建CSS规则”对话框，在“为CSS规则选择上下文选择器类型”下拉列表中，选择“标签（重新定义HTML元素）”选项，如图5-5所示。
第三步：单击“确定”按钮，弹出“body的CSS规则定义”对话框，在其中设置相关的类型，如图5-6所示。
第四步：单击“确定”按钮，即可完成段落样式的设置。设置完成后，HTML文档内容发生变化。从代码模式窗口中可以看到，在<head>和</head>标签中间增加了一个<style>和<\style>标签，用来放置CSS样式。其样式用来修饰段落，如图5-7所示。
图5-5 “新建CSS规则”对话框
图5-6 设置CSS样式
图5-7 增加<style>标签
第五步：运行HTML文档。在IE浏览器中预览该网页，其显示结果如图5-8所示。可以看到字体颜色设置为浅红色，大小为12px，字体较粗。
图5-8 预览网页效果
5.4 理解CSS选择器
选择器是CSS中很重要的概念，所有HTML中的标签都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，赋予各种样式声明，即可实现各种效果。
5.4.1 标签选择器
标签选择器又称为标记选择器，在W3C标准中，又称为类型选择器（Type Selector）。CSS标签选择器用来声明HTML标签采用哪种CSS样式，也就是重新定义了HTML标签。因此，每一个HTML标签的名称都可以作为相应的标签选择器的名称。
例如，p选择器就是用于声明页面中所有<p>标签的样式风格。同样，可以通过h1选择器来声明页面中所有的<h1>标签的CSS样式风格。具体代码如下所示：
以上CSS代码声明了HTML页面中所有<h1>标签。文字的颜色都采用红色，大小都为14px。
每一个CSS选择器都包括选择器、属性和值，其中属性和值可以为一个，也可以设置多个，从而实现对同一个标签声明多种样式风格的目的，如图5-9所示。
在这种格式中，既可以声明一个属性和值，也可以声明多个属性和值，根据具体情况而定。当然，还有另外一种常用的声明格式，如图5-10所示。
图5-9 CSS选择器格式
图5-10 CSS选择器声明格式
在这种格式中，每一个声明都不带分号，而是在两个声明之间用分号隔开。同样，既可以声明一个属性和值，也可以声明多个属性和值。
注意：CSS对于所有的属性和值都有相对严格的要求。如果声明的属性或值不符合该属性的要求，则不能使该CSS语句生效。
【例5-1】（实例文件：ch05\Chap5.1.html）标签选择器的应用示例。
相关的代码示例请参考Chap5.1.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-11所示。可以看到段落以蓝色字体显示，大小为30px。如果在后期维护中，需要调整段落颜色，只需要修改color属性值即可。
图5-11 标签选择器应用示例
5.4.2 类别选择器
类别选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。常用语法格式如下所示：
classValue是选择器的名称，具体名称由CSS制定者自己命名。
【例5-2】（实例文件：ch05\Chap5.2.html）类别选择器的应用示例。
相关的代码示例请参考Chap5.2.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-12所示。可以看到第一个段落以蓝色字体显示，大小为20px；第二段落以红色字体显示，大小为22px；标题同样以红色字体显示，大小为22px。
图5-12 类别选择器应用示例
5.4.3 ID选择器
ID选择器允许以一种独立于文档元素的方式来指定样式，在某些方面，ID选择器类似于类别选择器，不过也有一些重要差别。首先，ID选择器前面有一个#号，如图5-13所示。
图5-13 ID选择器结构示意图
例如，下面的两个ID选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。
注意：id属性只能在每个HTML文档中出现一次。
【例5-3】（实例文件：ch05\Chap5.3.html）ID选择器的应用示例。
相关的代码示例请参考Chap5.3.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-14所示。可以看到标题以蓝色字体显示，大小为20px；第一个段落以红色字体显示，大小为22px；第二段落以红色字体显示，大小为22px。
图5-14 ID选择器应用示例
5.4.4 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
例如希望把包含标题的所有元素变为红色，可以写作：
【例5-4】（实例文件：ch05\Chap5.4.html）属性选择器的应用示例。
相关的代码示例请参考Chap5.4.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-15所示。
图5-15 属性选择器应用示例
5.4.5 子选择器
子选择器用来选择一个父元素直接的子元素，不包括子元素的子元素，它的符号为大于号（>）。请注意这个选择器与后代选择器的区别，子选择器（Child Selector）仅是指它的直接后代，或者可以理解为作用于子元素的第一个后代；而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择。
【例5-5】（实例文件：ch05\Chap5.5.html）子选择器的应用示例。
相关的代码示例请参考Chap5.5.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-16所示。
图5-16 子选择器应用示例
5.4.6 选择器的嵌套
在CSS选择器中，可以通过嵌套的方式，对特殊位置的HTML进行声明，例如当<p>和</p>标签之间包含<b>和</b>标签时，就可以使用相应的控制，例如：
表示在类选择器标签下的一个id=one标签的样式。嵌套声明代码如下所示：
以上嵌套声明代码表示<p>标签中的<b>标签的内容会采用此样式。在下例中，用户可以为所有p元素定义一种样式，另外又为嵌套在marked类别选择器里的p元素定义另一种样式。
【例5-6】（实例文件：ch05\Chap5.6.html）嵌套选择器的应用示例。
相关的代码示例请参考Chap5.6.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-17所示。
图5-17 选择器的嵌套应用示例
提示：选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标签（父标签）定义class或者id，内层标签（子标签）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当子标签无法利用此规则时，才单独进行声明，例如一个<ul>标签中包含多个<li>标签，而需要对其中某个<li>标签单独设置CSS样式时才赋给该<li>标签一个单独id或者类别，而其他<li>标签同样采用“ul li{...}”的嵌套方式来设置。
5.4.7 选择器的集体声明
选择器可以单独声明，也可以进行集体声明，同样的样式如果单独声明，就会产生很多重复的代码，所以具有共同属性的最好进行集体声明，而且方便控制，达到一改全改的效果。
如h1,h2,table,div{color:red;font-size:20px}对于一些实际页面的效果，我们希望所有的网页元素都是用同一种样式，但又不希望逐个来加入集体声明，这时可以利用“*”做全局声明，例如：
注：既然是集体声明，那么就应该是所有的选择器都可以放在一起。
CSS集体声明书写规范如下：
表示对h1、h2、h3等所有涉及的标签进行同时CSS属性修饰。
【例5-7】（实例文件：ch05\Chap5.7.html）选择器的集体声明示例。
相关的代码示例请参考Chap5.7.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-18所示。
图5-18 选择器的集体声明
5.5 调用CSS的样式
CSS样式表能很好地控制页面显示，以达到分离网页内容和样式代码。CSS样式表控制HTML页面达到好的样式效果，其方式通常包括行内样式、内嵌样式、链接样式和导入样式。
5.5.1 行内样式
行内样式是最为简单的CSS设置方式，需要给每一个标签都设置style属性。顾名思义，它和样式所定义的内容在同一代码行内。其格式如下所示：
【例5-8】（实例文件：ch05\Chap5.8.html）行内样式的应用示例。
相关的代码示例请参考Chap5.8.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-19所示，可以看出各段的文字以不同的效果显示。
图5-19 行内样式的应用示例
行内样式是最为简单的CSS使用方法，但由于需要为每一个标签设置style属性，后期维护成本依然很高，而且网页文件容易过大，因此不推荐使用。
5.5.2 嵌入样式
在HTML页面内部定义的CSS样式表，叫作嵌入式CSS样式表，也就是在HTML文档的头部标签中，使用<style>标签并在该标签中定义一系列CSS规则。其格式如下所示：
【例5-9】（实例文件：ch05\Chap5.9.html）嵌入样式的应用示例。
相关的代码示例请参考Chap5.9.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-20所示。可以看到网页背景以绿色显示，图片以300px×300px大小显示。
图5-20 嵌入样式的应用示例
5.5.3 链接样式
链接式CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便。
链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过<link>链接标签链接到页面中，而且该链接语句必须放在页面的<head>标签区，如下所示：
（1）rel指定链接到样式表，其值为stylesheet。
（2）type表示样式表类型为CSS样式表。
（3）href指定了CSS样式表所在位置，此处表示当前路径下名称为1.css文件。
【例5-10】（实例文件：ch05\Chap5.10.html）链接样式的使用。
【例5-11】（实例文件：ch05\Chap5.11.css）链接文件。
相关的代码示例请参考Chap5.10.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-21所示。可以看到标题和段落以不同样式显示。
图5-21 链接样式的应用示例
5.5.4 导入样式
导入样式和链接样式基本相同，都是创建一个单独的CSS文件，然后再引入到HTML文件中，只不过语法和运作方式有差别。采用导入样式的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌效果。而链接样式是在HTML标签需要样式风格时才以链接方式引入。
导入外部样式表是指在内部样式表的<style>标签中，使用@import导入一个外部样式表，例如：
导入外部样式表相当于将样式表导入到内部样式表中，其方式更有优势。导入外部样式表必须在样式表的开始部分、其他内部样式表上面。
【例5-12】（实例文件：ch05\Chap5.12.html）导入样式的应用示例。
【例5-13】（案例文件：ch05\Chap5.13.css）链接文件。
相关的代码示例请参考Chap5.12.html文件，然后双击该文件，在IE浏览器里面运行的结果如图5-22所示。可以看到标题和段落以不同样式显示，标题居中显示颜色为蓝色，段落大小为20px并加粗显示。
图5-22 导入样式的应用示例
导入样式与链接样式相比，最大的优点就是可以一次导入多个CSS文件，其格式如下所示：
5.6 典型案例——制作网页导航菜单
使用CSS，导航菜单作为网站必不可少的组成部分，关系着网站的可用性和用户体验。下面就来制作一个网页导航菜单。
【例5-14】（实例文件：ch05\制作网页导航菜单.html）制作网页导航菜单。
具体步骤如下所示。
第一步：构建HTML页面。创建HTML页面，完成基本框架的创建。其代码如下所示：
在IE 11.0中浏览效果如图5-23所示。
第二步：使用内嵌样式。如果要对网页背景进行修饰，需要添加CSS，此处使用内嵌样式，在<head>标签中添加CSS。其代码如下所示：
在IE 11.0中浏览效果如图5-24所示，可以看到此时背景发生了颜色变化。
图5-23 创建页面基础框架
图5-24 添加页面背景颜色
第三步：改变文字样式。添加CSS代码，改变导航文字的字体样式，其代码如下所示：
在IE 11.0中浏览效果如图5-25所示，可以看到字体样式为Arial。
第四步：去除项目符号。去除标签UL前面的项目符号，其代码如下所示：
在IE 11.0中浏览效果如图5-26所示，可以看到文字前面的项目符号取消了。
图5-25 设置字体样式
图5-26 取消项目符号
第五步：添加下画线。使用CSS样式为导航文字添加下画线，其代码如下所示：
在IE 11.0中浏览效果如图5-27所示，可以看到每个文字下方都添加了一个下画线。
第六步：修饰导航文字。使用CSS可以为导航菜单添加边框、区块等元素。其代码如下所示：
在IE 11.0中浏览效果如图5-28所示，可以看到导航菜单文字添加了边框、区块等元素。
图5-27 添加文字下画线
图5-28 修饰导航文字
第七步：添加背景颜色。在CSS样式中，为每个导航菜单添加背景颜色，其代码如下所示：
在IE 11.0中浏览效果如图5-29所示，可以看到每个导航菜单都显示了背景颜色。
第八步：添加鼠标经过效果。使用CSS可以为导航添加鼠标经过效果，其代码如下所示：
在IE 11.0中浏览效果如图5-30所示，当鼠标指向某个导航菜单时，背景颜色发生了改变。
图5-29 添加背景颜色
图5-30 添加鼠标经过效果
5.7 就业面试技巧与解析
5.7.1 面试技巧与解析（一）
面试官：你觉得你个性上最大的优点是什么？
应聘者：我认为我具有沉着冷静、条理清楚、乐于助人、关心他人、适应能力强等优点。我相信经过一到两个月的培训及项目实践，我能胜任这份工作。
5.7.2 面试技巧与解析（二）
面试官：你对公司加班有什么看法？
应聘者：如果是工作需要我会义不容辞地加班，再加上我现在单身，没有任何家庭负担，可以全身心地投入工作。但同时，我也会提高工作效率，减少不必要的加班。