文本

color:文字颜色

text-align:文本对齐

line-height：行高

vertical-align

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .text-color{
  9.             color: pink;
  10.         }
  11.        .text-align{
  12.             /* 文字水平居中 */
  13.             text-align: center;
  14.         }
  15.         .line-height{
  16.             /* 设置行高 */
  17.             line-height: 1.4em;  /*一个em是当前元素一倍字体*/
  18.         }
  19.         .line-height2{
  20.             /* 文字垂直居中 */
  21.             height: 50px;
  22.             line-height: 50px;
  23.             border: 1px solid black;
  24.         }
  25.         .user-img{
  26.             /* 图片圆角和后面文字居中 */
  27.             border-radius: 50%; /*设置圆角*/
  28.             vertical-align: middle;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="text-color">文本的颜色使用</div>
  34.     <div class="text-align">设置行内元素与父元素的水平对齐方式</div>
  35.     <div class="text-align"><button>按钮</button></div>
  36.     <div class="line-height">文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高文字行高v文字行高</div>
  37.     <div class="line-height2">使用line-height实现垂直居中</div>
  38.     <div class="box">
  39.         <img src="../images/小新.jpg" class="user-img"/>用户昵称
  40.     </div>
  41. </body>
  42. </html>

字体

font-family

font-size

font-style

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .font{
  9.             font-family:Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  10.             /*受浏览器影响，最小12px;*/
  11.             font-size: 20px; 
  12.             font-style: italic; /*斜体*/
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="font">
  18.         文字的显示需要用到的字体，可以使用font-family来设置
  19.     </div>
  20. </body>
  21. </html>