@@ -1,8 +1,7 @@
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995 .html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4855106 .html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，
> 以下是正文。
## 主要内容
@@ -12,7 +11,7 @@
- 背景属性
- 列表属性
- 盒子模型
- 定位属性： 、z-index 等
- 定位属性：
- 鼠标的属性cursor
- 滤镜的介绍
@@ -20,13 +19,18 @@
html中的单位只有一种， ， ，
<font color="#0000FF ">**CSS中的单位是必须要写的**，因为它没有默认单位。</font>
- **绝对单位：**1 `in` =2.54`cm` =25.4`mm` =72`pt` =6`pc` 。
- **绝对单位：**
1 `in` =2.54`cm` =25.4`mm` =72`pt` =6`pc` 。
各种单位的含义：
`in` ：
`cm` ：
`m m` ： 毫米Mill imeters
`pt` ： ，
`pc ` ： 皮卡Picas (1 皮卡 = 12 点 )
- `in` ：
- `c m` ： 厘米Cent imeters
- `mm` ：
- `pt ` ： 点Points， )
- `pc` ：
- **相对单位：**
`px` ：像素
@@ -43,6 +47,7 @@ html中的单位只有一种， ，
## 字体属性
css样式中， ：
``` html
font-size:50px; /*字体大小*/
@@ -52,14 +57,16 @@ p{
font-variant:small-caps; /*小写变大写*/
}
```
另外还有一个`font` 属性，它是一个简写属性。指的是：可以将上面的多个属性写在一个声明里面，个人不太喜欢这种写法。
## 文本属性
CSS样式中， ：
- `letter-spacing:0.5cm ;` 单个字母之间的间距
- `word-spacing:1cm;` 单词之间的间距
- `text-decoration:ov erline;` 字体修饰：
- `text-decoration:und erline;` 字体修饰：** underline下划线** 、line-through中划线、overline上划线
- `text-transform:lowercase;` 单词字体大小写。uppercase大写、lowercase小写
- `color:red;` 字体颜色
- `text-align="属性值;"` 在当前容器中的对齐的方式。属性值可以是： （ #0000FF ">**在当前容器的中间**</font>）
@@ -73,15 +80,6 @@ CSS样式中， ：
CSS样式中， ： （ ， ）
现在，我们把上面的比较重要的属性挑选出来，如下：
- `background-color:#ff99ff;` 设置元素的背景颜色。
- `background-image:url(images/2.gif);` 将图像设置为背景。
@@ -122,7 +120,9 @@ PS：
其实这种属性的作用还是很广的。举个例子， ， ， 在搜索引擎上搜“平铺背景”，就可以发现，周期性的图片可以采用此种方法进行平铺。
其实这种属性的作用还是很广的。举个例子， ， ，
在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
（ ） `repeat-y` （纵向平铺）时：
@@ -148,9 +148,11 @@ PS：
举例如下：
20170812_1643.png
20170812_1645.png
**2、用单词描述属性值： **
@@ -172,11 +174,12 @@ PS：
打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
20170812_1945.png
检查网页后， ：
20170812_1950.jpg
实际上， ：
@@ -194,7 +197,10 @@ PS：
很多网站的首页都会有banner图（ ） ， ， ， ， ： ， ； ， ：
20170813_1102.gif
正确的做法是， ， ， ， ：
@@ -207,12 +213,11 @@ PS：
}
```
上方代码中， （ ） ， （ 因为宽度会 霸占整行）。效果如下：
上方代码中， （ ） ， （ 让宽度自动 霸占整行即可 ）。效果如下：
20170813_1119.gif
上图可以看出， ， （ ）
上图可以看出， ， （ ）
### background-attachment属性
@@ -221,11 +226,9 @@ PS：
- `fixed` （背景就会被固定住，不会被滚动条滚走）。
- `scroll` （ ， ）
`background-attachment:fixed;` 的效果如下：
20170813_1158.gif
### background综合属性
@@ -358,6 +361,7 @@ IE盒子模型：
< / html >
```
上面的代码中， ， ， ：
@@ -384,6 +388,7 @@ padding:20 30 40 50;
定位属性position的属性值可以是absolute、relative。
position定位分为绝对定位和相对定位：
- `position:absolute;` <font color="#0000FF ">**绝对定位**</font>：定义横纵坐标，原点在父容器的左上角。<font color="#0000FF ">**脱离了本身的顺序流**</font>。横坐标用left表示，
@@ -477,6 +482,7 @@ position定位分为绝对定位和相对定位：
### 4、overflow属性：
`overflow` 属性的属性值可以是：
- `auto` ：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
- `visible` ：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
- `hidden` ：不显示超过对象尺寸的内容。
@@ -533,6 +539,7 @@ position定位分为绝对定位和相对定位：
```
效果：
@@ -554,11 +561,13 @@ position定位分为绝对定位和相对定位：
## 鼠标的属性cursor
鼠标的属性`cursor` 有以下几个属性值：
- `auto` ：默认值。浏览器根据当前情况自动确定鼠标光标类型。
- `pointer` ：
- `hand` ：和`pointer` 的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：
``` html
cursor: pointer;
@@ -566,23 +575,24 @@ p:hover{
```
另外还有以下的属性：（不用记，需要的时候查一下就行了）
all-scroll :
col-resize : 两 个箭头，中间由竖线分隔开 的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair :
default :
hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move : 十字箭头光标。用于标示对象可被移动。
help : 带有问号标记的箭头。用于标示有帮助信息存在。
no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed : 禁止标记( 一个被斜线贯穿的圆圈) 光标。用于标示请求的操作不允许被执行。
progress : 行。
row-resize : 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text :
vertical-text : 用于标示可编辑的垂直 文本的光标。通常是大写字母 I 旋转90度 的形状。
wait : 的形状。
*-resize : 对象可被改变尺寸方向的箭头光标 。
w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ) :
- all-scroll 上下 左右四 个箭头，中间有一个圆点 的光标。用于标示页面可以向上下左右任何方向滚动。
- col-resize :
- crosshair :
- default 客户端平台的默认光标。通常是一个箭头。
- hand 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
- move 十字箭头光标。用于标示对象可被移动。
- help 带有问号标记的箭头。用于标示有帮助信息存在。
- no-drop 带有 一个被斜线贯穿的圆圈的手形 光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
- not-allowed :
- progress 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
- row-resize :
- text : 水平 文本的光标。通常是大写字母 I 的形状。
- vertical-text :
- wait 程序忙用户需要等待的光标。通常是沙漏或手表的形状 。
- *-resize :
- w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
- url ( url ) :
## 滤镜
@@ -623,7 +633,7 @@ url ( url ) :
## 导航栏的制作（本段内容忽略）
## 导航栏的制作（本段内容请 忽略）
现在， ， ：
qianguyihao