CSS字体样式属性调试工具
目标 1、学会CSS字体样式完成对字体的设置。 2、学会emment语法。 3、学会开发人员工具调试代码。
1、font字体
1.1、font-size:大小
作用：font-size用于设置字号语法
p {
font-size: 20px
;
}
单位
1.2、font-family：字体
作用：font-family属性用于设置字体。语法
p {
font-family: "微软雅黑",
"宋体", arial
;
}
注意： 1、当电脑没有第一个字体会下推下一个字体，直到成功。 2、当字体是中文字体、字体名带有空格或特殊字符则加引号。 3、英文字体不需要加引号。Unicode字体 用于早期设置字体使用中文，文件编码不匹配的解决方法之一。 也可以设置成 font-family=“Microsoft Yahei”;
1.3、font-weight：自体粗细
作用：在CSS中设置字体粗细；但是CSS没有语义。提倡：使用数字来控制加粗效果。 语法
p {
font-weight: 700
;
font-weight: bold
;
}
1.4、font-style：字体风格
作用：设置字体风格（如：倾斜），但CSS无语义。属性 语法
.two {
font-style: italic
;
}
案例
em {
font-style: normal
;
}
1.5、综合设置字体样式（重点）
作用：利用font属性对字体进行综合设置。
语法
选择器 {
font-style: normal
;
font-weight: 400
;
font-size: 20px
;
font-family: "book antiqua";
}
案例
.title {
font: italic 700 18px
"楷体" ;
}
注意： 1、各属性必须按照顺序写入，否则无效。 2、该写法必须有font-size（字号）和font-family（字体）否则写法无效。
1.6、font总结
2、CSS外观属性
2.1、color：文本颜色
作用：color属性用于定义文本的颜色。取值方式有以下3种
注意： 1、十六进制：前两个数代表红色；中间两个数代表绿色；后面两个数代表蓝色。 2、十六进制：#FF0000可以缩写为 #F00 ；代表同一种颜色的数字如果一样可以缩写。 3、RGB代码其实是十六进制的变体，16*16=256（别忽略0）。
语法
.color {
color: #ff0000
;
color: #f00
;
color: red
;
color: rgb(255,0,0
);
color: rgb(100%,0%,0%
);
}
2.2、text-align：文本水平对齐方式
作用：text-align用于设置文本内容的水平对齐方式，相当于HTML中的align属性。属性值 注意：是让盒子里的内容居中对齐而不是让盒子居中对齐。语法
.text-align {
text-align: center
;
}
2.3、line-height：行间距
作用：line-height用于设置行高属性值
属性值单位
像素（px）相对值（em）百分比（%）
注意： 1、实际使用中一般使用像素（px）。 2、一般情况下行高比字体大 7、8 像素左右就可以了。
用法
.line-height {
line-height: 26px
;
}
2.4、 text-indent：首行缩进
作用：text-indent 属性用于设置文本首行缩进。属性值单位：一般使用em作为单位，1em 代表文本中一个字符的宽度。语法
.text-indent {
text-indent: 2em
;
}
2.5、text-decoration：文本的装饰
作用：text-decoration通常用于修改链接装饰效果。属性值 语法
.text-decoration {
text-decoration: line-through
;
}
2.6、CSS外观属性总结
小技巧（emment语法的一部分）： 1、.demo + Tab键将生成<div class="demo"></div>。 2、.demo$*3 + Tab键将生成：
<div class=
"demo1"></div>
<div class=
"demo2"></div>
<div class=
"demo3"></div>
实践
HTML
<html>
<head>
<meta charset="utf-8">
<title>体育新闻
</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
</head>
<body>
<h1 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天
</h1>
<div class="nav">
<span class="date">2017年07月16日20:11
</span>
<span class="news">新浪体育 评论中大奖 （11人参与）
</span>
<a href="#" class="collect">收藏本文
</a>
<input type="text" value="请输入查询条件" class="search" />
<input type="button" value="搜索" class="btn">
</div>
<hr />
<p>新浪体育讯 7月16日是燕京啤酒
<em>[微博]
</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>
<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
</p>
<p>据记者多方了解的情况，李虎
<em>[微博]
</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
</p>
<p>这样的情况并没有影响到丽江嘉云昊队
<em>[微博]
</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。
<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。
</strong>
</p>
</body>
</html>
CSS
.title {
font: 400 26px
"微软雅黑";
text-align: center
;
}
.nav {
text-align: center
;
}
.date {
color: #ccc
;
}
.news {
color: #990000
;
}
.collect {
text-decoration: none
;
}
.search {
color: red
;
}
.btn {
color: #008000
;
font-weight: 700
;
}
p {
font-size: 16px
;
line-height: 26px
;
text-indent: 2em
;
}
em {
font-style: normal
;
color:#33A6DB
;
}
