02-字体和文本样式（折叠显示）（img的css操作）（标签居中）-爱代码爱编程
目录
（内容居中显示）text-align：center 可以使 文本 ，span标签、a标签 ，input标签、img标签 居中显示
一：字体
1、字号
- 默认值为16px
- css属性名： font-size：30px
2、字体粗细
- css属性名： font-weight
- 关键字格式：正常normal 加粗bold
- 数字输入格式： 整成400 加粗700
#注意！：后面没有单位符号！
3、 字体样式
- css属性名：font-style
- 正常：normal 倾斜：italic
<style>
div {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<div>div文字</div>
<em>em</em>#效果图：
4、字体系列
- css属性名：font-family
- 直接输入想要字体名称 用 “，” 隔开（英文格式），系统按顺序显示（有的话）
- 如果什么都没有，就选择默认储存的sans-系列字体（所以最后补充这个字体以防万一）
<style>
div {
font-family: 微软雅黑, 黑体, sans-serif;
/* 按顺序选择显示的字体 （如果都没有 就自动选存在的sans-系列的字体 */
/* 使用的间隔单位是 “英文的,” */
}
</style>
</head>
<body>
<div>
这是一个div标签
<!-- 默认的字体是 微软雅黑 -->
</div>5、样式的层叠性问题
- 给同一个标签设置了相同的属性，此时会产生覆盖效果，只生效写在最下面的代码
<style>
p {
color: red;
color: blue;
/* 基于层叠性 后面的代码覆盖前面操作 */
}
</style>
</head>
<body>
<p>pppp</p>#效果图 ：
6、字体font相关属性的连写（简易方法）
- 取值： font：style weight size family （之间用空格分开）
- 省略要求： 只能省略前两个style weight ，按默认值取
#！有顺序的要求！
#代码要求：
二：文本样式
1、文本缩进
- css属性名： text-indent
- 取值：数字 + px 或者 数字 + em （1em = 当前标签的font-size的大小 ）
#对于编辑器代码过长，alt + z 可折叠显示
2、文本（内容）水平对齐方式
- css属性名： text-align
- 取值： left（左对齐） center（居中对齐） right（右对齐）
#img的css操作是在body这个标签下面的，或者说图片的显示是在一个盒子里面，图片的位置就由盒子的位置决定，所以就是修改body这个盒子（好像又不是这样理解...大概吧）
（内容居中显示）text-align：center 可以使 文本 ，span标签、a标签 ，input标签、img标签 居中显示
- #注意要给以上元素的父级标签设置css
<style>
h1 {
text-align: center;
}
body {
text-align: center;
/* 图就是img img就在body的架构里面 */
}
</style>
</head>
<body>
<h1>新闻标题</h1>
<img src="./00-媒体文件/a3.jpg" alt="">
<!-- 父级标签要了解 -->#效果图：
3、文本修饰
- css属性名： text-decoration
- 取值：underline下划线 ，line-through删除线 ，overline上划线 ，none无装饰线（常用）
#text-decoration：none 多用于清除a标签默认的下划线（超链接）
4、行高
- 作用：控制一行的上下行间距（包括字体高度 + 字体的上下间距，所以两段字之间的距离是两下间距 + 上间距）
- css属性名：line-height
- 取值：数字 + px 或者 倍数（当前标签font-size的倍数）
#连写注意点： font：style weight size/line-height family
font：italic 700 66px/2 宋体;
5、颜色
- css属性名： 文字颜色：color 背景颜色：background-color
- 取值：单词 ， rgb（0,233,44） ， 透明度显示：rgba（244,45,44,0.4） ， #fff000
6、标签水平居中显示
- margin：0 auto （div，p，h这样的标签） - 上下 左右
#一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度