《HTML教程》-第2章 CSS3基础

现代网页设计中，讲究“内容、样式和动作”相分离，其中的样式部分即由CSS进行控制。将网页样式分离到CSS中，可大大提高网页的可维护性和可修改性。CSS是制作网页的重要基础，本章我们将介绍有关CSS的有关知识。随着HTML5的发展，CSS也进入了CSS3时代。2.1CSS的概念

CSS称为层叠样式表，即CascadingStyleSheet的简称。用于指定HTML网页中的一个元素或一组元素的显示样式，如颜色、位置和大小等。在HTML中引入CSS的意义在于实现内容和样式的分离，HTML文档只包含当前网页要显示的内容，而CSS文档则包含这些内容的显示样式。独立的CSS文档可显著提高工作效率，使得样式的修改和扩充变得容易。现在主流的CSS版本是CSS3。CSS3是在CSS2的基础上增加了一些新特性，如圆角、动画、动态字体等，可以使我们的网页更酷更炫，但浏览器对CSS3的支持并不完全相同，各浏览器之间存在一定的差异，这一点需要特别注意。那么CSS是何应用到HTML网页的呢？或者说，HTML网页是如何使用CSS的呢？下面我们来回答这个问题。HTML应用CSS有3种方式，分别是行内样式表、内联样式表和外部样式表。2.1.1行内样式表行内样式表也称为内联样式表，就是通过HTML元素的style属性指定元素样式的方式，如下所示。<pstyle=”border:1pxsolidgreen;”>这是行内样式</p>样式属性也可以有多个，如下所示：<pstyle=”border:1pxsolidgreen;color:gray;”>这是行内样式</p>根据“内容、样式和动作相分离”的原则，不推荐使用这种样式表。2.1.2内部样式表

内联样式表就是通过HTML的style标记，在网页中编写CSS样式表的方式，格式如下：<styletype="text/css">

/*CSS的内部样式表*/</style>type属性指定style标记的MIME类型，表示其中是CSS样式表。同样，根据“内容、样式和动作相分离”的原则，也不推荐使用这种样式。因为样式和网页内容仍然在同一文件中，如果修改网页的样式，仍然要修改每个网页文件，这种做法是不可取的。但在本章的例子中，为了使读者看清楚CSS样式和它选择元素的对应关系，主要使用这种CSS样式表，但要记住，这样做是不符合设计原则的。2.1.3外部样式表外部样式表是指通过HTML的link标记，指定网页要使用的CSS文件，将文件中的样式应用于当前网页的方式，格式如下：<linkrel="stylesheet"type="text/css"href="mystyle.css"/>或者<styletype="text/css"><!--@importurl(mystyle.css);--></style>其中，rel属性规定当前文与被连接文档（即css文件）之间的关系；stylesheet表示被连接文档是当前网页的样式表；需要说明的是目前只有stylesheet这个值得到了所有浏览器的支持；type规定被连接文档的MIME类型；href属性指定被连接文档的位置。在实际应用中必须注意被连接文档的路径要正确，否则无法应用样式。第二种方式是通过@import指令引入外部的CSS文件，功能与第一种相同。还有需要说明的就是，HTML5不支持charset属性、rev属性和target属性，这些属性在实际应用中最好不要写入link标记。这么多类型的样式表，如果共同出现在同一网页中，到底应该采用哪一个呢？这就是CSS样式优先级问题，我们将在2.3节讨论这一话题。2.2CSS单位和颜色

2.2.1CSS单位

为了描述网页元素的颜色、大小和位置，离不开单位和颜色。CSS主要单位如表2-1所示。表2-1CSS主要单位单位意义单位意义%百分比ex一个ex是一个字体的x-height，x-height通常是字体尺寸的一半。in英寸pt磅(1pt=1/72英寸)cm厘米pc12点活字(1pc等于12点)为单位mm毫米px像素(计算机屏幕上的一个点)em以当前字体大小为单位。

以上单位需要说明的是：◆%是相对于父容器来说的，占父容器的百分之几。◆em以当前字体的大小为单位，不是一个固定的值。如果某个元素的大小是12pt的话，那1em就是12pt，2em就是24pt。◆ex类似于em，和当前字体大小有关，约为当前字体大小的一半，也不是一个固定的值。◆px以一个像素大小为单位，以px为单位的话，元素的大小会随着分辨率的增大而减小，也就是说，px的大小与设备的分辨率是相关的。其他的单位意义比较明确，不再赘述。2.2.2颜色

在CSS中可以用以下几种方式描述颜色：十六进制色。RGB颜色。RGBA颜色。HSL颜色。HSLA颜色。预定义/跨浏览器颜色名。这里只介绍前面的三种颜色表示方法。其实十六进制颜色就是RGB颜色，只不过表示方法不同。RGB颜色表示法如表2-2所示。表2-2CSS的RGB颜色表示法颜色意义颜色名用英语单词指定颜色。CSS定义了147种颜色名字。rgb(x,x,x)r：红色；g绿色；b蓝色。每个x表示0~255之间的一个数值。rgb(x%,x%,x%)同上。只不过这里用3个百分数表示红绿蓝三基色的比例。#rrggbb十六进制数(比如#ff0000)，前两位表示红色，中间两位表示绿色，最后两位表示蓝色。如果