移动开发PPT复习文档--CSS3

2.1属性选择器：

E[attr=value]{rules}	选择具有attr属性且属性值等于value的E元素
E[attr~=value]{rules}	选择具有attr属性且属性值为用空格分隔的多个字符列表，其中任一字符等于value的E元素，并应用rules指定的样式。这里的value不能包含空格
E[attr^=value]{rules}	选择以value开头的属性
E[attr$=value]{rules}	选择以value结尾的属性
E[attr*=value]{rules}	选择包含value子串的所有元素

2.2伪类选择器：

选择器	说明
E:enabled	用于指定所选择元素处于可用状态时应用的样式
E:disabled	用于指定所选择元素处于不可用状态时应用的样式
E:read-only	用于指定所选择元素处于只读状态时应用的样式
E:read-write	用于指定所选择元素处于非只读状态时应用的样式
E:checked	用于指定单选框元素或复选框元素处于选取状态时应用的样式
E:default	用于指定页面打开时默认处于选中状态的单选框元素或复选框元素应用的样式
E:indeterminate	用于设定页面打开时，如果一组单选框中任一单选框被选中时，整组单选框元素应用的样式
E:selection	用于指定所选择元素处于选中状态时应用的样式

2.3 序列选择器：

同级别：

first-child:选定同级别中的第一个

last-child:选定同级别中的最后一个

nth-child(n):选定同级别中的顺数第几个

nth-last-child(n):选定同级别中的倒数第几个

only-child:选中父元素中唯一的标签

3.1边框：

边框阴影：｛box-shadow：h-shadow v-shadow blur color insert/outset｝

圆角边框：｛border-radius：none/value｝

边框图片：｛border-image：url width repeat｝

3.2背景:

设置背景图片大小：{background-size:value1 value2}

指定背景图位置区域：{background-origin:value}

背景图裁剪：{background-clip:value}

3.3 文字效果：

文字阴影：{text-shadow:h-shadow v-shadow blur color}

英文换行：{word-wrap:keep-all/break/all;}

3.4 2D Transform:

位置移动：{translate(横坐标纵坐标);}

元素旋转：{rotate(度数);}

元素尺寸变化：{scale(x y);}

元素翻转：{skew(x y);}

3.5 3D效果：

rotateX():该方法是使元素围绕x轴以给定的度数进行旋转。

rotateY():该方法是使元素围绕y轴以给定的度数进行旋转。

3.6 过渡：

{transition:element time;}:该属性是使元素从一种样式逐渐变成另一种效果，需要规定的值有：对元素的哪一个属性进行改变以及改变的时间。注意：可以实现多个属性的同时改变。

3.7 渐变：

线性渐变：{background:linear-gradient(direction color1 color2...);}

重复线性渐变：{background:repeating-linear-gradient(direction, color1 value%,color2 value%,...);}

径向渐变：{background:radial-gradient(postition,shape,size, color1 value%,color2 value%,...);}

重复径向渐变：{background:repeating-radial-gradient(postition,shape,size, color1 value%,color2 value%,...);}