第18章 CSS3中变形处理
1.旋转 transform:rotate(45deg) 使元素顺时针旋转45度,deg是CSS3的“Values and Units”模板中定义的一个角度单位;
2.缩放 scale(0.5) 表示缩小50%;scale(0.5,2)表示水平方向缩小50%;垂直方向放大1倍;
3.倾斜 skew(30deg,30deg) 表示水平方向上倾斜30度,垂直方向上倾斜30度;只有一个参数表示只水平方向倾斜;
4.移动 translate(50px,50px) 表示水平向右移动50个像素,向下移动50个像素,注意方向;
为了兼容个主流浏览器显示需:-webkit-表示兼容safari,chrome;
-moz-表示兼容FF;
-o-表示兼容Opera;
指定变形基准点:
一般移元素的中心点为基准点;
可通过transform-origin属性值修改;如:-webkit-transform-oright:left bottom;
第19章 CSS3中的动画功能
Transitions功能
transition:property duration timing-function
property 表示对哪个属性进行平滑过渡;
duration表示在多长时间内完成属性值的平滑过渡;
timing-function表示通过什么方法来进行平滑过渡;
如:
div{
background-color:#ff0;
-webkit-transition:background-color 1s linear;
-moz-transition:background-color 1s linear;
-o-transtion:background-color 1s linear;
}
div:hover{
background-color:#0ff;
}
多属性平滑过渡:
div{
background-color:#ff0;
-webkit-transition:background-color 1s linear,color 1s linear,width 1s linear;
width:300px;
}
div:hover{
background-color:#036;
color:#fff;
width:400px;
}
animations功能
div{background-color:red;}
@-webkit-keyframes mycolor{
0%{background-color:red;}
40%{background-color:darkblue;}
70%{background-color:yellow;}
100%{background-color:red}
}
div:hover{-webkit-animation-name:mycolor; -webkit-animation-duration:5s;-webkit-animation-timing-function:linear;}
可实现多属性值同时改变,样式类似;通过animation-iteration-count:infinite;设置动画播放次数,infinite表示动画不停播放;不用hover时表示页面载入动画立即执行;
实现动画的方法:
linear;ease-in;ease-out;ease;ease-in-out;
网页淡入效果:改变opacity的值;
20章 布局相关样式
注:浏览器兼容需加上前缀-moz-;-o-;-webkit-
1.多兰布局
通过使用column-count属性来使用多栏布局,需将元素的宽度column-width设置成多个栏目的总宽度。在FF中,需要的元素外面单独设立一个容器元素,宽度容器总宽度;
使用column-gap属性设置多栏直接的间隔距离;
使用column-rule属性在栏与栏之间增加一条间隔线;
2.盒布局
display:-moz-box使左右两栏或多栏中div元素的底部对齐;
盒布局与多栏布局区别:多栏布局时,各栏宽度必须是相等的,
3弹性盒布局
在div中加入box-flex属性则自动适应窗口,需前缀;
使用box-ordinal-group属性改变元素显示顺序;如果-webkit-box-ordinal-group3;-webkit-box-ordinal-group:1;-webkit-box-ordinal-group:2;
改变元素排列方向
-webkit-box-orient:vertical垂直方向排列;horizontal水平
对多个元素使用box-flex属性
;
指定水平方向与垂直方向的对齐方式;
使用box-pack和box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式;详细参数见书本p359;
第21章
根据浏览器的窗口大小来选择使用不同的样式
@media screen and (min-width:1000px){}
@media screen and (min-width:640px) and(max-width:999px){}
@media screen and (max-width:639px)
在IPhone中显示
<meta name="viewport" content="width=600px" />
@media 设备类型 and (设备特性){样式代码}详细参数见书本p369;
css3中支持外链css样式;
@import url(color.css) screen and (min-width:1000px);
<link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" href="style.css" />
第22章 css3的其他重要样式和属性
利用alpha通道来设定颜色
background-color:rgba(255,0,0,0.5); alpha通道值为0.5,表示半透明;
alpha通道与opacity属性的区别:
使用alpha通道对元素设定透明度时,可以单独针对元素的背景色和文字颜色等来指定透明度,而opacity属性只能指定整个元素的透明度。
transparent相当于使用了值为0的alpha通道。
用户界面相关样式
css2中的outline属性
outline:outline-colo outline-style outline-width
css3中新增的out-offset属性;
给该属性指定一个带像素单位的整数值表示向外偏离多少个像素outline-offset:2px;
resize属性 :用户可以通过拖动的方式来修改元素的尺寸;参数:none ;both;horizontal;vertical;inherit;
取消对元素的样式指定----initial属性值
在CSS3中已经不推荐使用class类,却而代之是将样式与元素或元素id直接绑定的做法(有点困惑,因为之前接触的知识是样式不要用id写)
color:initial;