整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天说了CSS字体属性的大小，font-family, 今天我们来一起学习下字体属性的字体粗细 font-weight
还是使用昨天的那首诗，让诗句中的最后一句显示粗体，看下效果:
可以看到最后一句显示粗体了，我们来查看下对应的代码:
<!DOCTYPE html>
<html lang="en">
<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>CSS字体属性之字体粗细和样式</title>
<style>
.bold {
font-weight:bold;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有，把酒问青天</p>
<p>不知天上宫阙，今夕是何年</p>
<p>我欲乘风归去，又恐琼楼玉宇</p>
<p>高处不胜寒，起舞弄清影，何似在人间。</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全</p>
<p class="bold">但愿人长久，千里共婵娟。</p>
</body>
</html>
字体粗细中的参数包括: normal | bold | bolder | lighter | number(自定义)
我们来试试lighter和number自定义吧
可以看到红框的字体都已经设置好了，对应的代码为:
<!DOCTYPE html>
<html lang="en">
<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>CSS字体属性之字体粗细和样式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p class="lighter">明月几时有，把酒问青天</p>
<p>不知天上宫阙，今夕是何年</p>
<p class="number">我欲乘风归去，又恐琼楼玉宇</p>
<p>高处不胜寒，起舞弄清影，何似在人间。</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全</p>
<p class="bold">但愿人长久，千里共婵娟。</p>
</body>
</html>
这里需要记住的一点，number自定义数字后不需要加上px
那么是否可以对标题的字体进行粗细设置呢？
答案是可以的，一起来看下
可以看到标题中的字体变为正常的了，对应的代码如下:
<!DOCTYPE html>
<html lang="en">
<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>CSS字体属性之字体粗细和样式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
h2 {
font-weight: normal;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p class="lighter">明月几时有，把酒问青天</p>
<p>不知天上宫阙，今夕是何年</p>
<p class="number">我欲乘风归去，又恐琼楼玉宇</p>
<p>高处不胜寒，起舞弄清影，何似在人间。</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全</p>
<p class="bold">但愿人长久，千里共婵娟。</p>
</body>
</html>
加上了对h2的字体设置
好的，今天就是我们对字体粗细的学习，大家加油，十一马上就要结束了，88
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
文字样式针对的是“文字本身”，而文本样式针对的是“整个段落”。
一、常用的文本样式属性
1、text-indent 首行缩进
2、text-align 水平对齐
3、text-decoration 文本修饰
4、text-transform 大小写转换
5、line-height 行高
6、letter-spacing 字母间距
7、word-spacing 词间距
二、首行缩进 text-indent
语法：
text-indent:像素值;举例：
tml标签中H标签又称标题标签。在建网站中会使用到，不到的段落格式需要使用不同的标签。标签可以反映一段文字的大小、颜色、缩写、换行、间距等等内容，根据全文的实际情况灵活应用标签，特别是HTML标题标签将对网站文章的质量起到非常重要的作用。我们围绕着这个标签详细讲一下如何正确使用标题标签。
HTML标题标签的种类：
HTML标题标签总共有6个，分别为：H1,H2,H3,H4,H5,H6。
h1代表最大，它的重要性最高，字体也最大。
h6代表最小，字体最小，重要性也最小。
h1，h2，h3，h4，h5，h6，作为HTML标题标签，显示的文字样式为粗体，与html粗体标签效果一样。
HTML标题标签的重要性：
H1-H6以重要性递减，它可以让页面的层级关系更加清晰。
示例： <h1>一级标题</h1> <p>段落</p> <div> <h2>二级标题</h2> <p>...</p> <div> <h3>三级标题</h3> <p>...</p> <div> <h4>四级标题</h4> <p>...</p> </div> </div> </div>
根据文章实际的段落意义正确使用代表不同层级关系的HTML标题标签，浏览器才能通过HTML解析出与本意一致的表达效果。
*请认真填写需求信息，我们会在24小时内与您取得联系。
