字体
CSS 字体（Font）属性用于定义字体采用字体系列（例如，宋体，黑体等），大小，粗细和文字的样式（如斜体等）。
字体系列
字体的系列使用的是font-family属性定义
选择器{
font-family: "字体样式"
}
/* 例子1：比如单一 字体 如果是汉字以及英文中间有空格就需要有双引号*/
p{
font-family:"微软雅黑"
}
/* 例子2：也可以定义几个字体系列，其按照顺序依次显示如果某一个系统支持显示后面的就不在显示 */
p{
font-family:"Microsoft YaHei",tahoma,"Hiragino Sans GB"
}
注意：
- 如果后面又多个字体，那么字体之间必须使用英文状态下的逗号隔开。如何有汉字或者英文中间有空格隔开的多个单词那就需要加引号
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
- 不过一般对会通过
body标签进行设置字体，保证统一，如果有个别需要则再依次定义：body{ font-family: “Microsoft YaHei”,tahoma,arial,“Hiragino Sans GB”}
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
body{
font-family: 宋体;
}
span{
font-family: "Microsoft YaHei";
}
</style>
</head>
<body>
<p>
黑龙石涛那是比自己等人高出一代人的传奇人物，<span>黑龙吐光，龙角暗殇，石破苍炎，涛涌血魂。</span>竟然是这个老家伙，几人听说过此人，不过此人已经十年没有出现江湖，最近一次出现的地方是石岗崖，然后再无消息。
</p>
</body>
</html>
字体大小
CSS使用font-size属性定义字体大小。
选择器{
font-size: 数px ; /* px 是字体的单元 */
}
px(像素)大小是网页常用的单位，比如谷歌浏览器默认文字大小是16px，而其它的浏览器是可能就不是16px，所以尽量明确值大小，所以不要使用默认大小。
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
body{
font-size: 16px;
}
span{
font-size: 25px;
}
</style>
</head>
<body>
<p>
黑龙石涛那是比自己等人高出一代人的传奇人物，<span>黑龙吐光，龙角暗殇，石破苍炎，涛涌血魂。</span>竟然是这个老家伙，几人听说过此人，不过此人已经十年没有出现江湖，最近一次出现的地方是石岗崖，然后再无消息。
</p>
</body>
</html>
字体粗细
CSS使用font-weight属性设置问题字体的粗细
选择器{
font-weight: normal | bold | bolder | lighter | number
}
现在解释参数：
- normal：正常字体。相当于number为400。声明此值将取消之前任何设置。
- bold：粗体。相当于number为700，也相当于b或strong标签的使用。
- bolder： IE5+ 支持的特粗体
- lighger： IE5+ 支持的细体
- number： IE5+ 支持 数字有100，200，300，400，500，600，700，800，900。不过最常用的是400和700。一般的时候也会用数字，毕竟数字写起来方便。
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
body{
font-weight: normal;
}
span{
font-weight: 700;
}
</style>
</head>
<body>
<p>
黑龙石涛那是比自己等人高出一代人的传奇人物，<span>黑龙吐光，龙角暗殇，石破苍炎，涛涌血魂。</span>竟然是这个老家伙，<strong>几人听说过此人</strong>，不过此人已经十年没有出现江湖，最近一次出现的地方是石岗崖，然后再无消息。
</p>
</body>
</html>
字体样式
CSS使用font-style属性设置文本的风格。
选择器{
/*italic和oblique 都是斜体 */
font-style:normal | italic |oblique
}
- normal： 标准字体演示，一般浏览器默认font-style: normal.
- 斜体
- italic：这个是如果字体如果支持斜体就启动斜体模式，如果不支持就无效果。
- oblique：设置字体斜体，无论使用的字体是否支持斜体都强制斜体。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
body{
font-style: normal;
}
span{
font-weight: 700;
font-style: oblique;
}
strong{
font-style: italic;
}
</style>
</head>
<body>
<p>
黑龙石涛那是比自己等人高出一代人的传奇人物，<span>黑龙吐光，龙角暗殇，石破苍炎，涛涌血魂。</span>竟然是这个老家伙，<strong>几人听说过此人</strong>，不过此人已经十年没有出现江湖，最近一次出现的地方是石岗崖，然后再无消息。
</p>
</body>
</html>
复合写法
如果设置字体的话：
选择器{
font-family: 文字字体;
font-size: 字体大小;
font-style: 斜体还是正常显示;
font-weight: 粗体还是细体;
}
这样写的话有点琐碎，设置有点麻烦，可以使用font写复合方式
选择器{
/* 四个属性的顺序不能改变 */
font: font-style属性 font-weight属性 font-size属性 font-family属性
}
也就是再font属性后面依次写出四个属性即可。
-
使用font属性时，必须按照上面语法个数顺序写，而且
不能修改顺序,并且各个属性间以空格隔开。 -
不需要设置的属性可以省略（省略后是默认值），但是
必须保留font-size和font-family属性，否则属性将不起作用。意思就是前面两个可以都写都不写，以及写其中一个，但是后面两个必须有。
举例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
body{
font-family: "宋体";
font-style: normal;
font-weight:400;
font-size: 16px;
}
#t1{
font-style: italic;
font-weight: 700;
font-size: 22px;
font-family: "宋体";
}
#t2{
font: italic 700 22px "宋体";
}
</style>
</head>
<body>
<p>
黑龙石涛那是比自己等人高出一代人的传奇人物，<span id="t1">黑龙吐光，龙角暗殇，石破苍炎，涛涌血魂。</span>竟然是这个老家伙，<span id="t2">几人听说过此人</span>，不过此人已经十年没有出现江湖，最近一次出现的地方是石岗崖，然后再无消息。
</p>
</body>
</html>
文本
CSS 文本（text）属性可定义文本的外观（比如文本颜色等），文本对齐方式，文本缩进，以及行间距等。
文本颜色
通过color属性用于定义文本的颜色。
选择器{
color:颜色
}
其实颜色有三种表示方式：
| 颜色表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，greed等颜色 |
| 十六进制 | #FF0000，#FF6600等 |
| RGB代码 | rgb(255,0,0)等 |
-
预定义的颜色值： 这个是是英语，所以不用解释
-
十六进制：
理解这个首先需要值得光学的三原色，而这个十六进制也是根据这个三原色进行呈现的，需要简单看一张表：
red greeb blue 00----ff 00----ff 00----ff 所有如果用十六进制显示一个红色：ff0000.
-
RGB代码：
其实这个和十六进制就是一个数字的显示不同而已：
red greeb blue 0—255 0–255 0—255
黑龙石涛那是比自己等人高出一代人的传奇人物，黑龙吐光，龙角暗殇，石破苍炎，涛涌血魂。竟然是这个老家伙，几人听说过此人，不过此人已经十年没有出现江湖，最近一次出现的地方是石岗崖，然后再无消息。
~~~
对齐文本
通过text-align属性设置元素内文本内容的水平对齐方式。
选择器{
text-align: left | right | center
}
- left : 左对齐这个是默认值
- right：右对齐。
- center： 居中对齐
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
h2{
text-align: center;
}
#t1{
text-align: left;
}
#t2{
text-align: right;
}
</style>
</head>
<body>
<p>
<h2>《丑杀手》</h2>
<p id="t1"> 黑龙石涛那是比自己等人高出一代人的传奇人物,黑龙吐光，龙角暗殇,石破苍炎，涛涌血魂。</p>
<p id="t2"> 竟然是这个老家伙，几人听说过此人，不过此人已经十年没有出现江湖，最近一次出现的地方是石岗崖，然后再无消息。</p>
</body>
</html>
装饰文本
这个说实话看名字有点懵，所以先看说明，然后演示就理解。
通过css-decoration属性添加到文本的修饰，可以为文本添加下划线，删除线，上划线等。
选择器{
text-decoration: none | underline | overline | line-through
}
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰线，最常用。 |
| underline | 下划线。（其中a标签自带下划线）常用的 |
| overline | 上划线，几乎不用 |
| line-through | 删除线。不常用 |
演示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
h2{
text-decoration: none;
}
#t1{
text-decoration:underline;
}
#t2{
text-decoration:overline;
}
#t3{
text-decoration:line-through;
}
</style>
</head>
<body>
<p>
<h2>《丑杀手》</h2>
<p id="t1"> 黑龙石涛那是比自己等人高出一代人的传奇人物,黑龙吐光，龙角暗殇,石破苍炎，涛涌血魂。</p>
<p id="t2"> 竟然是这个老家伙，几人听说过此人，不过此人已经十年没有出现江湖。</p>
<p id="t3"> 最近一次出现的地方是石岗崖，然后再无消息。</p>
</body>
</html>
文本缩进
其实很多文章都会第一行有缩进，所以文本自己有这个属性。
通过text-indent来设置文本的第一行的缩进，通常是将段落的首行缩进。
选择器{
text-indent: 数字px | 数字 em
}
px是像素，这个很容易理解，然后这个em可能需要解释一下。
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，就会按照父元素的1个文字大小。
演示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
#t1{
text-indent:100px;
}
#t2{
text-indent:2em;
}
</style>
</head>
<body>
<p>
<p id="t1"> 黑龙石涛那是比自己等人高出一代人的传奇人物,黑龙吐光，龙角暗殇,石破苍炎，涛涌血魂。</p>
<p id="t2"> 竟然是这个老家伙，几人听说过此人，不过此人已经十年没有出现江湖。</p>
<p>最近一次出现的地方是石岗崖，然后再无消息</p>
</body>
</html>
行间距
通过text-height设置行间的距离（这个其实是行高）。可以控制行与行之间的距离。
看图：
其实行间距包括字高以及上线两个距离。
选择器{
line-height: 数字px;| 数字 /* 这个数字一般只是大于字的高度，不然文字会重叠，毕竟行间距还有上下间距 */
}
px前面说过， 如果直接是数字的话，那就是表示：此数字会与当前的字体尺寸相乘来设置行间距。
当然还使用%号，表示这个文字占这个行间距的高度比例。
演示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
#t1{
line-height: 1;
}
#t2{
line-height:26px;
}
#t3{
line-height:1.5;
}
</style>
</head>
<body>
<p>
<p id="t1">离开片刻卷轴慢慢的化成粉末，最后消失不见。反杀说白了就是护卫而已，也就会暗中保护，不过这种顾主的理由让仇囚诧异不已，竟然找杀手保护自己，不会是个局让自己入，最后死的是自己吧？仇囚身影在夜幕上掠过，心中的想法也悄然消失，因为是景山开口的，那就绝对错不了。</p>
<p id="t2">每个地方都有这样的江湖势力，像是帝王一般君临一方沃土，而在这座城的帝王就是胡家。半月古城三千流水，胡家独占近七，可见其威望或者说是霸气。</p>
<p id="t3">半月古城为中心，方圆千里都是胡家统治的势力范围。城门通道直指胡家堡，一般城门大道都是避开直通关键之地，但是胡家却不依然。因为在世上刚动胡家的人还真是难找。街道宽广面如玉石，靠近其八丈竟然没有任何建筑。高达三丈，朱漆大门，门檐外吐，足有半间房屋，左右各站四个壮汉。虎目外射，头部一转看着出现一个头顶带黑纱斗笠，且腰间配有一把长剑的灰衣人。 </p>
</body>
</html>
补充
前面聊了一个font的复合写法，其实这个写法里面也包含了行高，只不过其格式如下：
选择器{
/* 四个属性的顺序不能改变 */
font: font-style属性 font-weight属性/行高属性 font-size属性 font-family属性
}
简单的演示一下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的文档</title>
<style type="text/css">
#id1{
background-color: #d10000;
line-height: 100px;
font-size: 16px;
font-family: "Microsoft YaHei;
}
#id2{
background-color: #d10000;
font: 16px/100px "Microsoft YaHei";
}
</style>
</head>
<body>
<div id="id1">
line-height的写法
</div>
<div id="id2">
font 带/的写法
</div>
</body>
</html>
需要注意一点如果使用了font还想用line-height定义行高，就需要将line-height放在font后面，不然line-height的值会被覆盖掉。
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
