【读书笔记】HTML5与CSS3权威指南

 

 第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；

转载于:https://www.cnblogs.com/61xing/archive/2012/12/21/2827569.html