css之常用属性

背景属性：

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
值：
scroll 	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 	当页面的其余部分滚动时，背景图像不会移动。

background-color 设置背景色
值：
color_name 	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number 	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number 	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 	默认。背景颜色为透明。

background-image 设置背景图片
值：
url('URL') 	指向图像的路径。
none 	默认值。不显示背景图像。

background-position 属性设置背景图像的起始位置。
值：
x% y%

background-repeat 属性设置是否及如何重复背景图像。
值：
repeat 	默认。背景图像将在垂直方向和水平方向重复。
repeat-x 	背景图像将在水平方向重复。
repeat-y 	背景图像将在垂直方向重复。
no-repeat 	背景图像将仅显示一次。

background-origin 属性规定 background-position 属性相对于什么位置来定位。
值：
padding-box 	背景图像相对于内边距框来定位。
border-box 	背景图像相对于边框盒来定位。
content-box 	背景图像相对于内容框来定位。

background-size 属性规定背景图像的尺寸。
语法：
background-size: length|percentage|cover|contain;

过渡属性：

transition: 样式名 过渡时间；
值：
transition-property 	规定设置过渡效果的 CSS 属性的名称。
transition-duration 	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 	规定速度效果的速度曲线。
transition-delay 	定义过渡效果何时开始。

animation
 实例
#div1{
    width:60px;
    height: 60px;
    -webkit-animation: first 5s;
    background-color: black;
}
@-webkit-keyframes first{
    from {background-color: red;}
    to {background-color: blue;}
}

文本属性：

color 属性规定文本的颜色。

direction 属性规定文本的方向 / 书写方向。
值：
ltr 	默认。文本方向从左到右。
rtl 	文本方向从右到左。

letter-spacing 属性增加或减少字符间的空白（字符间距）。
值：
px

line-height 属性设置行间的距离（行高）。
值：
%|px

text-align 属性规定元素中的文本的水平对齐方式。
值：
left 	把文本排列到左边。默认值：由浏览器决定。
right 	把文本排列到右边。
center 	把文本排列到中间。
justify 	实现两端对齐文本效果。

text-decoration 属性规定添加到文本的修饰。
值：
none 	默认。定义标准的文本。
underline 	定义文本下的一条线。
overline 	定义文本上的一条线。
line-through 	定义穿过文本下的一条线。
blink 	定义闪烁的文本。

text-indent 属性规定文本块中首行文本的缩进。
值：
length 	定义固定的缩进。默认值：0。
% 	定义基于父元素宽度的百分比的缩进。
px

text-transform 属性控制文本的大小写。
值：
none 	默认。定义带有小写字母和大写字母的标准的文本。
capitalize 	文本中的每个单词以大写字母开头。
uppercase 	定义仅有大写字母。
lowercase 	定义无大写字母，仅有小写字母。

white-space 属性设置如何处理元素内的空白。
值：
normal 	默认。空白会被浏览器忽略。
pre 	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 	保留空白符序列，但是正常地进行换行。
pre-line 	合并空白符序列，但是保留换行符。

word-spacing 属性增加或减少单词间的空白（即字间隔）。
值：
px

ext-overflow 属性规定当文本溢出包含元素时发生的事情。
值：
clip 	修剪文本。
ellipsis 	显示省略符号来代表被修剪的文本。
string 	使用给定的字符串来代表被修剪的文本。

text-shadow 属性向文本设置阴影。
值：
h-shadow 	必需。水平阴影的位置。允许负值。
v-shadow 	必需。垂直阴影的位置。允许负值。
blur 	可选。模糊的距离。
color 	可选。阴影的颜色。参阅 CSS 颜色值。

表格属性：

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
值：
separate 	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
值：
ength length 	

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个 length 参数，那么定义的是水平和垂直间距。

如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。
值：
hide 	不在空单元格周围绘制边框。
show 	在空单元格周围绘制边框。默认。

定位属性：

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
注释：如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果。
值：
auto 	默认值。通过浏览器计算底部的位置。
% 	设置以包含元素的百分比计的底边位置。可使用负值。
length 	使用 px、cm 等单位设置元素的底边位置。可使用负值。

clear 属性规定元素的哪一侧不允许其他浮动元素。
值：
left 	在左侧不允许浮动元素。
right 	在右侧不允许浮动元素。
both 	在左右两侧均不允许浮动元素。
none 	默认值。允许浮动元素出现在两侧。

clip 属性剪裁绝对定位元素。
值：
shape 	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto 	默认值。不应用任何剪裁。
实例：
clip:rect(0px,60px,200px,0px);

cursor 属性规定要显示的光标的类型（形状）。
值：
url 	

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 	默认光标（通常是一个箭头）
auto 	默认。浏览器设置的光标。
crosshair 	光标呈现为十字线。
pointer 	光标呈现为指示链接的指针（一只手）
move 	此光标指示某对象可被移动。
e-resize 	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 	此光标指示矩形框的边缘可被向上（北）移动。
se-resize 	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 	此光标指示矩形框的边缘可被向下移动（南）。
w-resize 	此光标指示矩形框的边缘可被向左移动（西）。
text 	此光标指示文本。
wait 	此光标指示程序正忙（通常是一只表或沙漏）。
help 	此光标指示可用的帮助（通常是一个问号或一个气球）。

display 属性规定元素应该生成的框的类型。
值：
none 	此元素不会被显示。
block 	此元素将显示为块级元素，此元素前后会带有换行符。
inline 	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 	行内块元素。（CSS2.1 新增的值）
list-item 	此元素会作为列表显示。

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
值：
left 	元素向左浮动。
right 	元素向右浮动。
none 	默认值。元素不浮动，并会显示在其在文本中出现的位置。

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
注释：如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。
值：
auto 	默认值。通过浏览器计算左边缘的位置。
% 	设置以包含元素的百分比计的左边位置。可使用负值。
length 	使用 px、cm 等单位设置元素的左边位置。可使用负值。
说明：类似的还有right、top、bottom。

overflow 属性规定当内容溢出元素框时发生的事情。
值：
visible 	默认值。内容不会被修剪，会呈现在元素框之外。
hidden 	内容会被修剪，并且其余内容是不可见的。
scroll 	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

position 属性规定元素的定位类型。
值：
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

vertical-align 属性设置元素的垂直对齐方式。
值：
baseline 	默认。元素放置在父元素的基线上。
sub 	垂直对齐文本的下标。
super 	垂直对齐文本的上标
top 	把元素的顶端与行中最高元素的顶端对齐
text-top 	把元素的顶端与父元素字体的顶端对齐
middle 	把此元素放置在父元素的中部。
bottom 	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 	把元素的底端与父元素字体的底端对齐。
length
% 	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

visibility 属性规定元素是否可见。
值：
visible 	默认值。元素是可见的。
hidden 	元素是不可见的。
collapse 	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
值：
auto 	默认。堆叠顺序与父元素相等。
number 	设置元素的堆叠顺序。

内边距属性（Padding）：

padding 简写属性在一个声明中设置所有内边距属性。
值：
auto 	浏览器计算内边距。
length 	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
% 	规定基于父元素的宽度的百分比的内边距。

注意：按照顺时针排序。

外边距属性（Margin）：

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
值：
auto 	浏览器计算外边距。
length 	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 	规定基于父元素的宽度的百分比的外边距。
注意：也是顺时针你排序。

列表属性（List）：

list-style-type
位于第一个位置，常见的值有：
none 	无标记。
disc 	默认。标记是实心圆。
circle 	标记是空心圆。
square 	标记是实心方块。
decimal 	标记是数字。
decimal-leading-zero 	0开头的数字标记。(01, 02, 03, 等。)
lower-latin 	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 	大写拉丁字母(A, B, C, D, E, 等。)

list-style-position
值：
inside 标记放在文本内
outside 标记放在文本外

简写：
list-style:type position url()

字体属性（Font）：

font-family 规定元素的字体系列。

font-size 属性可设置字体的尺寸。
值：
    xx-small
    x-small
    small
    medium
    large
    x-large
    xx-large
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。
默认值：medium。
smaller 	把 font-size 设置为比父元素更小的尺寸。
larger 	把 font-size 设置为比父元素更大的尺寸。
length 	把 font-size 设置为一个固定的值。
% 	把 font-size 设置为基于父元素的一个百分比值。

font-style 属性定义字体的风格。
值：
normal 	默认值。浏览器显示一个标准的字体样式。
italic 	浏览器会显示一个斜体的字体样式。
oblique 	浏览器会显示一个倾斜的字体样式。

font-weight 属性设置文本的粗细。
值：
normal 	默认值。定义标准的字符。
bold 	定义粗体字符。
bolder 	定义更粗的字符。
lighter 	定义更细的字符。
    100
    200
    300
    400
    500
    600
    700
    800
    900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

尺寸属性（Dimension）：

height 属性设置元素的高度。
值：
auto 	默认。浏览器会计算出实际的高度。
length 	使用 px、cm 等单位定义高度。
% 	基于包含它的块级对象的百分比高度。

类似的还有width、minheight、maxwidth。

边框属性（Border 和 Outline）：

border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：

    border-width
    border-style
    border-color

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：

    outline-color
    outline-style
    outline-width

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
值：
px

box-shadow 属性向框添加一个或多个阴影。
值：
h-shadow 	必需。水平阴影的位置。允许负值。
v-shadow 	必需。垂直阴影的位置。允许负值。
blur 	可选。模糊距离。
spread 	可选。阴影的尺寸。
color 	可选。阴影的颜色。请参阅 CSS 颜色值。
inset 	可选。将外部阴影 (outset) 改为内部阴影。 	

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
    outline-color
    outline-style
    outline-width