2.3 CSS应用技巧
2.3.1 如何插入样式表
要想在浏览器中显示出预期的CSS样式表效果，就要让浏览器能够识别并正确调用CSS。当浏览器读取样式表时，要依照文本格式来读，在页面中插入CSS样式表的方法有以下3种：链入外部样式表、内部样式表和内嵌样式。
1.内部样式表
内部样式表是把样式表放到页面的＜head＞区里，这些定义的样式就应用到页面中了，样式表是用＜style＞标记插入的，从下例可以看出＜style＞标记的用法。
【例2-5】制作使用了CSS中的内部样式表。
注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，常用加HTML注释的方式（＜！--注释--＞）隐藏内容而不让它显示。
【例2-6】制作使用了注释的方式来隐藏内容。
2.链入外部样式表
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用＜link＞标记链接到这个样式表文件，这个＜link＞标记必须放到页面的＜head＞区内，如下所示：
＜head＞
＜link href="style1.css"rel="stylesheet"type="text/css"media="all"＞
＜/head＞
上面这个例子表示浏览器从style1.css文件中以文档格式读出定义的样式表。rel="stylesheet"是指在页面中使用这个外部的样式表。type="text/css"是指文件的类型是样式表文本。href="style1.css"是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕、纸张、语音合成设备、盲文阅读设备等。
一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也避免了重复下载代码。
样式表文件可以用记事本打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，style1.css这个文件的内容如下所示：
3.内嵌样式
内嵌样式是混合在HTML标记里使用的，用这种方法可以很简单地对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值，如下例展示如何改变段落的颜色为蓝色和左外边距为45。
【例2-7】制作使用CSS中的内嵌样式：
＜html＞
＜head＞
＜meta charset="gb2312"＞
＜title＞重庆航天职业技术学院＜/title＞
＜/head＞
＜body＞
＜p style="color：blue；margin-left：45px；"＞
航天欢迎你！
＜/p＞
＜/body＞
＜/html＞
2.3.2 网页元素的颜色
网页中颜色的运用是网页必不可少的一个元素。使用颜色的目的在于有区别、有动感（特别是超链接中运用）、美观，同时颜色也是各种各样网页的样式表现元素之一。
颜色是由红（RED）、绿（GREEN）、蓝（BLUE）光线的显示结合。CSS中定义颜色使用十六进制（hex）表示法为红、绿、蓝的颜色值结合。
CSS可以处理16777216种颜色（256×256×256），可以使用名字、RGB值或十六进制代码。
例如蓝色：blue=rgb（0，0，255）=rgb（0%，0%，100%）=#0000ff=#00f
CSS拥有16种合法的预定义颜色名字。它们是aqua（水绿）、black（黑）、blue（蓝）、fuchsia（紫红）、gray（灰）、green（绿）、lime（浅绿）、maroon（褐）、navy（深蓝）、olive（橄榄）、purple（紫）、red（红）、silver（银）、teal（深青）、white（白）和yellow（黄），并且transparent（透明）也是一个合法值。
在RGB的从0至255的3个值中，0是最低阶的（如没有红色），255是最高阶（如全是红色），这些值也可以是百分比。十六进制3个或6个数字长度前面带上#字符，3个长度是6个的压缩形式，比如#f00是ff0000的压缩，#c96是#cc9966的压缩。三位数很好理解，像RGB，第一个是红色，第二个是绿色，第三个蓝色。但六位数给予更多的颜色控制。
颜色可以使用color和background-color。color用于文字颜色设置，background-color用于文字颜色背景设置。
【例2-8】制作实现了样式表中颜色变化效果，在浏览器中显示如图2-6所示。
图2-6 color与background-color的效果图
代码如下：
该例中h1的文字部分变成黄色，文字背景变成蓝色，color和back ground-color可以使用在绝大部分HTML元素中。
文本样式设计
2.3.3 文本样式设计
CSS文本样式是相对于内容进行的样式修饰。由于在层次关系中，内容是在背景以上的，所以文本样式相对而言更加重要。文本和字体样式之间是不同的，简单地讲，文本是内容，而字体则用于显示这个内容。
CSS中常见的有以下6种文本样式：首行缩进（text-index）、水平对齐（text-align）、字间隔（word-spacing）、字母间隔（letter-spacing）、文本转换（text-transform）、文本修饰（text-decoration）。
1.首行缩进（text-index）
首行缩进是将段落的第一行缩进，这是常用的文本格式化效果，就像中文写作时开头空两格一样。text-index主要有以下取值。
1）length：定义固定的缩进。
2）%：定义基于父元素的百分比缩进。
3）inherit：定义从父元素继承该属性。
【例2-9】制作文本中的首行缩进，在浏览器中实现如图2-7所示。
图2-7 首行缩进效果
代码如下：
在这段代码中text-indent：30px；声明了p这段文字首行缩进30px。
2.文本的对齐方式（text-align）
文本排列属性是用来设置文本的水平对齐方式。文本对齐方式有以下几种。
1）left：左对齐。
2）center：居中对齐。
3）right：右对齐。
4）justify：两端对齐。
在默认状态下对齐方式为left。
【例2-10】制作CSS中的文本对齐方式，在浏览器中显示如图2-8所示。
图2-8 对齐方式效果图
代码如下：
在这段代码中text-align：center声明h1这段文字居中，text-align：right声明了类为date的这段文字右对齐，ext-align：justify声明类为main的这段文字为两端对齐，没有声明的默认左对齐。
3.文本修饰（text-decoration）
text-decoration属性用来设置或删除文本的装饰。text-decoration常见有以下值。
1）none：无。
2）underline：下画线。
3）overline：上画线。
4）line-through：中画线。
从设计的角度来看，text-decoration属性主要是用来删除链接的下画线。
【例2-11】制作CSS中的文本修饰text-decoration属性，在浏览器中显示如图2-9所示。
图2-9 文本修饰效果图
代码如下：
＜html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞重庆航天职业技术学院＜/title＞
＜style＞
h1{text-decoration：overline；}
h2{text-decoration：line-through；}
h3{text-decoration：underline；}
＜/style＞
＜/head＞
＜body＞
＜h1＞皮耶罗简介1＜/h1＞
＜h2＞皮耶罗简介2＜/h2＞
＜h3＞皮耶罗简介3＜/h3＞
＜h＞皮耶罗简介＜/h＞
＜/body＞
＜/html＞
在这段代码中，text-decoration：overline声明h1这段文字有上画线，text-decoration：line-through声明h2的这段文字有中画线，text-decoration：underline声明h3的这段文字有下画线，没有声明的默认没有线。
4.文本转换（text-transform）
文本转换属性是用来指定在一个文本中的大写和小写字母，可用于所有字句变成大写或小写字母，或每个单词的首字母大写。text-transform常见有以下值。
1）uppercase：全大写。
2）lowercase：全小写。
3）capitalize：首字母大写。
【例2-12】制作CSS中文本转换text-transform属性，在浏览器中显示如图2-10所示。
图2-10 文本转换效果图
代码如下：
＜html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞重庆航天职业技术学院＜/title＞
＜style＞
p.uppercase{text-transform：uppercase；}
p.lowercase{text-transform：lowercase；}
p.capitalize{text-transform：capitalize；}
＜/style＞
＜/head＞
＜body＞
＜p class="uppercase"＞alessandro delPiero＜/p＞
＜p class="lowercase"＞alessandro delPiero＜/p＞
＜p class="capitalize"＞alessandro delPiero＜/p＞
＜/body＞
＜/html＞
在这段代码中，text-transform：uppercase声明类uppercase这段字母全部为大写，text-transform：lowercase声明类lowercase这段字母全部为小写，text-transform：capitalize声明类capitalize的这段字母首字母大写。
5.字母间隔（letter-spacing）
字母间隔是指字符间距，字母间隔（letter-spacing）常见有以下值。
1）length：定义字符间的固定空间。
2）normal：默认值。
3）inherit：定义从父元素继承属性值。
【例2-13】制作CSS中的字母间隔letter-spacing属性，在浏览器中显示如图2-11所示。
图2-11 字母间隔效果图
代码如下：
＜html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞重庆航天职业技术学院＜/title＞
＜style＞
h1{letter-spacing：5px；}
h2{letter-spacing：-3px；}
＜/style＞
＜/head＞
＜body＞
＜h1＞alessandro del Piero1＜/h1＞
＜h2＞alessandro del Piero2＜/h2＞
＜h＞alessandro del Piero＜/h1＞
＜/body＞
＜/html＞
在这段代码中，letter-spacing：5px声明h1这段文字字间距为5px，letter-spacing：-3px声明h2这段文字字间距为默认值的-3px。
6.字间隔（word-spacing）
字间隔是指单词间距，用来设置文字或单词之间的间距。实际上，“字”表示的是任何非空白符字符组成的串，并由某种空白符包围。word-spacing常见有以下值。
1）length：定义单词间的标准空间。
2）normal：默认值。
3）inherit：定义从父元素继承属性值。
【例2-14】制作CSS中字间隔word-spacing属性，在浏览器中显示如图2-12所示。
图2-12 字间隔效果图
代码如下：
＜html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞重庆航天职业技术学院＜/title＞
＜style＞
h1{word-spacing：30px；}
＜/style＞
＜/head＞
＜body＞
＜h1＞alessandro del Piero1＜/h1＞
＜h2＞alessandro del Piero2＜/h2＞
＜/body＞
＜/html＞
在这段代码中，word-spacing：30px声明h1这段文字单词间距为30px，没声明则为默认间距。
2.3.4 网页元素的显示
使用display或者visibility属性可以用来设置元素的显示状态。display属性更改元素的渲染方式，即设置一个元素应如何显示；visibility属性指定一个元素应可见还是隐藏。隐藏一个元素可以通过把visibility属性设置为“hidden”，或把display属性设置为“none”。具体设置如下。
1）display：block表示将元素渲染为块级元素。
2）display：list-item表示将元素渲染为列表项目。
3）visibility：hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
【例2-15】制作CSS中的visibility：hidden属性，在浏览器中显示如图2-13所示。
图2-13 使用visibility效果图
代码如下：
＜html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞重庆航天职业技术学院＜/title＞
＜style＞
h1.hidden{visibility：hidden；}
＜/style＞
＜/head＞
＜body＞
＜h1＞你可以看见我！＜/h1＞
＜h1 class="hidden"＞你看不见我！＜/h1＞
＜p＞我是标签～＜/p＞
＜/body＞
＜/html＞
如图2-13所示，在“你可以看见我！”和“我是标签～”这两个标题之间明显有空白区域。此空白区域就是hidden属性隐藏文字的结果。
4）display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
【例2-16】制作CSS中的display：none属性，在浏览器中显示如图2-14所示。
图2-14 使用display效果图
代码如下：
＜html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞重庆航天职业技术学院＜/title＞
＜style＞
h1.hidden{display：none；}
＜/style＞
＜/head＞
＜body＞
＜h1＞你可以看见我！＜/h1＞
＜h1 class="hidden"＞你看不见我！＜/h1＞
＜p＞我是标签～＜/p＞
＜/body＞
＜/html＞
如图2-14所示，在“你可以看见我！”和“我是标签～”这两个标题之间是没有空白区域的，此区域是none属性带来的结果。
2.3.5 链接样式的设计
使用CSS可以设置网页中超链接的各种属性，如颜色、字体、背景等。不同的链接，可以有不同的样式，这通常用伪类来表示。链接状态有如下4种常见的伪类形式。
●a：link：正常，未访问过的链接。
●a：visited：用户已访问过的链接。
●a：hover：当用户鼠标放在链接上时。
●a：active：链接被单击的那一刻。
【例2-17】制作CSS中的超链接伪类属性，在浏览器中显示如图2-15～图2-17所示：
图2-15 未访问链接的颜色
图2-16 鼠标移上去的颜色
图2-17 鼠标点击的颜色
代码如下：
＜html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞重庆航天职业技术学院＜/title＞
＜style＞
a：link{color：blue；}
a：visited{color：red；}
a：hover{color：yellow；}
a：active{color：green；}
＜/style＞
＜/head＞
＜body＞
＜p＞＜b＞＜a href="img\1.jpg"target="_blank"＞点我！＜/a＞＜/b＞＜/p＞
＜/body＞
＜/html＞
这段代码中超链接设置为未访问链接显示为蓝色，已访问链接显示为红色，鼠标移动到链接上显示为黄色，鼠标单击时显示为绿色。注意：链接状态先后顺序如下，a：link、a：visited最前面，a：hover其次，a：active最后，只有顺序正确才可以看到效果。
2.3.6 字体的设置
在CSS中的字体，实际上是一组用于创建常规、粗体、斜体及大小写字母效果的字体属性。如果在CSS中设置了字体，那么浏览器会从字体族中选择一种最符合要求的字体。如果该字体不存在，那么操作系统会选择一种最接近要求的字体来代替。
CSS字体属性常见有如下8种，详情见表2-1。
表2-1 CSS字体属性
2.3.7 网页元素的边框与背景
1.CSS边框属性
CSS边框属性允许指定一个元素边框的样式和颜色。
（1）边框样式
边框样式属性指定要显示什么样的边界。采用border-style属性定义边框的样式，常见border-style值如下。
●none：默认无边框。
●dotted：dotted：定义一个点线框。
●dashed：定义一个虚线框。
●solid：定义实线边界。
●double：定义两个边界。两个边界的宽度和border-width的值相同。
●groove：定义3D沟槽边界。效果取决于边界的颜色值。
●ridge：定义3D脊边界。效果取决于边界的颜色值。
●inset：定义一个3D的嵌入边框。效果取决于边界的颜色值。
●outset：定义一个3D突出边框。效果取决于边界的颜色值。
【例2-18】制作网页中的边框效果，在浏览器中显示如图2-18所示。
图2-18 边框效果图
代码如下：
该例给border-style赋予不同的值，就会得到不同的效果图。
（2）边框宽度
边框通过border-width属性来指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如2px或0.1em（单位为px、pt、cm、em等），或者使用3个关键字之一，它们分别是thick、medium（默认值）和thin。在CSS中，系统并没有定义3个关键字的具体宽度，所以用户可以把thick、medium和thin分别设置为自己需要的宽度。
【例2-19】制作网页中的边框宽度，在浏览器中显示如图2-19所示。
图2-19 边框效果图
代码如下：
该例通过border-width属性来指定宽度，就会得到不同的效果图。
（3）边框颜色
通过border-color属性设置边框的颜色，可以设置的颜色有以下几种类型。
●name：指定颜色的名称，如“red”。
●RGB：指定RGB值，如“rgb（255，0，0）”。
●Hex：指定16进制值，如“#ff0000”。
除此之外，还可以设置边框的颜色为“transparent”（透明）。
但是border-color单独使用是不起作用的，必须先使用border-style来设置边框样式可以来设置边框颜色。
【例2-20】制作网页中边框颜色，在浏览器中显示如图2-20所示。
代码如下：
该例中使用border-color定义了边框颜色为蓝色。
图2-20 边框颜色效果图
2.CSS背景属性
CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果，CSS在这方面的能力远远在HTML之上。
（1）背景色
用户可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。
以下规则把元素的背景设置为蓝色：
p{background-color：blue；}
如果希望背景色从元素中的文本向外稍有延伸，只需增加一些内边距：
p{background-color：blue；padding：20px；}
（2）背景图像
要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个URL值：
body{background-image：url（'img/1.jpg'）；}
大多数背景都应用到body元素，不过并不仅限于此。下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower{background-image：url（'img/2.jpg'）；}
甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio{background-image：url（'img/3.jpg'）；}
（3）水平或垂直平铺
默认情况下，background-image属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺（repeat-x），页面背景会更好些。
【例2-21】制作网页中背景平铺效果，在浏览器中显示如图2-21所示。
图2-21 水平方向平铺效果图
代码如下：
该例中的图像只在水平方向平铺背景。
除此之外背景还有其他一些属性，如表2-2所示。
表2-2 背景属性
2.3.8 网页元素的定位
CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
定位通常有以下4种不同的方法。
1.static定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top、bottom、left、right影响。
2.fixed定位
fixed定位了元素的位置相对于浏览器窗口是固定位置。即使窗口滚动，它也不会跟窗口移动，如下例。
【例2-22】制作网页中的fixed定位效果，在浏览器中显示如图2-22所示。
代码如下：
从图中可以看见不管网页如何滚动，“意大利球星皮耶罗”这几个字始终在右上角。
图2-22 fixed定位效果图
3.relative定位
相对定位（relative）是相对元素默认位置的定位。比如默认标题位，默认正文位等。
【例2-23】制作网页中的relative定位效果，在浏览器中显示如图2-23所示。
图2-23 relative定位效果图
代码如下：
如图2-23所示，“意大利球星皮耶罗1”这几个字是默认的标题位，当使用了relative定位“意大利球星皮耶罗2”时就会发现，“意大利球星皮耶罗2”相对于“意大利球星皮耶罗”这几个字的位置向左移动了20px。
4.absolute定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于＜html＞。
【例2-24】制作网页中的absolute定位效果，在浏览器中显示如图2-24所示。
图2-24 absolute定位效果图
代码如下：
在该例中，不管把“意大利球星皮耶罗2”放在代码的任何位置，它都会出现在定位好了的位置上。
2.3.9 网页元素的浮动
CSS的float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列。float（浮动）往往是用于图像，但它在布局时一样非常有用。
1.元素的浮动
元素在水平方向浮动的时候，就代表着元素只能左右移动而不能上下移动。这个时候一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。
【例2-25】制作网页中浮动效果，在浏览器中显示如图2-25所示。
图2-25 元素右浮动效果图
代码如下：
该例中把图像设置为右浮动，文本流环绕在它左边。
2.彼此相邻的浮动元素
在网页中把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。对图片使用float属性，就会发现所有图片彼此相邻在一起。当网页页面变大或者变小时，图片也会跟到页面变化位置。
【例2-26】制作网页中的彼此相邻的浮动元素，在浏览器中显示如图2-26和图2-27所示。
图2-26 多图片浮动效果A
图2-27 多图片浮动效果B
2.3.10 CSS动画效果的实现
一些CSS属性是可以有动画效果的，这意味着它们可以用于动画和过渡。动画属性可以逐渐从一个值变化到另一个值，如尺寸大小、数量、百分比和颜色。如需在CSS中创建动画，首先要了解@keyframes规则。@keyframes规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
CSS动画
【例2-27】制作CSS中的动画效果，在浏览器中显示如图2-28和图2-29所示。
图2-28 变化前
图2-29 变化后
代码如下：
该例中背景颜色逐渐地从红色变化到蓝色。