CSS15 - 界面样式 & 垂直对齐

所谓的界面样式， 就是更改一些元素的样式， 比如更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此这类属性使用的场景并不多。

鼠标样式

cursor 属性设置鼠标在对象上移动时鼠标指针采用何种系统预定义的光标形状。

cursor：default；默认样式，即鼠标的正常样式。

cursor：pointer；小手样式，即鼠标放在超链接上时的样式。

cursor：move；移动，如图所示

cursor：text；文本，如图所示

轮廓

轮廓是默认绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性及属性值如下：

outline : outline-color；规定轮廓的颜色；

outline：outline-style；规定轮廓的样式；如 dotted（点线）、double（双线）、solid（实线）等，默认为 none；

outline：outline-width；规定轮廓的宽度；如 thin（细轮廓线）、medium（中等粗轮廓线，默认属性）等，还可以直接指定宽度，如 outline：5px；即轮廓线宽 5 像素。

其实不用在意这些元素可以设置多少，因为这些样式平时都是去掉的。

最直接的写法是 ： outline: 0;

防止拖拽文本

resize：none； 这个单词可以防止火狐、谷歌等浏览器随意地拖动文本域。如图所示：

示例代码：

textarea {	resize: none;}

垂直对齐

margin: 0 auto; 可以使带有宽度的块级元素水平居中对齐；

text-align: center; 可以让文字水平居中对齐；

vertical-align 可以让元素垂直对齐，vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片和表单等。vertical-align 属性值如下：

vertical-align : baseline |top |middle |bottom；

vertical-align: baseline; 基线对齐；

vertical-align: middle; 垂直居中；

vertical-align: top; 顶部对齐；

示例代码：

img {	vertical-align: middle;  <!--让图片与后面的内容垂直居中对齐-->}

精灵图技术

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用 CSS 的 background-image、background-repeat 和 background-position 属性进行背景定位，其中最关键的是使用 background-position 属性精确地定位。

背景属性简写：background：url(图片路径) repeat/no-repeat x 轴位置 y 轴位置；