- 交互式Web前端开发实践
- 冷亚洪
- 9字
- 2020-11-28 16:45:25
第3章 CSS层叠样式表
3.1 CSS 2基础
3.1.1 CSS编写规范
CSS（cascading style sheet）称为层叠样式表，也叫CSS样式表或样式表，文件的扩展名为．css，用来设置Web页面中各种标签的样式，如设置文字大小、颜色、行高、背景等。所谓“层叠”是指当在HTML文件中引用多个样式文件时，浏览器将依据层叠顺序及就近原则进行处理，以避免发生冲突。CSS样式表是一种控制网页样式，并将样式信息与网页结构分离的一种标记性语言。
1.CSS基础语法
CSS样式表由若干条样式规则组成。这些样式规则可以应用到HTML的标签中来定义页面的显示效果。样式规则由选择符（selector）、属性（property）及属性值（value）组成，格式如下：
selector{property:value; property:value; property:value; ...}
从以上的格式中可以看出，一条样式规则包含一个选择符和若干属性及对应的属性值。属性及属性值用大括号包含起来；属性与属性值之间用冒号“:”隔开；属性值对之间用分号“; ”隔开。如为段落标签＜p＞设置样式如下：
p{font-family:"微软雅黑"; font-size:24px; color:#ff0000; }
以上样式设置段落文字字体为微软雅黑，字体大小24像素，字体颜色为红色。
2.CSS样式表类型
CSS样式表有三种类型：行内样式表、内部样式表和外部样式表。
（1）行内样式表
行内样式表在这三种样式表中是最简单、最直观的一种样式表。它是直接将样式规则写入HTML文件中标签的style属性中，以属性值的形式存在。如对段落标签设置样式如下：
<p style="font-family:’微软雅黑’; font-size:24px; color:#ff0000; ">段落文字
</p>
行内样式表是将样式规则以属性值的形式直接写入标签的style属性中，并直接作用于该标签。虽然简单直观，但如果其他的标签或者相同的标签要采用一样的样式，也需要在标签中设置style属性，并设置同样的样式规则。这样整个HTML页面结构不但显得臃肿，还没有起到页面结构和样式代码进行分离的作用，后期维护也很困难。因此，这种类型的样式表并不常用。
（2）内部样式表
内部样式表是将样式规则写在＜style＞和＜/style＞标签之间，并通常将该段样式代码添加到HTML页面的头部，即＜head＞与＜/head＞标签内部。其格式如下：
<head>
<meta charset="utf-8">
<title>径向渐变</title>
<style>
P{
font-family:"微软雅黑";
font-size:24px;
color:#ff0000;
}
</style>
</head>
内部样式表虽然没有完全将页面结构和样式表分离开来，但对于一些简单且某些标签样式需要统一的页面来说，使用内部样式表比使用行内样式表的页面代码结构更优化。
（3）外部样式表
外部样式表是用户重新创建的一个扩展名为．css的文件。样式规则按照语法格式直接写入该文件中，不再添加任何标签。
3．文档中如何引用CSS文件
行内样式表和内部样式表都是直接写在HTML文档中的，所以不存在引用的问题。但外部样式表是一个独立的文件，与HTML文档没有关联性。HTML文档要使用外部样式表呈现出样式的显示效果，就必须将两个文档关联起来。它们是如何联系的呢？换句话说，HTML文档是如何引用CSS外部样式表的呢？有两种方式：链接和导入。下面分别介绍。
（1）链接外部样式表
链接外部样式表是将外部样式表文件通过＜link＞标签链接到HTML文档的头部即＜head＞与＜/head＞之间，代码如下：
<head>
<meta charset="utf-8">
<title>径向渐变</title>
<link rel="stylesheet"type="text/css"href="*.css"/>
</head>
其中，属性rel表示链接到样式表，值为stylesheet。属性type表示样式表类型为CSS样式表。属性href指定CSS样式表文件的路径，可以使用相对路径或者绝对路径。
链接外部样式表是CSS使用中最频繁、最实用的方式，也是目前制作HTML页面最常用的一种方式。它最大的优势就是将页面结构HTML代码和样式文件CSS代码实现了完全的分离。同一个CSS文件可以被多个HTML文件链接，一个HTML文件也可以链接多个CSS文件。为了实现相同的样式风格，可以将同一个CSS文件链接到网站所有的页面中。如果需要修改样式，只需修改这一个CSS文件即可。这使得程序员在进行Web前端开发和后期的维护时都十分方便、有效。
（2）导入外部样式表
导入外部样式表是将外部样式表文件通过使用＠import导入内部样式表＜style＞与＜/style＞标签中，且放在内部样式表的开始部分。代码如下：
<head>
<meta charset="utf-8">
<title>径向渐变</title>
<style>
@ import"*.css";
...
</style>
</head>
导入外部样式表相当于将外部样式表导入内部样式表中，与链接外部样式表类似，同样实现了结构代码与CSS代码的分离。一个HTML文件中可以导入多个CSS文件，一个CSS文件同样可以被多个HTML页面导入。
（3）链接外部样式表与导入外部样式表的区别
链接外部样式表和导入外部样式表从本质上来说都实现了结构代码与样式代码的分离。但它们的语法和运作方式有所不同。
从语法上看，链接外部样式表采用的＜link＞标签将样式文件链接进了HTML文件。导入外部样式表采用的是＠import，将样式文件导入了HTML文件的内部样式表中。
从运作方式来看，链接外部样式表是HTML文件中的标签需要什么样的样式风格时才将外部样式表链接进HTML文件。导入外部样式表则是在HTML文件初始化时，即浏览器加载HTML文件时，就将外部样式表中所有的样式代码导入HTML文件的内部样式表中。导入方式相较于链接方式在浏览器加载页面时比较耗时，但显示效果没有任何差别。
在HTML文档中引用CSS文件不管采用哪种方式，最好是根据需求灵活处理。
3.1.2 CSS选择符
CSS选择符也叫CSS选择器，HTML页面中的样式都是通过CSS选择器来进行控制的。CSS选择器可以是HTML的结构标签、类、ID或者是标签的某种状态（如“a:hover”）。因此，可以把CSS选择器分为标签选择器、类选择器、ID选择器和伪类选择器。
1．标签选择器
标签选择器是使用HTML文档中的标签名作为选择符来定义样式规则。如下面的代码定义了部分标签的样式。
body, p, a, div, td, th{
font-size:12px;
color:#000000;
}
通过上面所列举的标签选择器的样式定义，只要页面中出现该标签的地方，就会显示出所定义的样式风格。要设置所有的标签，并不需要将HTML中所有的标签名写出来。CSS提供了通配符选择器“*”，它可以代表所有的标签，定义如下：
*{margin:0; padding:0; }
2．类选择器
使用标签选择器可以定义页面中所有标签的显示样式，但是如果要对同一种标签在同一个页面中的不同地方使用不同的样式，仅依靠标签选择器是实现不了的。这时就需要类选择器来达到目的。
HTML中的每一个标签都具有class属性，并给该标签定义一个类名，即class属性的属性值。这样相同的标签可以具有不同的类名。在设置样式时通过类名来定义不同的样式。
标签的类名作为CSS的类选择器时需要在类名前添加符号“.”，用以定义样式规则，代码格式如下：
.black{
font-size:12px;
color:#000000;
}
或者
p.black{
font-size:12px;
color:#000000;
}
前提是存在结构代码：
<p class="black">段落文字</p>
类选择器所定义的样式只呈现在具有该类名的标签的显示效果。如果标签中没有该类名，则该标签在页面上的显示效果不具有该类所定义的样式风格。某类选择器所定义的样式还可以应用到其他标签中。如上面定义的“.black”除应用到＜p＞标签中，还可以应用到＜a＞标签中，同样有效。但是上面代码中所定义的“p.black”则只能应用在定义了类名为“black”的＜p＞标签中，不能应用于其他的标签（如：＜a class＝＂black＂＞文字＜/a＞），该标签不具有类“black”所定义的样式效果。
3.ID选择器
ID选择器与类选择器类似，是标签中的id属性的属性值设置的名称作为选择器来定义样式规则。ID名作为选择器定义样式规则时需要在ID名前添加符号“#”，样式定义代码格式如下：
#black{
font-size:12px;
color:#000000;
}
或者
P#black{
font-size:12px;
color:#000000;
}
同样需要结构标签中定义id属性。
与类选择器所不同的是，一个网页文件中的标签只能使用一次ID名，如果其他的标签需要使用，则要另命名一个ID名称，即一个ID名称在一个页面文件中只能使用一次，不能重复使用。
类选择器与ID选择器的区别：类选择器可以在任意数量的标签中使用，而ID选择器在页面的标签中只能使用一次；类选择器的优先级比ID选择器的优先级低，即当ID选择器与类选择器发生冲突时，优先使用ID选择器定义的样式。
4．伪类选择器
伪类选择器所定义的样式规则并不作用在某个具体的标签上，而是作用在标签的状态上。伪类选择器有：:first-child、:focus、:lang、:link、:visitited、:hover、:active等。其中最常用的是超链接的伪类，即a:link、a:visitited、a:hover和a:active。它们的状态描述见表3-1。
表3-1 超链接的伪类
伪类选择器的应用减少了文档对于类和ID的定义，使得文档更简洁。CSS 3中还新增了一些结构伪类选择器，通过文档结构树来匹配HTML中特定的标签。CSS 3中新增的结构伪类选择器见表3-2。
表3-2 结构伪类选择器
伪类选择器在设置页面中某些特定样式时非常有用且高效，可以避免在页面结构中使用大量的类或ID来完成。如页面中的某一表格奇数行与偶数行的样式不一致时，采用伪类选择器就可以避免在结构代码中添加大量的类来完成。
3.1.3 文本样式
文本在HTML中很重要，可以说是网页的核心内容。默认情况下，文本是黑色的，字体大小根据浏览器不同而有所不同，一般情况下为16像素，字体以宋体或者微软雅黑为主。在网页中，文本的颜色、间距、行距、大小、字体等效果多种多样，必须根据设计需求进行排版，才能使页面看起来主次分明。文本样式包括字体属性和段落属性。
1．字体属性
虽说文本是网页中最主要的内容，如果排列得杂乱无章，会让人觉得枯燥乏味，但如果版式美观大方，并结合网页的其他元素合理进行样式设置，会让人眼前一亮，让人流连忘返，使网页内容给浏览者留下深刻的印象。字体属性及描述见表3-3。
表3-3 字体属性及描述
以上列出的这些属性都是字体样式设置中常用的属性。但这些属性都是将字体的各种样式分开进行设置的。CSS还提供了字体样式设置的复合属性font属性。font属性可以一次性设置多个属性值来定义字体样式，其格式如下：
{font:font-style font-variant font-weight font-size font-family}
字体复合属性font中属性值排列顺序为font-style、font-variant、font-weight、font-size和font-family，各属性值之间用空格隔开。如果font-family属性值有多个，则使用逗号“, ”分隔。属性font的属性值顺序是不可以随意调换的，但其中的属性值可以省略不写，但不可以前后调换顺序。值得注意的是，font-size和font-family这两个属性值不可省略，否则font属性所设置的样式规则可能会被忽略。
2．段落属性
段落的应用在网页中也是常见的，是文章的组成部分。段落的放置与显示直接影响到了页面的布局及风格。CSS提供了一些文本属性对段落文字进行控制，见表3-4。
表3-4 段落属性及描述
段落属性也是文本样式中的一部分，主要设置段落文字的样式。这些属性的应用主要完成段落文字的排版及显示效果，使整个网页看起来美观大方，能够吸引更多的访问者。
3.1.4 背景边框样式
打开网页，首先映入眼帘的便是该网页的颜色基调及样式风格。不同类型的网页有不同的设计风格。背景是网页样式风格中的一个重要因素。本节将介绍背景和边框的样式设置。
1．背景属性
很多网站主题都是以网页的背景为样式风格的。背景的设置可以提高网页的视觉性，吸引不少访问者。CSS样式表的强大表现功能对背景的样式设置提供了一些属性，见表3-5。
表3-5 背景属性及描述
（1）background-color属性
background-color属性设置页面的背景颜色。属性的值可以是英文的颜色名称、十六进制编码、RGB值、HSL值、HSLA值和GRBA值。background-color属性可以设置整个页面的背景颜色，也可以设置指定的某个HTML标签区域的背景颜色。
（2）background-image属性
background-image属性可以将图像设置为页面的背景图片。值得注意的是没有任何方法可以控制背景图片在背景设置中的宽度和高度，即背景图片有多大的尺寸，在背景区域中就可以显示多大的尺寸，如果背景区域大于背景图片的大小，背景图片则默认平铺背景区域；如果背景区域小于背景图片的大小，背景图片则舍弃一部分不显示，只显示背景区域提供的大小。因此，如果想要将背景图片在背景设置中控制预期的宽度和高度，则需要预先处理好该图片，通过其他图片处理工具预先将图片处理好。另外，背景图片是作为区域的背景显示的，因此不存在像在页面中插入图片那样的alt属性，当图片无法正常显示时，alt属性提供替换的文本描述。因此，背景图片不能用于传达任何没有在页面上使用文本描述的信息。
background-image属性和background-color属性可以同时设置在同一个HTML标签区域中，但显示的时候，背景图片会显示在背景颜色的上层，即背景图片会遮挡背景颜色的显示。
（3）background-repeat属性
background-repeat属性用于设置背景图片是否重复平铺。背景图片的重复平铺方式有两种：水平重复平铺和垂直重复平铺。background-repeat属性及描述如表3-6所示。
表3-6 background-repeat属性及描述
background-repeat属性重复平铺图片是从标签区域的左上角开始按水平方向和垂直方向重复铺满整个区域的。
（4）background-attachment属性
background-attachment属性用于设置背景图片的显示方式。当一个页面过大，而背景图片又不能完全覆盖整个区域的时候，浏览页面会出现看不到背景图片；或是开始时可以看见，但滚动页面就看不见背景图片的情况，即背景图片不能随页面的滚动而显示。background-attachment属性就是用来设置背景图片是否随页面滚动而显示的。background-attachment属性及描述如表3-7所示。
表3-7 background-attachment属性及描述
如果不设置background-attachment属性，背景图片固定在页面中的某个区域。这里要区分设置了background-attachment属性值为fixed时的情况。当background-attachment属性值为fixed时，背景图片固定的位置并不是相对于页面的，而是相对于页面在浏览器中的可见区域。而不设置该属性时，背景图片固定的位置是相对于页面的，而不是在浏览器的可见区域。
（5）background-position属性
background-position属性用于设置背景图片在页面中的具体位置。它的属性值可以是：绝对定义的位置、百分比定义的位置、垂直方向值和水平方向值。background-position属性及描述如表3-8所示。
表3-8 background-position属性及描述
background-position属性中背景图片的位置设置可以同时指定水平方向值和垂直方向值，两个属性值用空格隔开。水平方向值和垂直方向值除了可以用方向定位词（left、top、center、bottom和right）外，还可以用具体的距离数值（length）和百分比（percentage）。
（6）background复合属性
background属性是一个复合属性，可以一次性设置多个背景属性，即可以将background-color属性、background-image属性、background-repeat属性、background-attachment属性和background-position属性一起设置，中间用空格符号隔开。这些背景属性值可以按照任何顺序排列，不分先后。属性值的排列顺序不像是font复合属性值必须按照一定的顺序排列。
2．边框属性
所谓边框，就是将内容和间距包含在内的边线，类似于表格的外边线。边框可以从三个方面来描述：样式、线宽和颜色。边框属性及描述如表3-9所示。
表3-9 边框属性及描述
（1）border-style属性
border-style属性用来设置边框的样式风格，即边框线是采用实线、虚线或是点线以及双实线等。border-style属性及描述如表3-10所示。
表3-10 border-style属性及描述
一个边框还可以分为四个方向上的边框线，可以分别进行边框样式设置。通过border-top-style属性设置上边框线的样式；border-right-style属性设置右边框线的样式；border-bottom-style属性设置下边框线的样式；border-left-style属性设置左边框的样式。另外，这四个方向上的边框样式还可以同时设置，其语法格式如下：
border-style:dashed solid dotted double;
将四个边框样式设置在一个border-style属性中，中间用空格隔开。按照顺时针的方向分别定义上边框、右边框、下边框和左边框的样式。
（2）border-width属性
border-width属性用于设置边框的线宽，通常使用像素值来指定宽度。border-width属性的值不能使用百分比，除了使用具体的数值外，还可以使用thin、medium和thick这三种属性值。medium是默认值，thin比medium细，thick比medium粗，但显示的实际宽度还取决于所使用的浏览器。
border-width属性其实也是border-top-width、border-right-width、border-bottom-width和border-left-width的综合属性，分别设置上、右、下、左边框线的宽度。如果四个方向上的框线宽度都设置在一个border-width属性值中，则按顺时针的方向对上、右、下、左边框分别设置框线的宽度。
（3）border-color属性
border-color属性用于设置边框的颜色。在没有设置边框样式的情况下，默认的边框颜色基于页面元素的color值。同border-style和border-width属性一样，border-color属性可以为边框设置一种颜色，也可以同时设置四个边框的颜色，按顺时针方向分别设置上、右、下、左边框的颜色。也可以单独设置某一边上的边框。border-top-color属性用于设置上边框颜色；border-bottom-color属性用于设置下边框颜色；border-left-color属性用于设置左边框颜色；border-right-color属性用于设置右边框颜色。
（4）border复合属性
border属性是一个复合属性，集合了上面所介绍的三种属性。其格式如下：
border:border-style border-width border-color;
border属性将边框框线样式、框线宽度、框线颜色集合在一起进行设置，属性值之间用空格隔开。三个属性值的顺序可以自由调换。
3.1.5 列表样式
CSS提供了用于控制列表样式的属性，如表3-11所示。
表3-11 列表属性及描述
1.list-style-type属性
list-style-type属性用于设置列表项目符号或编号的样式。对于无序列表的项目符号样式设置的属性值说明如表3-12所示。
表3-12 无序列表的list-style-type属性
无序列表使用的是项目符号，有序列表使用的是编号。list-style-type属性对于有序列表的编号样式设置的属性值的说明如表3-13所示。
表3-13 有序列表的list-style-type属性
list-style-type属性可以用于无序列表＜ul＞标签，也可以用于有序列表＜ol＞标签，还可以用于列表项＜li＞标签。
2.list-style-position属性
list-style-position属性用于设置列表项目符号或编号的位置显示。该属性具有两个属性值：inside和outside，如表3-14所示。
表3-14 list-style-position属性及描述
【例3-1】 list-style-position属性的两个属性值的对比。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list-style-position属性</title>
<style>
ul{list-style-position:inside; }
ol{list-style-position:outside; }
</style>
</head>
<body>
<ul>
<li>list-style-position属性值为inside时，项目符号或编号在文本区域内左侧（缩进
的）。</li>
</ul>
<ol>
<li>list-style-position属性值为outside时，项目符号或编号在文本区域外左侧（默
认值）。</li>
</ol>
</body>
</html>
程序的运行结果如图3-1所示。
图3-1 list-style-position的两个属性值的对比显示效果
由此可见，list-style-position属性所定义的列表文字都是缩进的，当属性值为inside时，项目符号或编号所在的位置在列表文本区域内；当属性值为outside时，项目符号或编号所在的位置在列表文本区域外。
3.list-style-image属性
list-style-image属性是指定一张图片作为列表的项目符号或编号。属性值是图片的源路径，即用url（）方法引入使用图片的路径。如果使用的是嵌套的列表，该属性将继承父元素的list-style-image属性。如果不想继承该属性，则将该属性值设置为none即可。
4.list-style属性
list-style属性是列表的复合属性，可以一次性地设置列表项目符号或编号的样式类型及位置，属性值之间用空格隔开。属性值无先后顺序，可以自由调换。
3.1.6 其他样式
还有几个常用的样式属性：cursor属性、display属性、visibility属性、overflow属性和opacity属性。下面分别进行介绍。
1.cursor属性
cursor属性是一种鼠标属性，可以指定鼠标光标的显示类型。cursor属性及描述如表3-15所示。
表3-15 cursor属性及描述
其中用得最多的就是pointer属性值，通常把一些不是手指形光标设置为可以指示链接的手指形光标指针，提示用户该处可以进行点击操作。
2.display属性
display属性是一种显示属性，可以定义元素的显示类型。display属性及描述如表3-16所示。
表3-16 display属性及描述
属性值block是以块级元素的方式显示，inline是以内联元素的方式显示，none是不显示，inline-block则是鉴于行内元素和块级元素之间的一种显示效果。
什么是块级元素？什么是行内元素？
所谓块级元素，就是这类元素应用在HTML页面中，显示效果会成为独立的一行，元素前后自带换行符。设置该元素的宽度width属性、高度height属性以及内外边距属性是有效的，能够显示出设置尺寸大小的元素区域。
所谓行内元素，又称内联元素，这类元素应用在HTML页面中，显示效果是紧跟着前面元素的后面显示，不会换行。设置该元素的宽度width属性、高度height属性以及内外边距属性是无效的，只能显示元素内容自身所占的区域尺寸大小，不会显示出设置尺寸的区域。
display属性可以将块级元素和行内元素进行相互转换，即将块级元素display属性值设置为inline，则该元素转换成了行内元素，具有行内元素的特性；将行内元素display属性值设置为block，则该元素转换成了块级元素，具有块级元素的特性。
行内元素是无法定义宽高尺寸。对行内元素设置高度、宽度、内外边距等属性都是无效的，它的宽度、高度都是由内容本身决定的。当将一个内联元素（如标签＜a＞）改为块元素后，该元素具有块级元素的特性，会单独占据一行，其他跟在它的后面的元素会被迫换行，转到下一行，也可以通过设置高度、宽度、内外边距等属性来调整这个元素区域的尺寸大小。
对于display属性值设置为inline-block的元素，自身的显示效果是块级元素，即设置宽度、高度及内外边距有效，相对于前后周围的元素来说它却是行内元素，具有行内元素的显示效果，即该元素前后不会换行，紧挨着前面元素内容的后面显示该元素的内容。
display属性可以设置元素是否显示出来。属性值设置为none则不显示元素，属性值设置为block则将元素显示出来并具有块级元素的特性。
3.visibility属性
visibility属性设置元素是否可见。visibility属性及描述如表3-17所示。
表3-17 visibility属性及描述
当将visibility属性的值设置为visible时，元素在浏览器中正常显示；当将visibility属性的值设置为hidden时，元素在浏览器中隐藏内容，但是该元素不影响页面的布局，即这时看不见元素中的内容，但在浏览器的显示位置会看到元素所占用的空白区域。也就是说visibility属性设置为hidden的元素虽然在页面中不显示出来，但它会占据一定的位置区域，不会影响页面的布局及其他元素内容的显示。
这里要注意区分display属性设置隐藏的显示效果。当display属性的值设置为none时，该元素被完全隐藏，不占据页面空间。该元素所在页面中的位置会被后面的元素内容填补占据。而visibility属性设置为hidden时，虽然看不见内容，却可以看见该内容在页面中所占据的空间位置，其他元素内容不会来填补该区域。
4.overflow属性
overflow属性规定当内容溢出时发生的事情。overflow属性及描述如表3-18所示。
表3-18 overflow属性及描述
扩展用法：overflow-x属性值和overflow-y属性值可以根据水平方向和垂直方向单独规定溢出元素的显示方式。
5.opacity属性
opacity属性是用来设置透明度的。当我们需要对某些元素表现为半透明效果时，需要使用opacity属性。语法如下：
opacity:0.5;
opacity属性值的取值范围为0～1,1表示不透明，0表示完全透明。高版本浏览器对opacity已经有了很好的支持。