张登友，张登友的博客，张登友的网站——
CSS属性不完全总结（待更新）
CSS文本属性
| 属性 | 解释 | 值 |
|---|---|---|
| letter-spacing | 单个字母之间的间距 | normal length |
| word-spacing | 单词之间的间距 | normal length |
| text-decoration: none | 用来设置或删除文本的装饰。 | none去掉下划线 underline下划线、 overline上划线、 line-through中划线、 blink |
| text-transform | 单词字体大小写 | uppercase大写 lowercase小写 capitalize每个单词的首字母大写 |
| color | 设置文本颜色 | 英文颜色名或者十六进制颜色或者RGB值 |
| text-align | 在当前容器中的对齐方式。 | left、right、center、justify(每一行被展开为宽度相等，左，右外边距是对齐) |
| dizection | 设置文本方向 | ltr rtl |
| text-indent | 缩进元素中文本的首行 | length % |
| text-shadow | 设置文本阴影 | none color length |
| unicode-bidi | 设置或返回文本是否被重写 | normal embed bidi-override |
| white-space | 设置元素中空白的处理方式 | normal pre nowrap |
| vertical-align | 设置元素的垂直对齐 | |
| line-height | 设置行高 |
CSS字体属性
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
CSS列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
overflow属性：超出范围的内容要怎么处理
| 属性 | 描述 |
|---|---|
| visible | 默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。 |
| hidden | 不显示超过对象尺寸的内容。 |
| auto | 如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。 |
| scroll | Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。 |
鼠标的属性 cursor
| 属性 | 描述 |
|---|---|
| auto | 默认值。浏览器根据当前情况自动确定鼠标光标类型。 |
| pointer | 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 |
| hand | 和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 |
| all-scroll | IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 |
| col-resize | IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。 |
| crosshair | 简单的十字线光标。 |
| default | 客户端平台的默认光标。通常是一个箭头。 |
| hand | 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 |
| move | 十字箭头光标。用于标示对象可被移动。 |
| help | 带有问号标记的箭头。用于标示有帮助信息存在。 |
| no-drop | IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 |
| not-allowed | IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。 |
| progress | IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。 |
| row-resize | IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。 |
| text | 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。 |
| vertical-text | IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。 |
| wait | 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。 |
| *-resize | 用于标示对象可被改变尺寸方向的箭头光标。 |
| url ( url ) | IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。 |
background 的常见背景属性
| 属性 | 描述 | 值 |
|---|---|---|
| background-color | 设置元素的背景颜色。 | 十六进制值(#ff99ff)、RGB值(rgb(255,0,0)、颜色名(red)CSS3 中新的表示颜色的方式：RGBA或者HSLA。 |
| background-image | 将图像设置为背景 | url(images/2.gif) |
| background-repeat | 设置背景图片是否重复及如何重复，默认平铺满。（重要） | no-repeat不要平铺； repeat-x横向平铺； repeat-y纵向平铺。 |
| background-position | 设置背景图片在当前容器中的位置。 | 关键字 center，用来居中背景图片。关键字 top, left, bottom, right用来指定把这个项目（原文为 item）放在哪一个边缘right center表示将图片放到右边的中间；center center表示将图片放到正中间。 |
| background-attachment | 设置背景图片是否跟着滚动条一起移动 | scroll（与fixed属性相反，默认属性）fixed（背景就会被固定住，不会被滚动条滚走） |
| background | 综合属性。作用是：将上面的多个属性写在一个声明中 |
border属性
border-width:10px; /* 边框宽度 */
border-style:solid; /* 线型 */
border-color:red; /* 颜色。*/
/* 等价与 */
border:10px solid red; 难记的属性
background-size
/* 宽、高的具体数值 */ background-size: 500px 500px; /* 宽高的百分比（相对于容器的大小） */ background-size: 50% 50%; // 如果两个属性值相同，可以简写成： background-size: 50%; background-size: 100% auto; //这个属性可以自己试验一下。 /* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */ background-size: cover; /* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */ background-size: contain;
background-origin 属性：背景原点
/* 从 padding-box 内边距开始显示背景图 */ background-origin: padding-box; //默认值 /* 从 border-box 边框开始显示背景图 */ background-origin: border-box; /* 从 content-box 内容区域开始显示背景图 */ background-origin: content-box;
background-clip属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面
background-clip: content-box; /* 超出 content-box 的部分，将裁剪掉 */ background-clip: padding-box; /* 超出 padding-box 的部分，将裁剪掉 */ background-clip: border-box; /* 超出 border-box 的部分，将裁剪掉 */
渐变：background-image
/* 线性渐变：沿着某条直线朝一个方向产生渐变效果。*/ /* background-image: linear-gradient(方向, 起始颜色, 终止颜色); 方向：to left to right to top to bottom 角度 30deg 起始颜色 终止颜色 */ background-image: linear-gradient(to right, yellow, green); /* 不写方向，表示默认的方向是：从上往下 */ background-image: linear-gradient(yellow, green); /* 方向可以指定角度 */ background-image: linear-gradient(135deg, yellow, green); /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */ background-image: linear-gradient(to right, yellow 0%, red 40%, green 70%, blue 100%); /* 颜色之间，出现突变 */ background-image: linear-gradient(45deg, yellow 0%, yellow 25%, blue 25%, blue 50%, red 50%, red 75%, green 75%, green 100%); /* 径向渐变：从一个中心点开始沿着四周产生渐变效果。*/ /* background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); 中心点位置：at left right center bottom top */ background-image: radial-gradient(100px at center,yellow ,green); /*辐射半径为100px，中心点在中间*/ background-image: radial-gradient(100px at center, yellow, green); /*中心点在左上角*/ background-image: radial-gradient(at left top, yellow, green); /*设置不同的颜色渐变*/ background-image: radial-gradient(100px at center, yellow 0%, green 30%, blue 60%, red 100%); /*如果辐射半径的宽高不同，那就是椭圆*/ background-image: radial-gradient(100px 50px at center, yellow, green);
