CSS 属性参考

Color

HSL
hue色相， saturation饱和度， lightness亮度

• 色相： 0 和360 都是红色， 180是绿色
• 饱和度： 0% 全灰色 ～ 100% 纯色
• 亮度： 0%全黑 ～ 100% 全白

https://color.adobe.com/create/color-wheel/

字体属性

color: #fff;
font-family: Arial; 
font-style: italic | oblique | normal;
font-weight: bold | normal;
line-height: 200%;

text-shadow: -4px 4px 4px #999;
text-transform: uppercase | lowercase | capitalize | none;
letter-spacing: 1px; //字母间距
word-spacing: -1px; //单词间距
text-align: left | center | right | justify;
text-decoration: underline | overline | line-through | blink | none;
text-indent: 3em;
font-variant: small-caps | normal;   //全字母大写，首字母比其他的大
vertical-align: baseline | sub | super | top | text-top | middle;  // 可以设置百分比，基于line-height的值
white-space: nowrap | pre | normal;

列表属性

list-style: [list-style-type] [list-style-image] [list-style-position];
list-style-position: outside | inside;
list-style-type: disc | circle | square | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | lower-greek | none;

背景属性

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
background-attachment:  scroll | fixed;
background-clip:  border-box | padding-box | content-box;   // 限制背景图片的显示区域, default: border-box
background-origin: border-box | padding-box | content-box;  //根据border， padding内容放置背景图片， default： border-box；
background-position: [horizontal] [vertical];
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
background-size: contain | cover | [pixel | em | %];  //background-size: 200px 400px;

排版属性

clear: left | right | both | none;
clip: rect(5px, 110px, 40px , 10px);
overflow: visible | hidden | scroll | auto;
z-index: 2;  //只适用于定位属性为absolute/relative/fixed的元素

https://css-tricks.com/almanac/properties/z/z-index/
http://www.duidea.com/2013/0330/1761.html

堆栈上下文的根元素
定位元素（和他们的子元素）带着负数的z-index值（高的值被堆叠在低值的前面；相同值的元素按照在HTML中出现的顺序堆叠）
非定位元素（按照在HTML中出现的顺序排序）
定位元素（和他们的子元素）带着auto的z-index值（按照在HTML中出现的顺序排序）
定位元素（和他们的子元素）带着正z-index值（高的值被堆叠在低值的前面；相同值的元素按照在HTML中出现的顺序堆叠）
注 解：定位元素带有负的z-index值被在一个堆栈上下文中先排序，这意味着他们出现在所有其他元素的后面。正因如此，它使一个元素出现在自己父元素之后 成为可能，这以前通常是不可能的事。当然，这局限于它的父元素与它在同一个堆栈上下文，并且不是那个堆栈上下文的根元素。一个伟大的例子如Nicolas Gallagher的CSS不用图像降低阴影。

Paste_Image.png

动画

@keyframe

@keyframe myAnimation {
    from {
       width: 10px;
  }

 to {
    width: 100px;
}
}

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-iteration-count] [animation-direction] [animation-delay] [animation-fill-mode];
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out;
animation-iteration-count:  3 | infinite;
animation-direction: normal | alternate; // 一般浏览器会从它的初始起点重播。设置alternate之后，可以让它反向，类似从白到黑，再从黑到白
animation-fill-mode： backwards | forwards | backwards forwards;  //定义动画结束时的样式
animation-play-state: paused | running;

transform: rotate() | translate() | skew() | scale();
transform-origin: [horizontal] [vertical]; // same as background-position;

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]

表格属性

border-collapse: collapse | separate; // 设置单元格的边框线时隔开还是重叠的；
border-spacing: [horizontal] [vertical]; //设置单元格之间的空格量
caption-side:  top | bottom;  //标题显示在顶部还是底部
empty-cells： show | hide: // 决定浏览器如何显示完全为空的表格单元。hide可以完全隐藏，只显示一个空的占位符，边框线背景色和背景图片都不会显示。
table-layout: auto | fixed; //当为fixed时，所有列的宽度与第一行的宽度相同

其他属性

• content
  http://www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html
  https://www.w3.org/TR/CSS21/generate.html

content: normal |  open-quote | close-quote | no-open-quote | no-close-quote;
content: "";
a:after {
    content:  " (" attr(href) ") ";
}

• cursor
  http://quirksmode.org/css/user-interface/cursor.html

cursor: auto | default | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | url('../xxx.png')

打印相关

page-break-after: auto | always | avoid | left | right; // left 和right 会直接当做always处理
page-break-before: auto | always | avoid | left | right; // left 和right 会直接当做always处理