11.CSS笔记：内容、用户界面属性
本系列内容由ZouStrong整理收录
整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com
一. 生成内容
生成内容是指由浏览器创建的内容，而不是由标签或者内容来表示
例如，列表项符号就是生成内容（没有任何部分直接表示这些符号，浏览器自动生成合适的符号）
使用:before和:after伪元素可以向文档中插入生成内容，这些伪元素根据content属性将生成内容放在一个元素内容的前面或者后面
1. content属性（IE6、7不支持）
- 作用：指定插入的生成内容
- 默认值：normal
- 适用于：:after和:before伪元素
- 继承性：无
- 动画性：无
- 取值：normal、字符串、URL(图片，视频...)、attr[identifier]
示例：
p:after {content:"strong"}注意，使用字符串值的时候，字符串值会原样显示，即使包含了标签
p:after {content:"<b>hi</b>"}<b>hi</b>，将会原样显示，因此content只能用于插入文本
使用content可以直接插入元素的属性值
a:after {content:attr(href);}
a:after {content:"[" attr(href) "]";}2. counter-increment属性（IE6、7不支持）
- 作用：指定当一个selector发生时计数器增加的值
- 默认值：none
- 适用于：:after和:before伪元素
- 继承性：无
- 动画性：无
- 取值：none、标识符和可选的间隔值
示例：
counter-increment:testname -1;3. counter-reset属性（IE6、7不支持）
- 作用：指定selector的计数器复位
- 默认值：none
- 适用于：:after和:before伪元素
- 继承性：无
- 动画性：无
- 取值：none、标识符和可选的定义被复位的数值
示例：
counter-reset:testname 20;4. quotes（IE6、7不支持）
- 作用：指定元素内使用的嵌套标记
- 默认值：none
- 适用于：:after和:before伪元素
- 继承性：有
- 动画性：无
- 取值：none、string
5. direction属性
...
6. unicode-bidi属性（CSS3有改动）
...
7. writing-mode属性（CSS3新增）
...
二. 用户界面
1. cursor属性
- 作用：指定光标形状
- 默认值：auto
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 取值：URL、auto、none、default、pointer...
示例：
p {cursor:pointer}使用svg或者图片也可以，只要这样就能保证显示正确
p {cursor : url(a.svg#link) , url(b.png) , pointer ; }2. outline-style属性
- 作用：指定元素轮廓的样式
- 默认值：none
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值：none、solid、dotted、dashed......
3. outline-width属性
- 作用：指定元素轮廓的宽度
- 默认值：medium
- 适用于：所有元素
- 继承性：无
- 动画性：有
- 取值：所有长度值、thin、medium、thick
4. outline-color属性
- 作用：指定元素轮廓的颜色
- 默认值：invert
- 适用于：所有元素
- 继承性：无
- 动画性：有
- 取值：所有颜色值、invert
5. 简写outline属性
- 作用：指定元素轮廓
- 默认值：由独立属性决定
- 适用于：所有元素
- 继承性：无
- 动画性：由独立属性决定
- 取值：由独立属性决定
示例：
outline:2px solid #F00;轮廓类似于边框，但是轮廓不会影响文档流，即轮廓的出现不会导致文档的重新显示
所以，当有的时候悬浮边框加粗的时候，可以使用轮廓来代替哦（注意，IE6、7不支持）~~
轮廓与边框可共存，但轮廓不能为四条边应用不同样式
chrome浏览器在文本输入框获得焦点时，会拥有默认的轮廓
只需
textarea,input {outline:none}即可去除
6. outline-offset属性（CSS3新增）（IE6-11都不支持）
- 作用：指定元素轮廓的偏移量
- 默认值：0
- 适用于：所有元素
- 继承性：无
- 动画性：有
- 取值：所有长度值
示例：
outline-offse:10px;7. text-overflow属性（CSS3新增）
- 作用：指定元素内容溢出时的显示方式
- 默认值：clip
- 适用于：块级元素
- 继承性：无
- 动画性：无
- 取值： clip、ellipsis
要使得text-overflow属性生效，块容器必须显式定义overflow为非visible值，同时显式或者隐式的定义width为非auto值，white-space为nowrap值
width:100px; /*定义宽度，才能超出隐藏*/
overflow:hidden; /*超出隐藏，才能显示省略号*/
white-space:nowrap; /*文本不换行，才能显示省略号*/
text-overflow:ellipsis; /*显示省略号*/IE的私有属性，所以IE浏览器都支持，但是老版Firefox不支持
8. zoom属性（CSS3新增）（所有浏览器都支持）
- 作用：指定元素的缩放比例
- 默认值：normal
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 取值： 数值和百分比
zoom常用于触发IE的layout，已解决IE下的BUG（详见CSS BUG篇）
9. appearance属性（CSS3新增）
- 作用：指定元素的显示样式
- 默认值：none
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值：........
10. nav-index、nav-up、nav-down、nav-left、nav-right（CSS3新增）
- 作用：指定元素的tab顺序
- 默认值：auto
- 适用于：所有可用（enabled）的元素
- 继承性：无
- 动画性：无
- 取值：........
11. ime-mode属性（CSS3新增）
- 作用：指定是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态
- 默认值：auto
- 适用于：所有输入文本框
- 继承性：无
- 动画性：无
- 取值：........
12. pointer-events属性（CSS3新增）（IE10及以下不支持）
- 作用：指定何时成为属性事件的target
- 默认值：auto
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 取值：auto、none（元素永远不会成为鼠标事件的target）
使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器
13. user-select属性（CSS3新增）（IE9及以下不支持）
- 作用：是否允许用户选中文本
- 默认值：text
- 适用于：除行内替换元素外的所有元素
- 继承性：无
- 动画性：无
- 取值：none、text、all、element
none：文本不能被选择
text：可以选择文本
all：当所有内容作为一个整体时可以被选择
element：可以选择文本，但选择范围受元素边界的约束
使用时候，需要加前缀
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;"来禁止选中
老版Opera支持使用私有的标签属性 unselectable="on" 来禁止选中