目录
1. 单位
px像素就是指屏幕上的一个点，可以简单的这样来理解，比如说我们设置当前的元素宽度是一百个像素宽，那么就设置成100px就可以；
em被称为文本字符的单位。1em就是指个字符，比如说我们要设置行高，两个字符的行高，那么我们就把这个属性的值设置成2em就可以了，它是自动的适应用户所使用的字体的，比如说当时用户所使用的字体，它的字号是12个像素大小，那么2em就是12x2=24个像素大小
百分比是一个租对的概念，对于htm文档来说，它可以做成这样的一个DOM树，来表示当前文档的元素的个继承关系，最上面是文档的根节点，body节点包含两个div元素，右边的div元素包含两个同级元素h1和p，那么在p、h1上一层的div就称为父层，下面的两个元素称为子层，如果设置了父层元素大小而没有设置子层的元素大小，则子层会默认的继承父层的大小，若div设为12，则h1默认值也为12，若h1设为120%即为12*120%
2. 颜色
3. 文本
3.1 字符间距letter-spacing
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1{
letter-spacing: 2px;
}
h2{
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>标题内容</h1>
<h2>文本段落主要内容</h2>
</body>
</html>
字符间距可以是一个负数，由h2可以看出每个字符之间就有一个重叠的效果
3.2 行高line-height
3.2.1 基本概念
行高不是行距，行高指的是文本行的基线间的距离，即每行文字下基线与下一行文字的下基线之间距离（或者是每行文字上基线与下一行文字的上基线之间距离）
这里用一张图来说明行高与行距的区别：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
font-size: 14px;
/*line-height: 1.5em;*/
line-height: 2em;
}
</style>
</head>
<body>
<!-- 将浏览器窗口拖动得窄一些，可以看到下面文字分多行显示时的行间距效果 -->
<p>
这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。
</p>
</body>
</html>
行高的大小是相对于这个文字的字号大小，字号大小可以用fontsize来设定
3.2.2 行高的应用——居中垂直对齐效果
文字的垂直居中就是它的垂直方向上要在元素内部垂直居中，很多情况下可以采用的line-height的方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#one{
height: 40px;
background-color: #ccc;
font-size: 14px;
}
#two{
height: 40px;
background-color: #ccc;
font-size: 14px;
line-height: 40px;
}
</style>
</head>
<body>
<p id="one">web前端开发课程</p>
<p id="two">web前端开发课程</p>
</body>
</html>
height设置的是段落的高度，即图中灰色部分，lline-height设置于height相同的高度就能达到垂直居中的效果
3.3 对齐方式text-align
text-align设置水平方向上的一个对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{text-align:center}
.date{text-align:right}
.main{text-align:justify}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class="date"> 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。”</p>
</body>
</html>
可以看到标题居中，日期右对齐，段落两边对齐
3.4 装饰线text-decoration
3.4.1 基本用法
装饰线美其实就是在文本上面、中间或下面添加线条
取值是overline的时候，在上面有装饰线；
取值是line-through的时候,在中间有一个删除线的效果;
当取值为underline的时候,在最下面有一个下划线。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{text-decoration:overline}
h2{text-decoration: line-through}
h3{text-decoration: underline}
</style>
</head>
<body>
<h1>标题1文字</h1>
<h2>标题2文字</h2>
<h3>标题3文字</h3>
</body>
</html>
3.4.2 装饰线的应用——去掉超链接下划线
默认的情况下，a标签做出来的超链接是默纵有下划线的，那么当网页上下划线出现的比较多，排版显得比教凌乱的时候，我们就可以采用，将这个属性的取值设置为none，来去掉这个装饰线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a{text-decoration: none}
</style>
</head>
<body>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</body>
</html>
4. 字体
4.1 基本用法
我们可以将所有的关于字体的属性都写在一个font的声明里面，这样可以一次性的定义字体的多方面的样式，当然也可以分开来定义；
font-family定义了三个字体，三个字体的关系是：首先它会找到第一个字体，如果有的话按照这种字体显示，否则按照第二个字体显示，依次类推；
设置字体时用双引号把字体括起来，就是当这个字体名字中间带有空格的情况，否则就可以不加双引号；
对于字体来说我们会在CSS3样式部分再引审出来-种网页字体或者称为网络字体，后面会提到
4.2 font属性简化的使用方法
如果将所有的关于字体的样式，设置在一个font属性里面的时候，他有一个顺序，大概是这样的顺序：
是否斜体粗体，后面可以把字号和行高写在一起，因为它们都取数值类型，它们中间要加一个斜线隔开，最后我们来设置字体
扫一扫
2166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
