CSS常规属性
CSS3的常规属性
背景属性——background
在css中使用background属性来设置背景，它的值有以下几个：
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明当中。 |
| background-color | 设置的是背景颜色。（颜色名 十六进制 rgb() rgba()） |
| background-image | 设置背景图像，图像默认水平垂直平铺 |
| background-repeat | 设置背景图像平铺或者不平铺 |
| background-attachment | 设置背景图像固定或者随着页面的区域部分滚动 |
| background-position | 设置背景图像的起始位置。 |
【注意】背景图像属性background-image使用的是url函数，而不是herf属性。
background-repeat：它的值有以下几种：
repeat：背景图像将向垂直和水平方向重复。这是默认
repeat-x：只有水平位置会重复背景图像
repeat-y：只有垂直位置会重复背景图像
no-repeat：background-image不会重复
inherit：指定background-repea属性设置应该从父元素继承
body {
background-image: url(./img/test.jpg);
}
默认情况如下图：
它会在水平和垂直方向上同时平铺，即默认值repeat。
repeat-x：
body {
background-image: url(./img/test.jpg);
background-repeat: repeat-x;
}
结果：
repeat-y：
body {
background-image: url(./img/test.jpg);
background-repeat: repeat-y;
}
结果：
no-repeat：（不平铺）
body {
background-image: url(./img/test.jpg);
background-repeat: no-repeat;
}
结果：
background-attachment：页面的固定或者不固定。 它的值有以下几种：
scroll：背景图片随着页面的滚动而滚动，这是默认的。
fixed：背景图片不会随着页面的滚动而滚动
local：背景图片会随着元素内容的滚动而滚动。
bbackground-attachment：scroll：
默认值就是scroll，当滚动页面的滚动条，它会随着页面滚动。
background-attachment：fixed：
这时就不会随着页面滚动。
background-position：背景图片的定位 它的值有三种：方位组合性名词，百分数，px。其中定位有两个值，第一个值代表水平方向，达第二个代表垂直方向。
方位组合性名词：（水平方向的方位名词：left center right 垂直方向的方位名词：top center bottom）
left top 左边的上边 默认值
left center：左边的中间
left bottom：左边的下边
right top：右边的上边
right center：右边的中间
right bottom：右边的下边
center top：中间的上面
center center：中间的中间
center bottom：中间的下面
对应上面的九个方位如下图所示：
当只写一个值时，第二个值默认为center：
body {
background-image: url(./img/test.jpg);
background-repeat: no-repeat;
height: 1500px;
background-position: center;/*水平方向上为center 省略的垂直默认为center*/
}
结果：
百分比值：第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％ 水平居中：50% 50%
px：具体的定位，同样也是两个值，一个代表水平方向的，一个代表垂直方向的。百分比和px单位也是可以混用的，当然这里也可以使用其他的单位，这里我举例使用的是px单位。
综上所述，我们可以把背景的几个属性写在一个属性中：background
注意一下他的书写顺序：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
如下述代码：
body {
height: 1500px;
background: url(img/test.jpg) no-repeat fixed center;/*background属性的简写*/
}
【注意】各个属性值之间使用空格连接。
CSS3中新增的背景属性
多背景
在css3中新增了几个背景属性，其中对background-image进行了进一步的优化，即可以引入多个背景图片，之前的版本之呢个使用一个图片作为背景。
div {
width: 500px;
height: 500px;
background-image: url(img/01.gif),url(img/02.gif);/*同时使用两张图片作为背景，中间使用逗号隔开*/
background-repeat: no-repeat,repeat;/*对于两个背景，分贝使用两个不同的属性值设置 中间使用逗号隔开*/
background-position: right bottom,center;
}
结果：
background-size：指定背景图像的大小
在之前 版本中，背景图像的大小只能由它的实际大侠来决定，该属性则是用于设置背景图像的大小。
同样也是两个值，分别代表宽度和高度，可以使用百分比，也可以使用px单位。
div {
width: 500px;
height: 500px;
background-image: url(img/01.gif);
background-repeat: no-repeat;
background-position:center;
}
.block {
background-size: 70px 70px;
}
background-origin：设置背景绘制的区域
该属性用于设置背景绘制的区域，它的值有以下几种：
border-box：默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box：背景绘制在衬距方框内（剪切成衬距方框）。
content-box： 背景绘制在内容方框内（剪切成内容方框）。
div {
width: 500px;
height: 500px;
margin: 0 auto;
background-color: red;
border: 10px dotted black;
}
默认情况下：
背景颜色的覆盖范围从边框开始，同时也是border-box的效果，默认值。
background-clip: padding-box：
背景绘制区域从内边距开始（内边距的最外层就是边框）
background-clip：content-box：
背景区域的绘制将会从内容部分开始
background-origin：指定背景图像的位置区域
它的值跟上面的background-clip一样，只不过这个属性针对的是背景图像，上面的background-clip针对的是背景绘制的颜色
background-origin：border-box
background-origin：padding-box:（默认值）
background-origin：content-box
【注意】如盒子没有内边距，那么设置了content-box和padding的效果是一样的。
CSS文本属性
在css中，文本也有自己的属性，具体的属性如下图所示：
color：设置的是字体颜色
direction：设置字体文本的方向，它的值有以及几个：
| 值 | 描述 |
|---|---|
| ltr 即left to right | 默认值，从左到右 |
| rtl 同上 | 从右到左 |
| inherit | 规定应该从父元素继承 direction 属性的值。 |
letter-spacing：设置字符间距。该值可以为负数
line-height：设置行高
【注意】设置行高可以增大文本的间距，当设置的行高使用px单位表示具体的值，这个值如果和父元素的高度一样，则可以实现文本的垂直居中，该样式也会经常使用得到，比如：
div {
width: 200px;
height: 200px;
border: 2px solid red;
}
p {
margin: 0;/*p元素默认自带10px的外边距的*/
line-height: 200px;/*当行高为父元素高度时，文本实现水平居中*/
}
结果：
当它的值为一个时：
p {
margin: 0;
line-height: 10;/*当该属性的值为数字时，表示的行高为该数字与当前字体大小的乘积*/
}
上面的行高就是当前字体的大小：16px * 10 = 160px 即行高为160px。
text-align:设置文本的对齐方式，它的值有以下几种：
| 值 | 描述 |
|---|---|
| left | 默认值，文本左对齐 |
| center | 文本居中对齐 |
| right | 文本右对齐 |
| justify | 文本两端对齐 |
【注意】：text-align属性设置的是文本的水平对齐方式。
text-decoration：文本修饰属性，它的值有以下几个：
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。通常适用该值去除超超链接默认的下划线 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
| blink | 定义闪烁的文本 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值 |
text-indent：设置文本缩进 值可以是px或者百分比，如果是百分比表示基于父元素宽度的比例。
text-shadow：设置文本阴影，它有以下几个值：
| 属性 | 描述 |
|---|---|
| h-shadow | 必选的参数，表示水平阴影的值 可以为负数 |
| v-shadow | 必选的参数，表示垂直阴影的值 可以为负数 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色 |
【注意】IE9及其之前的版本是不支持该属性的。
text-transform：文本的变换，大小写的切换，它的值有一下几个：
| 属性 | 描述 |
|---|---|
| none | 默认值 定义小写或者大写用户决定 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义大写 |
| lowercase | 定义小写 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
write-space：用于处理元素中的空白。
| 属性 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到换行标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
word-spacing：设置字符的间距。与letter-spacing不同的是，该属性只对英文有效，对中文字符没有效果的。
p {
word-spacing: 40px;/*该属性只对英文有效，对中文没有效果*/
letter-spacing: 10px;/*该属性既对中文有效，也对英文有效*/
}
CSS字体属性
在css中也有很多字体的批属性，属性及其说明如下：
font-family：规定字体的种类。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
.serif{font-family:"Times New Roman",Times,serif;}/*字体准备至少两种以上，名字较长的需要使用引号包含起来*/
.sansserif{font-family:Arial,Helvetica,sans-serif;}
font-style：规定字体的样式。它有以下几个值：
- normal 正常显示文本
- italic 以斜体字显示的文字
- oblique 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
font-size：设置字体的大小，一般使用绝对单位px。但是也可以使用以下两个类型的大小：
绝对大小：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
font-weight：设置字体的加粗效果，它的值有以下几种：
| 属性 | 描述 |
|---|---|
| normal | 默认值，定义标准的字符 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100 200 300 400 500 600 700 ...... | 具体数值代替字符的粗细程度，normal等同400 bold等同700 |
| inherit | 规定应该从父元素继承字体的粗细。 |
font-variant：设置字体的小型大写
normal：定义标准的字体。
small-caps：定义小型大写
inherit：规定应该从父元素继承font-variant的值。
【注意】
字体默认具有继承性。
字体也是可以简写在font属性当中，同样也要遵循书写顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
例如：
.font{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}
/*以上代码可以简写在一个font属性当中*/
.font{font:italic small-caps bold 12px/1.5em arial,verdana;}
简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值（默认值）。
