三、字体和文本样式
目标：能够使用 字体和文本相关样式 修改元素外观样式
学习路径：
1.字体样式
1. 字体大小: font-size
2.字体粗细: font- weight
3.字体样式: font-style
4.字体类型: font- family
5.字体类型: font属性连写
2.文本样式
3. line-height行高
1.1字体大小
★属性名: font-size
★取值: 数字+ px
★注意点:
·谷歌浏览器默认文字大小是16px
·单位需要设置，否则无效
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 30px;
}
</style>
</head>
<body>
<!-- 默认字号是16 -->
<p>段落文字</p>
</body>1.2字体粗细
★属性名：font-weight
★取值：
·关键字：
| 正常 | normal |
| 加粗 | bold |
·纯数字：100~900的整百数：
| 正常 | 400 |
| 加粗 | 700 |
★注意点：
·不是所有字体都提供了九种粗细，因此部分取值页面中无变化
·实际开发中以：正常、加粗两种取值使用最多。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-weight: 700;
}
h1{
font-weight: 400;
font-size: 20px;
}
</style>
</head>
<body>
<div>这是div</div>
<h1>一级标题</h1>
</body>1.3字体样式（是否倾斜）
★属性名：font-style
★取值：
·正常（默认值）：normal
·倾斜：italic
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* 倾斜 */
font-style: italic;
}
em{
/* 正常的，不倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<div>div文字</div>
<em>em</em>
</body>
1431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
