知识点
- 文本属性：font-*
- 文本属性连写:font
- 字体：font-family
- 文本修饰：text-decoration
文本属性
| 属性 | 意义 |
|---|---|
| font-size:16px; | 文字大小 |
| font-weight: 700 ; | 文字粗细，值从100-900，不推荐使用font-weight:bold;
|
| font-family:微软雅黑; | 文本的字体 |
| font-style: normal / italic; | normal 默认值 italic 斜体 |
| line-height: | 行高 |
div{
font-size: 16px;
font-weight: 700;
font-family: 微软雅黑;
font-style: italic;
line-height: 100px;
}
文本属性连写
font: font-style font-weight font-size/line-height font-family;
div{
font:normal 100 18px/40px 微软雅黑;
}
注意：
font:后边写属性的值。一定按照书写顺序。
文本属性连写文字大小和字体为必写项。
字体：font-family
- 直接写中文名称。
div{
font-family: 微软雅黑;
}
- 写字体的英文名称。
div{
font-family: microsoft yahei;
}
- unicode 编码
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | microsoft yahei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
文本修饰
text-decoration: none | underline | line-through
设置无线、下划线和中划线。
注意：常见的给a标签去除下划线，就是使用此属性。
浏览器控制台查看unicode编码
-
练习
练习案例效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.content{
width: 800px;
margin: 0 auto;
}
div.content h1{
font: 28px microsoft yahei;
text-align: center;
}
div.content div.box{
text-align: center;
}
.time,.news{
font-size: 15px;
}
.time{
color: rgb(180,180,180);
}
.news{
color:#990000;
}
.box input[type=text]{/*属性选择器*/
color: red;
}
.box input[type=button]{
color: green;
font-weight: 700;
}
.content p{
text-indent: 2em;
line-height: 24px;
}
.content p span{
color: blue;
}
</style>
</head>
<body>
<div class="content">
<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div class="box">
<span class="time">2014年07月16日20:11 </span>
<span class="news">新浪体育 评论中大奖（11人参与）</span>
<span><a href="">收藏本文</a> </span>
<input type="text" placeholder="请输入查询条件">
<input type="button" value="查询">
</div>
<hr/>
<p>新浪体育讯 7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
<p>据记者多方了解的情况，李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
<p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>
</div>
</body>
</html>
