前端学习（二）

css属性介绍

绝对单位：
1 in=2.54cm=25.4mm=72pt=6pc

• in：英寸Inches (1 英寸 = 2.54 厘米)
• cm：厘米Centimeters
• mm：毫米Millimeters
• pt：点Points，或者叫英镑 (1点 = 1/72英寸)
• pc：皮卡Picas (1 皮卡 = 12 点)

相对单位：

• px：像素
• em：印刷单位相当于12个点
• %：百分比，相对周围的文字的大小

font字体属性

 font-size:50px;   /*字体大小*/
 line-height: 30px;      /*行高*/
 font-family:幼圆,黑体;  /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
 font-style:italic ;  /*italic表示斜体，normal表示不倾斜*/
 font-weight:bold; /*粗体：属性值写成bolder也可以*/
 font-variant:small-caps;  /*小写变大写*/

文本属性

  - `letter-spacing: 0.5cm ;`  单个字母之间的间距
 - `word-spacing: 1cm;`   单词之间的间距
 - `text-decoration: none;` 字体修饰：none去掉下划线、**underline下划线**、line-through中划线、overline上划线、
 - `text-transform: lowercase;`  单词字体大小写。uppercase大写、lowercase小写
 - `color:red;` 字体颜色
 - `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
 - `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）

overflow属性：超出范围的内容要怎么处理

 - `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
 - `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
 - `hidden`：不显示超过对象尺寸的内容。
对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。
 - `scroll`：总是显示滚动条。

鼠标的属性cursor

 - `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
 - `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
 - `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
 -例子：
p:hover{
 cursor: 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        :　  用于标示对象可被改变尺寸方向的箭头光标。
-                      w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
- url ( url )     :　 IE6.0  用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

background系列属性

- `background-color:#ff99ff;`  设置元素的背景颜色。
- `background-image:url(images/2.gif);` 将图像设置为背景。
- `background-repeat: no-repeat;`  设置背景图片是否重复及如何重复，默认平铺满。（重要）
 - `no-repeat`不要平铺；
 - `repeat-x`横向平铺；
 - `repeat-y`纵向平铺。
-`background-position:center top;` 设置背景图片在当前容器中的位置。
- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
属性值可以是：`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。

- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。