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:宋体;
}