文本属性
介绍几个常用的。
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值：none | center | left | right | justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离，单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思，指的就是一行的高度。
字体属性
字体大小
font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。
字体粗细
font-weight表示设置字体的粗细
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
字体系列
font-family
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。
行高 line-height
针对单行文本垂直居中
公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
font-family介绍
使用font-family注意几点：
1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体，都有英语别名，
我们也要知道： 微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字号的百分之多少。
一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，比如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
超链接导航栏案例
直接上代码了
html结构
<div class="nav">
<ul>
<li>
<a href="">路飞学城</a>
</li>
<li>
<a href="">老男孩</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
</ul>
</div>
写好上面的结构代码之后，也就是将我们页面展示的内容显示了，但是我们此时要利用我们学过的知识点来布局页面
首先我们要做导航栏，并排显示元素，第一想 浮动，想到使用浮动之后，一定记得清除浮动元素。
css代码如下:
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
background
白guang特
1、颜色表示法
颜色一共有三种表示方法：单词、rgb表示法、十六进制表示法。
rgb表示法：
rgb：红色 绿色 蓝色 三原色。
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用法：rgb(111,234,123); r、g、b的每个值的取值范围0~255。
十六进制表示法：
所有用#开头的值，都是十六进制的。
用法：#a0a0a0; #112233;可以简写成#123;
2、background-color 属性表示设置背景颜色
用法：
3、background-image 表示设置该元素的背景图片
用法：background-image:url('paper.gif');
4、background-repeat 表示设置该元素的平铺方式
用法：background-repeat:repeat（默认）|repeat-x|repeat-y|no-repeat|inherit;
5、background-position 表示设置背景图片的位置
background-position: x% y%|Xpx Ypx; /*第一个值是水平位置，第二个值是垂直位置*/
6、图片精灵技术
CSS雪碧，即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
CSS 精灵图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？其实就是截取大图一部分显示，而这部分就是一个小图标。
使用精灵图的好处：
1）利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2）CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和；
3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率；
4）更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便；
使用精灵图的不足：
1）CSS精灵图的最大问题是内存使用；
2）拼图维护比较麻烦；
3）使CSS的编写变得困难；
4）CSS精灵图调用的图片不能被打印；
7、应用：我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439，但是设计师给我们的banner图都会比这个大，那么我们可以此属性制作通天banner，如下：background: red url(images/banner.jpg) no-repeat center top;
______________________________________________________________________________
一、文本属性和字体属性（常用的）
1、文本属性
text-align:left|right|center|justify（两端对齐，只适用于英文）; /*对齐方式*/
color:色值; /*文本颜色*/
text-indent:2em; /*首行缩进，建议单位用em*/
text-decoration:none|underline|overline|line-through|inherit;
line-height:高度值;
2、字体属性
font-weight:normal|bold|border|lighter|100~900|inherit; /*100~300没区别*/
font-family:字体;
a、网页中不是所有字体都能显示，因为这个字体要看用户的电脑里面装没装，比如你设置：font-family:”华文彩云”;如果用户电脑里面没有这个字体，那么就会变成宋体 ;
b、为了防止用户电脑里面没有你设置的那个字体，我们通常写多个用逗号隔开的备选字体，如：font-family: "Times New Roman","微软雅黑";备选字体可以有无数个，默认显示第一个，没有安装第一个就显示第二个，以此类推，都没装就显示宋体 ;
c、我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体 ;
d、所有的中文字体，都有英语别名，微软雅黑的英语别名是：”Microsoft YaHei”，宋体的英语别名是：”SimSun”;
e、font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
f、行高可以用百分比，表示字号的百分之多少，也可以用em单位，表示字号的几倍。一般来说，都是大于100%的，因为行高一定要大于字号。例如：
font:12px/200% “宋体”;或者font:12px/2em “宋体”;等价于 font:12px/24px “宋体”;反过来，比如： font:16px/48px “宋体”;等价于 font:16px/300% “宋体”;或者font:16px/3em “宋体”;