一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。
CSS——字体样式
常用：
-
font-family：该属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;
-
font-size：该属性用于设置字体大小，该属性的值可以使用相对长度单位，也可以使用绝对长度单位 px 绝对像素单位；em 相对父元素字体大小单位
-
font-weight：字体粗细
-
color：颜色
字体样式测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family:楷体; /*字体，可以设置多个*/
color:blue; /*颜色*/
}
h1{
font-size:30px; /*字体大小*/
color:red;
}
.active{
font-weight:bold; /*粗体 用<strong></strong>标签也可以实现*/
}
.first{
font:oblique bolder 36px "楷体"; /*斜体 粗体 大小 字体*/
/*可以把设计字体样式的语句写在一起，这样更方便*/
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="active">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！
魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。
在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。
魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。
但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。
很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="first">
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。
村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。
然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。
受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
</body>
</html>
字体样式测试效果图
CSS——文本样式
-
颜色 agb/agba
取值格式：
1.颜色名字 如: red
2.十六进制记法 如: #007769
3.R G B 三原色 如: RGB(255,0,0)
4.RGBA 三原色，A是控制透明度 Alpha 0 -1 , 1完全不透明，0 完全透明 如: rgba(0,0,0,1) -
文本对齐 text-align:left,center,right
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。 -
首行缩进 text-indent
-
行高 line-height 让行高（文字在文本框里的高度）和文本高相同，则文字居中
行高,一般用于配合着垂直居中使用, 将文本的 line-height 和容器的高度一致
-
装饰 text-decoration 下，中，上划线
none 默认 定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本的一条线。
blink | 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。 -
文本图片水平对齐 vertical-align:middle
文本样式测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*颜色
rgb(红，绿，蓝) 0-F(用十六进制表示)
rgba a（0-1）；增加透明度
*/
h1{
color:rgba(0 ,255,255,0.5);
text-align:center; /*水平居中*/
}
/*属性选择器*/
p[class]{
text-indent:2em; /*首行缩进*/
font-family: "楷体";
font-size:20px;
}
.p4{
background:pink;
height:150px; /*文本的高*/
line-height:150px; /*让行高（文字在文本框里的高度）和文本高相同，则文字居中*/
}
.a1{
text-decoration:underline; /*下划线*/
}
.a2{
text-decoration:line-through; /*中划线*/
}
.a3{
text-decoration:overline; /*上划线*/
}
/*a标签自带下划线，用none去除*/
a{
text-decoration:none;
}
</style>
</head>
<body>
<h1>一程光阴，一朵温婉</h1>
<p class="p1">
难得，一个清新朗照的日子，心上的明媚便在闲时光里悄悄生长。
</p>
<p class="p2">
光阴清宁，书香屋静。轻捻一份久违的闲情逸致，是馨香，亦是惬意。这是多好的时光，有深深浅浅的牵念丰盈寸寸光阴，有花开花谢的四季相随，
有忧忧喜喜的过往安静回忆……日子，是串起岁月长河的诗行，点点滴滴，婉约成一阕一句。
</p>
<p class="p4">
人生，漫漫，如何如何捕捉水意的清欢?白音格力说，心上打木屋，让风住，让云住，让月住……如若，美好的木屋可以相借，那么，我愿恋恋红尘中，
</p>
<p class="a1">aaabbbccc</p>
<p class="a2">dddeeefff</p>
<p class="a3">ggghhhiii</p>
<a href="">123456</a>
</body>
</html>
效果图
测试文本图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img,span{
vertical-align:middle;
}
span{
font-size:250px;
}
</style>
</head>
<body>
<p>
<img src="images\b.png">
<span>哈士奇</span>
</p>
</body>
</html>
效果图
