CSS属性合写
animation:[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]
[ animation-name ]: 检索或设置对象所应用的动画名称
[ animation-duration ]: 检索或设置对象动画的持续时间
[ animation-timing-function ]: 检索或设置对象动画的过渡类型
[ animation-delay ]: 检索或设置对象动画延迟的时间
[ animation-iteration-count ]: 检索或设置对象动画的循环次数
[ animation-direction ]: 检索或设置对象动画在循环中是否反向运动
transform:none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)
none: 无转换
matrix: 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>]): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translateX(<length>): 指定对象X轴(水平方向)的平移
translateY(<length>): 指定对象Y轴(垂直方向)的平移
rotate(<angle>): 指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义
scale(<number>[, <number>]): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX(<number>): 指定对象X轴的(水平方向)缩放
scaleY(<number>): 指定对象Y轴的(垂直方向)缩放
skew(<angle> [, <angle>]): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
skewX(<angle>): 指定对象X轴的(水平方向)扭曲
skewY(<angle>): 指定对象Y轴的(垂直方向)扭曲
- transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
[ transition-property ]: 检索或设置对象中的参与过渡的属性
[ transition-duration ]: 检索或设置对象过渡的持续时间
[ transition-timing-function ]: 检索或设置对象中过渡的动画类型
[ transition-delay ]: 检索或设置对象延迟过渡的时间
columns:[ column-width ] || [ column-count ]
[ column-width ]: 设置或检索对象每列的宽度
[ column-count ]: 设置或检索对象的列数
border:[ border-width ] || [ border-style ] || [ border-color ] //经过测试,border-style与border-color互换位置也可
[ border-width ]: 设置或检索对象边框宽度。
[ border-style ]: 设置或检索对象边框样式。
[ border-color ]: 设置或检索对象边框颜色。
font:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar
<font-style>:指定文本字体样式
<font-variant>:指定文本是否为小型的大写字母
<font-weight>: 指定文本字体的粗细
<font-size>: 指定文本字体尺寸
<line-height>: 指定文本字体的行高
<font-family>: 指定文本使用某个字体或字体序列
caption: 使用有标题的系统控件的文本字体(如按钮,菜单等)(CSS2)
icon: 使用图标标签的字体(CSS2)
menu: 使用菜单的字体(CSS2)
message-box: 使用信息对话框的文本字体(CSS2)
small-caption: 使用小控件的字体(CSS2)
status-bar: 使用窗口状态栏的字体(CSS2)
background:[ <bg-layer>, ]* <final-bg-layer>
<bg-layer> = [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}
<final-bg-layer> = [ background-color ] || [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}
//经过测试,background-position放在background-repeat之后也可
[ background-color ]: 指定对象的背景颜色。
[ background-image ]: 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
[ background-repeat ]: 指定对象的背景图像如何铺排填充。
[ background-attachment ]: 指定对象的背景图像是随对象内容滚动还是固定的。
[ background-position ]: 指定对象的背景图像位置。
[ background-origin ]: 指定对象的背景图像显示的原点。
[ background-clip ]: 指定对象的背景图像向外裁剪的区域。
[ background-size ]: 指定对象的背景图像的尺寸大小。
margin:[ <length> | <percentage> | auto ]{1,4}
auto:值被设置为相对边的值
<length>: 用长度值来定义外补白。可以为负值
<percentage>: 用百分比来定义外补白。可以为负值
检索或设置对象四边的外延边距。
- 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
- 如果只提供一个,将用于全部的四边。
- 如果提供两个,第一个用于上、下,第二个用于左、右。
- 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
- 内联对象可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。
- 外延边距始终透明。
padding同理
list-style:[ list-style-image ] || [ list-style-position ] || [ list-style-type ] //ps:经测试属性值的顺序不影响最终效果
[ list-style-image ]: 设置或检索作为对象的列表项标记的图像
[ list-style-position ]: 设置或检索作为对象的列表项标记如何根据文本排列
[ list-style-type ]: 设置或检索对象的列表项所使用的预设标记
CSS属性合写的更多相关文章
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- 换行的css属性
//正常换行 word-break:keep-all;word-wrap:normal; //下面这行是自动换行 word-break:break-all;word-wrap:break-word ...
- jquery css属性练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- animate支持的css属性
支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
- CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...
- css学习(2)-- 常见的CSS属性和值
1.CSS中修饰字体的属性 属 性 描 述 属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...
- css属性编写顺序+mysql基本操作+html细节(个人笔记)
css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...
- 前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
随机推荐
- 3.集--LinkedTransferQueue得知
近期在阅读开源项目里,发现有几个project都不尽同样地使用LinkedTransferQueue这个数据结构.比方netty,grizzly,xmemcache,Bonecp. Bonecp还扩展 ...
- 【Swift初见】Swift词典
顾名思义.当我们仰望的时候,我们将基于索引查找我们需要找到的资源.在swift这同样适用,每个对象包括字典key和value.我们key为了找到当前这个key相应的value.与数组不同的是,字典项字 ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作(三)
对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...
- Android[安德鲁斯] 文本Air Video 远程播放电脑视频
苹果iOS下列.目前应用Air Video,能力iOS由Wifi远程直接播放电脑视频,无需看视频复制到手机.非常好用!最近使用Android打电话.展望类别似应用,找了很长一段时间没有找到.在仔细的思 ...
- Petroglyph访问:中间件游戏
Xsolla有幸与Petroglyph的总裁及创始人Michael Legg进行了对话. 这是及时战略游戏中对主要一家公司. 由前Westwood的员工 创办,还设计了一块新的RTS游戏-Grey G ...
- KnockOut绑定
KnockOut绑定之Click绑定 Click绑定对DOM元素添加一个函数,当DOM元素被点击的时候调用.在button,input 或者a标签中常用,但其实他适用于任何可见的DOM元素. exam ...
- 基于C++ 苹果apns消息推送实现(2)
1.该模块的用途C++ 和 Openssl 代码 它实现了一个简单的apns顾客 2.配套文件:基于boost 的苹果apns消息推送实现(1) 3.最初使用的sslv23/sslv2/sslv3仅仅 ...
- 一步一步写算法(之prim算法 上)
原文:一步一步写算法(之prim算法 上) [ 声明:版权所有,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 前面我们讨论了图的创建.添加.删除和保存等问题.今 ...
- ASP.NET 5+EntityFramework 7
爱与恨的抉择:ASP.NET 5+EntityFramework 7 EF7 的纠缠 ASP.NET 5 的无助 忘不了你的好 一开始列出的这个博文大纲,让我想到了很久之前的一篇博文:恋爱虽易,相 ...
- Shell的学习就从重装系统开始吧
小标题:与Fedora的爱恨情仇 干巴巴的shell学习实在枯燥,看来学习姿势还是要从实践入手 起因:传说中的不作死就不会死,昨晚偶遇一本PDF,讲glade编辑界面的,以下就被吸引了,跟着讲解搞出个 ...