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属性合写的更多相关文章

  1. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  2. 换行的css属性

    //正常换行  word-break:keep-all;word-wrap:normal; //下面这行是自动换行  word-break:break-all;word-wrap:break-word ...

  3. jquery css属性练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  5. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  6. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  7. css学习(2)-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

  8. css属性编写顺序+mysql基本操作+html细节(个人笔记)

    css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...

  9. 前端开发--css属性书写顺序

    css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...

随机推荐

  1. android如何在代码中设置margin

    1.首先看你要设置组件的父容器是什么. 例如,我是FrameLayout其中包括组件.如果调用bottomLayout这是: FrameLayout.LayoutParams lp = new Fra ...

  2. mac os x10.11.2系统eclipse无法读取环境变量的问题

    eclipse调试Android自动化脚本的时候一直无法找到adb,遇到这么坑的问题,折腾死了,记录一下. mac os x10.11.2系统GUI程序(eclipse)无法读取~/.bash_pro ...

  3. MSSQL发现第五到数据的第十

    第二十数据查询数据库,第十条数据,两起案件: 1,ID是连接的,当然这样的情况比較好查.直接SELECT就能够了.取ID大于5小于10就能够了, 这样的情况比較少. 2.ID不是连接的.假设要取第五条 ...

  4. Android实现“是否退出”对话框和“带图标的列表”对话框

    今天我们学习的内容是实现两种对话框(Dialog),第一种是询问是否退出对话框,另外一种是带图标的列表对话框,程序的执行效果是,我们点击button1的时候,弹出第一种对话框,我们点击button2的 ...

  5. 【ThinkingInC++】66、pointer Stash的使用

    头文件PStash.h /** * 书本:[ThinkingInC++] * 功能:pointer Stash的头文件 * 时间:2014年10月5日14:33:15 * 作者:cutter_poin ...

  6. 快速构建Windows 8风格应用18-基础控件I

    原文:快速构建Windows 8风格应用18-基础控件I 本篇博文主要介绍Windows 8风格应用开发中常用的几种基础控件. ProgressRing: ProgressRing控件常见的效果图: ...

  7. elasticsearch集群搭建实例

    elasticsearch集群搭建实例 下个月又开始搞搜索了,几个月没动这块还好没有落下. 晚上在自己虚拟机上搭建了一个简易搜索集群,分享一下. 操作系统环境: Red Hat 4.8.2-16 el ...

  8. xfire集成spring构建webservice

    前言:xfire.spring都是比较流行的技术,这里就不再赘述他们各自的优点:本文着重介绍xfire和spring的整合,不会做太深入的探究. 服务端 1. web.xml配置 spring配置部分 ...

  9. javascript实现代码高亮

    javascript实现代码高亮-wangHighLighter.js 1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfup ...

  10. CF - 96D - Volleyball

    题意:一个无向图,有n个点,m条边,每条边有距离w,每个点有两个属性(1.从这点出发能到的最远距离,2.从这点出发的费用(不论走多远都一样)),一个人要从点x到点y,问最小费用是多少. 题目链接:ht ...