前面我们知道了什么是css，我们可以利用css来干嘛，以及知道了css常见的选择器的等。今天，我们学习css的字体样式（字体属性）
字体样式：
字体类型：哪种字体显示，谷歌默认是 "微软雅黑" font-family:'微软雅黑' ， '宋体'
字体大小：谷歌浏览器默认是 16px font-size:20px;
字体的风格：正常、倾斜 font-style:italic;normal;
字体加粗：font-weight:bold(700); normal(400);
字体颜色：color:red;
字体对齐方式：text-algin:center;<!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>
<!-- 效果会作用在页面的body 里面的标签 -->
<style>
span {
/* 文字的字体类型，多个字体用逗号隔开，依次显示*/
/* 无特殊要求则不用设置，使用默认即可，谷歌浏览器一般默认是微软雅黑 如：宋体、黑体、隶书、楷体、Times New Roman */
/* 一般给body 即可,因为页面所有标签都在body里面 */
font-family: '黑体'，‘Microsoft YaHei’,/* 字体大小 */
/* 根据ui设计稿设置即可 */
/* 浏览器默认的字体大小是 16px,需记忆，面试可能会问 */
font-size: 16px;
/* 定义字体的风格 */
/* normal | italic | oblique | inherit; */
/* 分别是 正常 斜体 正常可不写，记住斜体即可*/
font-style: italic;
/* 加粗 */
/* 两种写法：400-700；或者 normal（默认） bold */
/* 推荐使用第二种写法，normal和bold,需记住加粗*/
font-weight: bold;
/* 文字颜色 */
/* 常用的有2种表示方法，直接用英文单词和16进制写法 */
/* 16进制写法，Ui妹子会给到设计稿，设计稿上会说 照抄即可 */
color: red;
color: #cfc34f;/* 文本装饰属性：清除下划线、下划线、上划线、、删除线 */
/* 清除下划线，用的最多，比如清除a标签默认的下划线 */
/* 清除默认下划线 */
text-decoration: none;
/* 给标签设置下划线 */
text-decoration: underline;
/*了解性属性 */
/* 1. 首行的文本缩进*/
text-indent: 3em;
/* 2.设置行高：重要 */
line-height:40px;
}
a {
/* 清除a标签默认下划线 */
text-decoration: none;
}
p {
/* p标签默认是没有下划线的，但是我们想要给p标签设置下划线,怎么办呢？ */
/* soeasy 一句代码搞定了 */
text-decoration: underline;
color:blue;
}
</style>
</head>
<body>
<span>
山有木兮木有枝，心乐君兮君不知
</span>
<a href="">海内存知己，天涯若比邻</a>
<p>喜欢是淡淡的爱，爱是深深的喜欢，鱼说你看不见我的泪，因为我在水里，水说我能感受到你的泪，因为你在我心里！！！</p>
</body>
</html>
font复合属性（属性简写）：
font： italic 700 16px ' Microsoft YaHei'
注意：
1.顺序：italic必须放在第一位
2.必要属性：itailc 和 size ，一定不能省略
文本属性：
1.颜色：color:pink;
有三种方式：
1.英文单词，pink red white 等
2.十六进制（#），用的最多
3.rgb（255,0,0）
2. 水平对齐：text-algin:center; left right;
3. 行间距（行高）：line-height:50px; 用来设置垂直居中
4.首行缩进：text-indent:20px;
p {
text-indent:2em;//em:相对于当前元素2个文字大小的缩进
}
5.装饰文本：text-decoration:underline;下划线
如何删除默认标签的下滑线：比如清除a标签默认的下划线 text-decoration:none;
css的引入方式：三种方式
1. 行内样式表 在标签的内部，<p style="color:red;">我是段落</p>
2. 内部样式表 在style标签中，结构和样式实现分离，练习时常用
3.外部样式表，不写在当前的html页面,而是通过引入的方式引入到当前的html页面
场景：样式太多的时候 使用
通过 link标签 引入
代码如下：通用link标签 引入外部.css样式文件
<!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>外部样式表</title> <link rel="stylesheet" href="./waibu.css"> </head> <body> <h1>我是标题</h1> <P>这是一阿达颁发及卡斯比福建上班</P> <div>按道我好噢if额外不是</div> </body> </html>
鼠标的两种常用效果：
<!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>
<!-- 效果会作用在页面的body 里面的标签 -->
<style>
/* 鼠标的hover效果：就是鼠标放在标签上会执行的代码 */
h4:hover {
color: red;
}
h3 {
/* 小手效果 */
cursor: pointer;
}
h2:hover {
/* hover效果+小手 */
color: skyblue;
cursor: pointer;
}
</style>
</head>
<body>
<h4>同学，遇到你，我就变得更专注，所以，我就变成了红色，不信，你把鼠标放上来看看吧</h4>
<h3>鼠标放在我上面，会有小手效果哦，提示用户可点击</h3>
<h2>hover效果，和小手效果</h2>
</body>
</html>
css背景色：
<!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>
span {
/* 设置背景色 */
background-color: pink;
/* 字体颜色 */
color: blue;
}
</style>
</head>
<body>
<span>每个人都想赢，那为什么不能是我!!!</span>
<span>没有人在年轻的时候会选择平庸，所以，年轻人请对自己多一点期待何梦想吧</span>
</body>
</html>