补充样式和属性

本文主要对CSS3中的一些内容比较少，但也非常重要的样式和属性进行简要介绍。

主要内容如下：

掌握css3中与颜色相关的样式，掌握alpha通道的使用方法，掌握css3中新增的rgba颜色、hsl颜色与hsla颜色的概念盒使用方法
掌握opacity属性的含义盒使用方法，了解使用alpha来指定透明度与使用opacity属性来指定透明度这两者之间的区别，掌握transparent颜色值的含义及其使用方法
掌握outline属性的含义及其使用方法，能够使用outline属性在元素周围绘制一条轮廓线并指定该轮廓线的线宽、颜色、线的样式，以及线与边框的位移距离
掌握resize属性的含义及其使用方法，能够使用resize属性来定义一个允许用户自己调节尺寸的元素
掌握initial属性值的含义及其使用方法，能够使用initial属性来取消对元素的样式设定

一、颜色相关样式

在css3之前，在样式中指定的颜色值只能为rgb颜色值，并且只能通过opacity属性来设置元素的透明度。css3中增加了3种颜色中——rgba颜色值、hsl颜色值及hsla颜色值，并且允许通过对rgba颜色值和hsla颜色值设定alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。

1. 利用alpha通道设定颜色

1) 对rgb颜色设定alpha通道

在css3中，可以通过对rgb颜色设定alpha通道的方法来定义rgba颜色。所谓rgba颜色，是指利用红色值（R）、绿色值（G）、蓝色值（B）、alpha通道值（A）来定义的颜色。其中，alpha通道值的范围是0-1.0，0表示完全透明，1表示不透明。

1	background-color: rgba(255, 0, 0, 0.5);

2) 对hsl颜色设定alpha通道

在css3中，除了可以使用rgb颜色外，还可以使用hsl颜色。hsl颜色使用色调（H）、饱和度（S）、亮度（L）来定义颜色。其中，色调值中用0或360表示红色，120表示绿色，240表示蓝色，当取值大于360时，实际的值等于该值除以360之后的余数。例如，如果色调值为480，则实际的颜色值为480除以360之后的余数，等于120。饱和度盒亮度的取值范围均为0%-100%。可以通过对hsl颜色设定alpha通道的方法来定义hsla颜色。

1	background-color: hsla(120, 100%, 50%, 0.5);

2. alpha和opacity的区别

在css3中，除了使用alpha通道的方法来设定透明度外，也可以通过opacity属性来设定透明度。

opacity属性是css中专门用来指定透明度的一个属性，取值范围也在0-1之间，0表示完全透明，1表示不透明。使用alpha通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色等来指定透明度，而opacity属性只能指定整个元素的透明度。

下方示例中有4个div元素，其背景色均为绿色，其中第1个div元素不指定透明度，第2个div元素使用alpha通道指定背景色的透明度为0.5，第3个div元素使用alpha通道指定背景色与文字颜色的透明度均为0.5，第4个div元素使用opacity属性指定元素的透明度为0.5

div {
    width: 100%;
    height: 100px;
    color: white;
    font-size: 48px;
}

div#div1 {
    background-color: rgb(0, 255, 100);
    color: rgb(255, 255, 255);
}

div#div2 {
    background-color: rgba(0, 255, 100, 0.5);
    color: rbg(255, 255, 255);
}

div#div3 {
    background-color: rgba(0, 255, 100, 0.5);
    color: rgba(255, 255, 255, 0.5);
}

div#div4 {
    background-color: rbg(0, 255, 100);
    color: rgb(255, 255, 255);
    opacity: 0.5;
}

<div id="div1">aaaaaa</div>
<div id="div2">bbbbbb</div>
<div id="div3">cccccc</div>
<div id="div4">dddddd</div>

示例代码中我们可以看出，对第2个div元素的背景色使用alpha通道时，并不会对文字产生影响，如果要让该元素的文字颜色也变成半透明，需要像第3个div元素那样同时对背景色和文字颜色使用alpha通道。但是，在第4个div元素的样式代码中，因为使用一次opacity属性，文字颜色和背景色都变成半透明的了。

3. 指定颜色值为transparent

如果将颜色值指定为transparent，则会将背景、文字或边框等的颜色设定为完全透明，相当于使用了值为0的alpha通道。

二、用户界面相关样式

1. outline属性

css3中定义了一个outline属性，用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。例如，可以在原本没有边框的radio单选框外围加上一条轮廓线，使其在页面上显得更加突出，也可以在一组radio单选框中只对某个单选框加上轮廓线，使其区别于别的单选框。

1	outline: outline-color outline-style outline-width

outline-color参数表示轮廓线的颜色，属性值为css中定义的颜色值
outline-style参数表示轮廓线的样式，属性值为css中定义的线的样式
outline-width参数表示轮廓线的宽度，属性值可以为一个宽度值

outline属性的三个参数的顺序可以呼唤，也可以分开书写成三个属性

input {
    outline-color: red;
    outline-style: solid;
    outline-width: thin;
}

2. out-offset属性

在默认情况下，对带有边框的元素来说，使用outline属性将紧贴着边框外围绘制一条轮廓线。有时，我们不想让这条轮廓线紧贴着边框外围，想让轮廓线稍微向外偏离几个像素，以绘制出双层边框的效果。针对这种情况，css3新增了一个outline-offset属性，可以使用该属性实现这个效果。

div {
    border: blue solid thin;
    outline: red solid thin;
    outline-offset: 2px;
}

可以给outline-offset属性指定一个为负数的属性值，指定为负数的属性值后，轮廓线将向内偏移，绘制在边框内部。

3. resize属性

为了增强用户体验，css3增加了很多新的属性，其中一个重要的属性就是resize，它允许用户通过拖动的方式来修改元素的尺寸，到目前为止，主要用于可以使用overflow属性的任何容器元素中。

div {
    background-color: pink;
    overflow: auto;
    resize: both;
    width: 150px;
    height: 150px;
}

resize属性的值分为以下几种：

none：用户不能修改元素尺寸
both：用户可以修改元素的宽度和高度
horizontal：用户可以修改元素的宽度，但不能修改元素的高度
vertical：用户可以修改元素的高度，但不能修改元素的宽度
inherit：继承父元素的resize属性值

4. initial属性值

要取消对元素的样式指定，可以通过几种方法来达到这个目的，其中最简单的方法时直接在样式表中删除设定该样式的代码。但是，在大多数情况下，一个样式写好了以后会对很多页面中的元素指定这个样式。所以，如果对单个元素取消其样式的指定时，这种做法是不可取的。

第二种方法是目前采用的使用class的方法，要取消对单个元素的样式指定，只要把这个元素的class属性取消掉就可以了，但是class属性本身是一个多余的、没有任何语义的属性。同时，如果多个元素使用同一个样式，还必须为每一个元素增加同样的class属性；如果要删除一个样式，还要逐个删除这些元素的class属性，所以很不实用。css3中已经不推荐使用它，取而代之的是将样式与元素或元素id直接绑定的做法。所以，第二种方法在下一代Web平台中使用的机会也会越来越少，直到最终随着class属性一起被废弃掉。

针对这种情况，css3中新增了一个initial属性值，使用这个initail属性值可以直接取消对某个元素的样式指定。

div {
    color: green;
    width: 200px;
    height: 200px;
}

#div1 {
    color: initial;
}

1
2
3

<div id="div1">aaaaaaa</div>
<div id="div2">bbbbbbb</div>
<div id="div3">ccccccc</div>

initial属性值的作用是让各种属性使用默认值，在浏览器中文字的颜色默认值是黑色，所以id为“div1”的元素中的文字会变成黑色。

使用initial属性值的特例

个别情况下，对元素使用initial属性值后的显示结果并不等于该元素的样式设定直接删除后的结果。在浏览器中，为了使一些元素变得更容易阅读，浏览器可以自行对该元素使用一些样式，例如

h1 {
    font-size: 2em;
    font-weight: bold;
}

可以在样式中对h1元素重新定义，例如对h1元素定义如下样式

h1 {
    font-size: 3em;
    font-weight: normal;
}

接着，在这段样式后面追加一段h1元素使用的样式，对上面文字的字号和字体粗细均使用initial属性值，追加后的样式如下

h1 {
    font-size: 3em;
    font-weight: normal;
}

h1 {
    font-size: initial;
    font-weight: initial;
}

修改后我们会发现，h1元素在浏览器中的显示结果与最初不设定时并不相同。

为什么在h1元素的样式代码中追加了initial属性值后的显示结果与不使用任何样式设定时的显示结果会不一样呢？因为追加了initial属性值的样式设定后，h1元素的字号和字体粗细均使用css中对子号和字体粗细属性设定的默认值，并不考虑浏览器对h1元素追加了什么样式。而在css中，字号的默认值为medium，字体粗细的默认值是normal，与浏览器对h1元素使用的样式并不一致，如果想要让h1元素的字号和字体粗细的默认值使用浏览器的默认值，还是不要在追加的样式代码中使用initial属性值，而是使用浏览器追加的默认样式中的属性值。在http://www.w3.org/TR/CSS 21/sample.html中可以查到浏览器对HTML4中元素所做的追加样式清单，目前各主流浏览器均遵照这个清单来对元素追加默认样式。

参考文献

《HTML5与CSS3权威指南》

张啸

CSS3(10) 补充样式和属性