1.10.1 字体大小设置font-size （1em=16px）
其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
可选参数值：xx-small | x-small | small | medium | large | x-large |xx-large|smaller | larger
一般页面中：12px 14px 12cm
1em
使用font-family设置字体时，需要注意以下几点：
Ø 各种字体之间必须使用英文状态下的逗号隔开。
Ø 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
Ø 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
Ø 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
10.3 字体系列
衬线体：字体有一些修饰的东西，让字体变的美观。
非衬线体：没有修饰。
font-famliy: tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
v 前面的字体都查找失败后，在系统中找一种sans-serif字体作为默认字体。
注意顺序，如果把sans-serif放前面去，后面的都失效了。
1.10.4 设置字体颜色
通过color属性可以设置字体的颜色。
Color: red;
建议最好使用十六进制的方式来写
1.10.5 设置字符的间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
可以设置连续汉字（汉字间没有空格）的间距，也可以设置英文字母之间的间距。
letter-spacing: 10px;
1.10.6 设置单词间距
word-spacing属性用于定义英文单词之间的间距。也可以设置汉字中出现断字的距离（比如：文字间出现空格等）。
1.10.7 玩转行高
行高的CSS定义：行高是两行文本基线的距离。实际上就是：文本的高度+一倍的行距。
一行文本的高度正好是： 0.5倍行距+ 文本的高度 + 0.5倍行距
四线：
文字顶端的线，称为顶线。
中线：穿过x中心的线为中线。
小写X字母底部的线为基线。
文字底部的线为底线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>27行高的练习</title>
<style>
* {
padding: 0; margin: 0;
}
p.demo {
height: 100px; /*这里的height是块状标签p的高度*/
line-height: 100px; /*这里的height是块状标签p中文本的行高的高度，包括行距和文本自身的高度*/
text-align: center;
font-size: 40px;
background-color: silver;
}
.wrap {
font: 16px "黑体";
background-color: green;
}
.wrap p {
background-color: red;
/*font: 20px/1.5em "宋体"; */ /* 此时行高是：30px= 20*1.5 */
/*font: 20px/1.5 "宋体"; */
font: 20px/40px "宋体"; /*
20px 是字体大小，40px是行高大小*/
font:20px/40px 等于 font-size:20px;line-height:40px; 那么此时行距是40-20=20px
但这么写有时候兼容性不太好，虽然第二种写法代码量比较多，但比较稳定，建议还是用第二种 写法
}
</style>
</head>
<body>
<p class="demo">
传智播客前端与移动开发学院
</p>
<div class="wrap">
<div>我是父div的文本内容</div>
<p>
我是子段落标签的文本
</p>
我是父div的文本内容
</div>
</body>
</html>
1.10.8 text-decoration:文本装饰
text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：
<s>删除线</s>
none：没有装饰（正常文本默认值）。
underline：下划线。
overline：上划线。
line-through：删除线
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent属性用于设置段落首行文本的缩进，只能设置于块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
Normal：正常的显示，如果宽度不够进行折行显示。
Nowrap：即使超过盒子的宽度，文本也不进行换行显示。
Pre：写html代码的时候是什么样式的，显示就显示成什么样的。
关于自动换行的处理
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>自动换行的处理</title>
<style>
div {
border: 1pxsolid red;
background-color:blue;
width: 100px;
height: 400px;
color: #fff;
/*word-break:break-all; */ /*可以把一个单词放到两行中，充分利用行的空间*/
word-break:keep-all;
}
</style>
</head>
<body>
<div>
I am itcast teacher theather theather theather
http://www.itcast.cn/i/id/ljljljj
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
