（一）CSS属性——文本属性、段落属性
1.color:修饰字体颜色，属性值可以是颜色名称（red/blue/green/gold，建议写常见的名称）、十六进制、rgb值、rgba值
2.font-size：修饰字体的大小，属性值常为数值加单位，单位px/em，
注意如果字体大小不是0，那么单位必须加，如果是0，可以省略单位，字体默认的大小16px，常用12px
3.font-weight：修饰字体粗细，属性值为normal（默认，不加粗）、bold（加粗）
4.font-style：修饰字体是否倾斜，属性值为normal(默认，不倾斜)、oblique（倾斜）、italic（倾斜）
5.font-family：修饰字体类型，
注意事项
a.fong-family后面可以跟多个字体类型的值，中间用逗号分隔font-family:"隶书","楷体","黑体"，Arial，浏览器在应用字体类型时，从第一个开始寻找，如果 第一种类型即应用否则继续往下寻找，直到最后，如果都没有则应用默认类型"宋体"
b.如果字体类型为中文或者是由空格，那么需要将字体类型用双引号抱起来
6.字体修饰的复合形式font:值1 值2 值3 值4…
注意
a.font的复合形式，后面的值是由顺序要求的，顺序为font-style倾斜 font-weight粗细 font-size/line height大小/行高 font-family类型
b.属性值可以全部写上，也可以写一部分，没写的就用默认值，但是一定要注意在写复合形式时字体的大小和类型是不可以省略
c.如果既有复合形式font，也有单一形式，那么单一形式一定要写在下面
7.文本阴影text-shadow:值1 值2 值3 值4;
值1：代表阴影水平方向上的位移距离，可以是正整数（向右移）、也可以是负整数（向左移）
值2：代表阴影垂直方向上的位移距离，可以是正整数（向下移）、也可以是负整数（向上移）
值3：代表阴影半径
值4：代表阴影颜色
8.文本修饰text-decoration，属性值为underline、overline、line-through、none
underline：下划线
overline：上划线
line-through：删除线
none：去掉文本修饰效果
9.word-spacing:修饰英文单词间的距离，属性值可以是像素值，也可以是em
10.letter-spacing:修饰单词内部字符间的距离和汉字间的距离，属性值可以是像素值，也可以是em
11.text-transform：修饰英文字母大小写，属性值为capitalize(首字母大写)、uppercase(所有字母大写)、lowercase(所有字母小写)
12.line-height:设置行高，属性值可以是像素值、em、百分比
如果是单行文本，那么要让该行文本在垂直方向上居中，可以让行高等于高度
如果是多行文本，那么要让文本将容器平分，可以让行高等于高度除以行数
13.text-align:设置文本相对于容器的水平对齐方式，使用对象为块元素和行内块元素，不可以是行内元素
14.text-indent:设置元素的首行缩进效果，属性值为像素值、em、负数值
15.white-space：normal、pre、nowrap、pre-wrap、pre-line
normal:合并空格、换行
pre:不合并空格、不换行
nowrap:合并空格、不换行
pre-wrap:不合并空格、换行
pre-line：合并空格、换行
16.overflow：文本溢出后的处理方式
visible：默认，显示溢出文本
hidden：隐藏溢出文本
scroll：当文本溢出时出现滚动条，通过拖动滚动条，可以调节内容显示部位，注意即使内容没有溢出，也会出现滚动条所在的灰色边框
auto：自动判断文本是否溢出，如果没有溢出，那么不显示滚动条，如果有溢出，显示滚动条
overflow-x:文本横向溢出的处理方法
overflow-y：文本纵向溢出的处理方法
text-overflow：处理溢出的内容以什么形式显示，可以是clip、ellipsis（省略号）
（二）应用：让溢出文本以省略号形式显示
第一步：不换行white-space：pre
第二步：隐藏溢出文本overflow：hidden
第三步：处理溢出文本的显示显示：text-overflow：ellipsis
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
width: 130px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>1688阿里巴巴批发网</li>
<li>首页从原料,生产,加工一系列服务.</li>
<li>找阿里巴巴,全球领先采购批发平台.阿里巴巴,采购批发找1688阿里巴巴批发网首页,汇聚更多商业资讯</li>
</ul>
</body>
（三）display:用于定义元素在布局时的显示类型，常用值为block/inline/inline-block/none;
1.HTML元素的分类：块级元素、行内元素、行内块元素
块级元素：display：block;
行内元素：display：inline
行内块元素：display：inline-block
display:none隐藏HTML元素,改元素在文档中的位置会丢失
2.应用：下拉菜单
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
ul{
list-style: none;
width: 120px;
}
a{
display: block;
text-decoration: none;
color: #000;
}
li>a{
background: #ccc;
height: 35px;
line-height: 35px;
}
div{
display: none;
}
li:hover div{
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">吉林省</a>
<div>
<a href="#">长春市</a>
<a href="#">吉林市</a>
<a href="#">四平市</a>
</div>
</li>
<li>
<a href="#">辽宁省</a>
<div>
<a href="#">沈阳市</a>
<a href="#">大连市</a>
<a href="#">盘锦市</a>
</div>
</li>
<li>
<a href="#">黑龙江省</a>
<div>
<a href="#">哈尔滨市</a>
<a href="#">齐齐哈尔市</a>
<a href="#">黑河市</a>
</div>
</li>
</ul>
</body>
3.应用：横向导航菜单
<head>
<meta charset="UTF-8">
<title>横向导航菜单</title>
<style type="text/css">
#nav{
width: 800px;
height: 40px;
background: green;
line-height: 40px;
font-size: 0;
}
a{
color: #fff;
text-decoration: none;
width: 100px;
display: inline-block;
font-size: 14px;
text-align: center;
}
a:hover{
background: pink;
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">最新电影</a>
<a href="#">最新电影</a>
<a href="#">最新电影</a>
<a href="#">最新电影</a>
<a href="#">最新电影</a>
<a href="#">最新电影</a>
<a href="#">最新电影</a>
<a href="#">最新电影</a>
</div>
</body>
注意：行内块元素间右空隙，处理该空隙的方法
1.将HTML代码写在同一行上（不建议）
2.将行内块元素所在的父元素font-size：0，对于行内块元素自身在设置单独的font-size
4.应用：使用行内块元素的特性进行页面布局
<head>
<meta charset="UTF-8">
<title>效果测试页面</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 800px;
margin: 0 auto;
}
#header{
height: 80px;
background: red;
}
#nav{
height: 40px;
background: green;
}
#main{
height: 400px;
background: blue;
}
.left{
width: 400px;
height: 400px;
background: yellow;
float: left;
}
.right{
width: 400px;
height: 400px;
background: gold;
float: left;
}
#footer{
height: 60px;
background: pink;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div id="footer"></div>
</body>
