字体样式

常见的属性：

font-family 字体（如：微软雅黑、楷体…）
font-size 字体大小
font-weight 字体粗细
color 字体颜色 
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  6.     <style>
  7.         h1{
  8.             font-family:楷体;
  9.             color: #a13d30;
  10.             font-weight: bolder;
  11.         }
  13.         p{
  14.             font-family: 隶书;
  15.             color: #0080FF;
  16.             font-size: 20px;
  17.             font-weight: normal;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  23. <h1>文摘</h1>
  25. <p>
  26.     在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。
  27.     一天，消灭魁拔的征兵令突然传到 窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，
  28.     不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
  29. </p>
  31. </body>
  32. </html>

运行结果：
image.png

文本样式

text-align 排版（center居中；left居左；right居右）
text-indent: 2em 段落首行缩进（一个em是一个字符）
height 300px;
line-height 行高（和块的高度一致，就可以上下居中）
text-decoration: none; a标签（超链接）去除下划线 
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  6.     <style>
  7.         h1{
  8.             font-family:楷体;
  9.             color: #a13d30;/*设置字体颜色*/
  10.             font-weight: bolder;/*字体加粗*/
  11.             text-align: center;/*水平居中*/
  12.         }
  14.         p{
  15.             font-family:微软雅黑;/*设置字体格式*/
  16.             background: orange;
  17.             height: 200px;
  18.            /* line-height: 800px;*/
  19.             color: #a13d30;/*设置字体颜色*/
  20.             font-weight: bolder;/*字体加粗*/
  21.             text-indent: 2em;/*段落前空两格*/
  22.         }
  24.         a{
  25.             color: blueviolet;
  26.             text-decoration: none;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  32. <h1>文摘</h1>
  34. <p>
  35.     在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。
  36.     一天，消灭魁拔的征兵令突然传到 窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，
  37.     不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
  38. </p>
  40. <a href="xjj.jpg">点我看小姐姐</a>
  42. </body>
  43. </html>

运行结果：
image.png
注意：text-align只是水平方向的居中，不能垂直居中，如果要垂直居中需要使得行高等于块的高度。（这一点在后面的div用的比较多）
如，把第18行的注释去掉的运行结果（height==line-height）：
image.png
可以看到垂直居中了

超链接伪类

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  6.     <style>
  7.         /*超链接默认的颜色*/
  8.         a{
  9.             text-decoration: none;/*去掉下划线*/
  10.             color: #000;
  11.         }
  12.         /*鼠标悬浮的状态（只需要记住 :hover）*/
  13.         a:hover{
  14.             color: orange;/*鼠标悬停时的字体颜色*/
  15.             font-size: 20px;/*鼠标悬停时的字体大小*/
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  21. <a href="#">  <!--#代表你想要跳转到哪里-->
  22.     <img src="book.jpg"> <!--图片超链接-->
  23. </a>
  24. <p>
  25.     <a href="#">码出高效：Java开发手册</a>
  26. </p>
  27. <p>
  28.     <a href="">作者：孤尽老师</a>
  29. </p>
  30. <p id="price">
  31.     ￥99
  32. </p>
  34. </body>
  35. </html>

运行结果：
image.png
点击第一行和第二行文字时，字体颜色会变黄，字体变大，这就是超链接伪类之一，知道这个常用的就可以了，其它伪类暂时不管。