一、CSS字体属性

1.CSS字体系列

CSS 使用 font-family 属性定义文本的字体系列。

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开；
一般情况下,如果有空格隔开的多个单词组成的字体,加引号；
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示；
最常见的几个字体：
body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

2.CSS字体大小

CSS 使用 font-size 属性定义字体大小。

p {
    font-size: 20px;
}

px（像素）大小是我们网页的最常用的单位；
谷歌浏览器默认的文字大小为16px；
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小；
可以给 body 指定整个页面文字的大小；

3.CSS字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p {
    font-weight: bold;
}

学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗；
实际开发时，我们更喜欢用数字表示粗细。

4.CSS字体样式

CSS 使用 font-style 属性设置文本的风格。

p {
    font-style: normal;
}

平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

5.CSS字体复合属性

字体属性可以把以上文字样式综合来写。

body {
    font: font-style font-weight font-size/line-height font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开；
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用；

二、CSS文本属性

1.CSS文本颜色

color 属性用于定义文本的颜色。

div {
    color: red;
}

开发中最常用的是十六进制。

2.CSS对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

div {
    text-align: center;
}

3.CSS装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {
    text-decoration:underline;
}

4.CSS文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div {
    text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {
    text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

5.CSS行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

p {
    line-height: 26px;
}

行间距

单行文字垂直居中：
CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.
解决方案: 让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中
简单理解: 行高的上空隙和下空隙把文字挤到中间了. 如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下

6.vertical-align 属性应用

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : baseline | top | middle | bottom
baseline默认，元素放置在父元素的基线上；
top把元素的顶端与行中最高元素的顶端对齐；
middle把此元素放置在父元素的中部；
bottom把元素的顶端与行中最低的元素的顶端对齐；

vertical-align

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1. 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2. 把图片转换为块级元素 display: block;

7.溢出的文字省略号显示

1. 单行文本溢出显示省略号-必须满足三个条件

1. 先强制一行内显示文本
   white-space: nowrap; （ 默认 normal 自动换行）
2. 超出的部分隐藏
   overflow: hidden;
3. 文字用省略号替代超出的部分
   text-overflow: ellipsis;

2. 多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
弹性伸缩盒子模型显示
display: -webkit-box;
限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;

多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）。更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

三、CSS背景

1.CSS背景颜色

background-color 属性定义了元素的背景颜色。
background-color:颜色值;
一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

2.CSS背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
background-image : none | url (url);

注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

3.CSS背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
repeat：背景图像在纵向和横向上平铺（默认的）；
no-repeat：背景图像不平铺；
repeat-x：背景图像在横向上平铺；
repeat-y：背景图像在纵向上平铺；

4.CSS背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。
background-position: x y;
参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

1）参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2）参数是精确单位
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3）参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5.CSS背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果。
background-attachment : scroll | fixed;
scroll：背景图像随对象内容滚动；
fixed：背景图像固定；

5.CSS背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.
当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

div {
    background: transparent url(image.jpg) repeat-y fixed top ;
}

这是实际开发中，我们更提倡的写法。

6.CSS背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

div {
    background: rgba(0, 0, 0, 0.3);
}

最后一个参数是 alpha 透明度，取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

四、CSS界面样式

1.更改用户的鼠标样式

li {
    cursor: pointer;
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	箭头（默认）
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.表单轮廓

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {
    outline: none; 
}

3.防止表单域拖拽

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{ 
    resize: none;
}