CSS背景
background-color:red
background-image:url('paper.gif')
background-repeat:no-repeat
background-attachment:feix
background-position:right top;
body {background:#ffffff url('img_tree.png') no-repeat right top;} (背景简写)
background-image:url(img_flwr.gif),url(paper.gif);
background-size:80px 60px; background-size:100%100%; 规定背景图片的尺寸。
background-origin:content-box; 规定背景图片的定位区域。
background-clip:content-box; 规定背景的绘制区域。
CSS文本格式
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距
所有CSS字体属性
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本
font-weight指定字体的粗细。
链接样式
a:link {color:#FF0000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 *
所有的CSS列表属性
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图象设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。
CSS 边框属性
border简写属性，用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
order-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。
border-radius border-radius:25px;
box-shadow box-shadow: 10px 10px 5px #888888;
border-image border-image:url(border.png) 30 30 round;
所有CSS 轮廓（outline）属性
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline在一个声明中设置所有的外边框属性
outline-color设置外边框的颜色
outline-style设置外边框的样式
outline-width设置外边框的宽度
margin属性可以有一到四个值。pading和他一样
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
所有CSS 尺寸 (Dimension)属性
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。
CSSDisplay(显示)与Visibility（可见性）
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
CSSPositioning(定位)
Fixed 定位元素的位置相对于浏览器窗口是固定位置。
Relative 定位 相对定位元素的定位是相对其正常位置。
Absolute 定位 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
CSS3渐变（Gradients）
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background:linear-gradient(red,blue);/*标准的语法*/从上到下的线性渐变
background:linear-gradient(toright,red,blue);/*标准的语法*/ 线性渐变 - 从左到右
background:linear-gradient(tobottomright,red,blue);/*标准的语法*/ 从左上角到右下角的线性渐变
径向渐变（Radial Gradients）- 由它们的中心定义
background:radial-gradient(red,green,blue);/*标准的语法*/
颜色结点不均匀分布的径向渐变：
background:radial-gradient(red5%,green15%,blue60%);/*标准的语法*/
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
background:radial-gradient(circle,red,yellow,green);/*标准的语法*/
CSS3文本效果
text-shadow:5px 5px 5px #FF0000; 给标题添加阴影
box-shadow:10px 10px 5px grey; 属性适用于盒子阴影
text-overflow
word-wrap CSS3的换行
word-break 单词拆分换行
hanging-punctuation规定标点字符是否位于线框之外。
punctuation-trim规定是否对标点字符进行修剪。
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis向元素的文本应用重点标记以及重点标记的前景色
text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline规定文本的轮廓。
text-overflow规定当文本溢出包含元素时发生的事情
text-shadow向文本添加阴影
text-wrap规定文本的换行规则。
word-break规定非中日韩文本的换行规则。
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。
CSS3 @font-face 规则
font-family:name
src:URL
font-stretch:normal
font-style:normal
font-weight:noraml
CSS3 2D 转换
transform:
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。transform:matrix(0.866,0.5,-0.5,0.866,0,0);
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。transform:translate(50px,100px);
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。transform:scale(2,3);
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。transform:rotate(30deg);
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。transform:skew(30deg,20deg);
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。
CSS33D 转换
transform向元素应用 2D 或 3D 转换。
transform-origin允许你改变被转换元素的位置。
transform-style规定被嵌套元素如何在 3D 空间中显示。
perspective规定 3D 元素的透视效果。
perspective-origin规定 3D 元素的底部位置。
backface-visibility定义元素在不面对屏幕时是否可见。
3D 转换方法
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转
rotateX(angle)定义沿 X 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。
CSS3过渡
transition:property,duration,ease,delay;
transition简写属性，用于在一个属性中设置四个过渡属性。
transition-property规定应用过渡的 CSS 属性的名称。
transition-duration定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。
transition-delay规定过渡效果何时开始。默认是 0。
transition:width1slinear2s;效果与下面相同
transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;
CSS3 动画
@keyframes规定动画。
animation所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function规定动画的速度曲线。默认是 "ease"。
animation-delay规定动画何时开始。默认是 0。
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。
CSS3 多列属性
column-count指定元素应该被分割的列数。
column-fill指定如何填充列
column-gap指定列与列之间的间隙
column-rule所有 column-rule-* 属性的简写
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的厚度
column-span指定元素要跨越多少列
column-width指定列的宽度
columns设置 column-width 和 column-count 的简写
CSS3 弹性盒子(Flex Box)
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
各个值解析:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
align-items 属性
align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
各个值解析:
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
flex-wrap 属性
flex-wrap属性用于指定弹性盒子的子元素换行方式。
各个值解析:
nowrap- 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap- 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse-反转 wrap 排列。
align-content 属性
align-content属性用于修改flex-wrap属性的行为。类似于align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
各个值解析:
stretch- 默认。各行将会伸展以占用剩余的空间。
flex-start- 各行向弹性盒容器的起始位置堆叠。
flex-end- 各行向弹性盒容器的结束位置堆叠。
center-各行向弹性盒容器的中间位置堆叠。
space-between-各行在弹性盒容器中平均分布。
space-around- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
弹性子元素属性
完美的居中
以下实例将完美解决我们平时碰到的居中问题。
使用弹性盒子，居中变的很简单，只想要设置margin: auto;可以使得弹性子元素在两上轴方向上完全居中:
align-self
align-self属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
flex
各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
媒体查询:
not:not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all:所有设备，这个应该经常看到。
@media screen and (min-width: 480px){
body{
background-color:lightgreen;
}
}
