3.字体和文本样式
#目标#：能够使用字体和文本相关样式修改元素外观样式
学习路径：
1.字体样式
（1）：字体大小：
属性名：font-size
取值：数字+px
注意点：
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
代码示例：
<style>
p {
font-size:30px;
}
</style>
</head>
<body>
<p>段落文字</p>
（2）：字体粗细：
属性名：font-weight
取值：
*关键字：正常：normal
加粗：bold
*纯数字：100~900的整百数：
正常：400
加粗：700
注意点：
不是所有字体都提供了9中粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多
代码示例：
<style>
p {
font-weight:700;
/* 加粗效果 */
}
h1{
font-weight:400;
/* 不加粗效果 */
}
</style>
</head>
<body>
<p>这是一段文字</p>
<h1>一级标题</h1>
</body>
（3）：字体样式（是否倾斜）：
属性名：font-style
取值：
正常（默认值）：normal
倾斜：italic
代码示例：
<style>
div{
/* 倾斜 */
font-style:italic;
}
em{
/* 正常 */
font-style:normal;
}
</style>
</head>
<body>
<div>正常字体</div>
<em>倾斜字体</em>
<!-- em是可以使字体倾斜的标签 -->
</body>
（4）：字体类型：
属性名:font-family
常见取值：具体字体1，具体字体2，具体字体3，具体字体4，......，字体系列
具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等......
字体系列：sans-serif、serif、monospace等......
渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后文字系列的默认字体
注意点：
如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
***Windows系统默认字体是微软雅黑
***macOS系统默认字体是苹方
代码示例：
<style>
div{
/* 如果用户电脑没有安装楷体，就按照宋体显示 */
/* 如果用户电脑也没有安装宋体，就按照黑体显示 */
/* ，，，，，，*/
/* 如果前面几种字体都没有安装，就按照任意一种非衬线字体系列显示 */
font-family: 楷体,宋体,黑体,微软雅黑,sans-serif;
}
</style>
</head>
<body>
<div>这是一个div标签</div>
</body>
Tips：
样式的层叠问题
>问题：给同一个标签设置了相同的样式，浏览器会如何渲染？
>结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
***css***：层叠样式表
所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
代码示例：
<style>
p{
color: red;
color: skyblue;
}
</style>
</head>
<body>
<p>这是一段的文字</p>
<!-- 这句话将会显示为天蓝色 -->
</body>
（5）：字体类型：font属性连写
属性名：font（复合属性）
取值：(顺序不可以打乱)
font:style weight size family;
省略要求：
只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
代码示例：
<style>
p{
font: italic 500 60px 楷体 ;
font-style: normal;
}
</style>
</head>
<body>
<P>这是p标签</P>
</body>
***注意***：
一个属性冒号后面书写多个值的写法--复合属性
2.文本样式
（1）.文本缩进：
属性名：text-indent
取值：
*数字+px
*数字+em（推荐：1em=当前标签的font-size的大小）
代码示例：
<style>
p{
/* 默认字号的大小为：16px */
/* 首行缩进2个字的大小： */
text-indent: 32px;
/* em:一个字的大小 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>这是一段文字。</p>
</body>
（2）.文本水平对齐方式：
属性名：text-align
取值：
属性值：left 效果：左对齐
属性值：center 效果：居中对齐
属性值：right 效果：右对齐
注意点：
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
*水平居中方法总结 text-align：center*：
text-align：center能让哪些元素水平居中？
1.文本
2.span标签、a标签
3.input标签、img标签
代码示例：
<style>
h1{
text-align: center;
}
body{
text-align: right;
}
</style>
</head>
<body>
<h1>新闻标题</h1>
<img src="./图片.jpg" alt="">
</body>
（3）.文本修饰：
属性名：text-decoration
取值：
属性值：underline 效果：下划线（常用）
属性值：line-through 效果：删除线（不常用）
属性值：overline 效果：上划线（几乎不用）
属性值：none 效果：无装饰线（常用）
注意点：
开发中会使用text-decoration：none；清除a标签默认的下划线
代码示例：
<style>
p{
text-decoration:underline;
}
div{
text-decoration:line-through;
}
h1{
text-decoration:overline;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div>删除线效果</div>
<h1>一级标签</h1>
<a href="#">超链接</a>
</body>
3.line-height行高
作用：控制一行的上下间距
属性名：line-height
取值：
*数字+px
*倍数（当前标签font-size的倍数）
应用：
1.让单行文本垂直居中可以设置line-height：文字父元素高度
2.网页精准布局时，会设置line-height：1 可以取消上下间距
行高与font连写的注意点：
*如果同时设置了行高和font连写，注意覆盖问题
*font：style weight size/line-height family；
#行高=上间距+字体高度+下间距
代码示例：
<style>
p{
/* line-height 32px; */
font: italic 700 32px/2 宋体;
}
div{
line-height:2;
}
</style>
</head>
<body>
<p>这是一段文字</p>
<div>这是一句话</div>
</body>
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
