css3其它样式

Media Queries

该模块允许添加媒体查询表达式用以指定媒体类型，并根据媒体类型选择应该使用的样式。

/* 窗口宽度在640px以上、999px以下 */
@media screen and (min-width: 640px) and (max-width: 999px) {
    /* 2栏显示 */
    #container{
        width: 640px;
    }
    #wrapper{
        width: 640px;
        float: none;
    }
    p{
        line-height: 400px;
    }
    #main{
        width: 420px;
        float: right;
    }
    #sub01{
        width: 200px;
        float: left;
    }
    #sub02{
        width: 100%;
        float: none;
        clear: both;
        line-height: 150px;
    }
}

颜色相关样式

css3增加了3种颜色值，RGBA,HSL,HSLA。
RGBA:是指对RGB颜色设定alpha通道值。0表示完全透明，1表示不透明。
background-color:rgba(255,0,0,0.5);

HSL：
色调（H），饱和度（s）,亮度（L）来定义颜色。0或360表示红色，120为绿色，240为蓝色.色调和饱和度的取值范围为0%到100%。HSLA就是加个alpha通道值。

div#div1{
        background-color: hsl(120,100%,50%); 
        color: hsl(0,100%,100%);
}
div#div2{
        background-color: hsla(120,100%,50%,0.5); 
        color: hsla(0,100%,100%,0.5); 
}

opacity与alpha通道的区别：

alpha可以单独针对元素的背景色和文字颜色等来指定透明度。而opacity只能指定整个元素的透明度。

指定颜色值为transparent则会将背景，文字或边框等的颜色值设定为完全透明。

用户界面相关样式

outline：在元素周围绘制一条轮廓线。
input#male{
outline:thin solid red
}
默认情况下对带有边框的元素来说，使用outline属性将紧贴着边框外围绘制轮廓。可使用如下属性偏离边框。
outline-offset:2px;

resize:允许用户通过拖动的方式来修改元素的尺寸。
none:
both:
horizontal:可修改元素宽度，不可修改高度。
vertical:
inherit:

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

initial属性：可以直接取消对某个元素的样式指定。

p{
    color:blue;
    font-family:宋体;
}
p#text01{
    color:initial;
    color:-moz-initial;
    font-family:宋体;
}