CSS基础学习4-CSS设置文本-优快云博客

本文链接：https://blog.youkuaiyun.com/rongrong_love_lc/article/details/52859868

本文详细介绍了CSS中用于设置文本样式的属性，包括text-indent、text-align、text-decoration、letter-spacing和text-transform。通过实例展示了如何使用这些属性来调整文本的缩进、对齐方式、装饰效果、字符间距及大小写转换。

所有CSS基础学习文档下载地址：http://download.youkuaiyun.com/detail/rongrong_love_lc/9663463

四、CSS设置文本

*****************************************
1.text-indent   
2.text-align   
3.text-decoration   
4.letter-spacing   
5.text-transform 
*****************************************

1.text-indent:设置文本缩进
    value:px、pt、%、em(四种单位)
    html文件如下：
      <html>
              <head>
                  <title>Color例子</title>
                  <link rel="stylesheet" type="text/css" href="color.css"/>
              </head>
              <body>
              <h1> 设置文字颜色</h1>
              <h2> 设置文字字体1ABCDEFG</h2>  
              <h3> 设置文字字体2ABCDEFG</h3>  
              <h4> 设置文字字体3ABCDEFG</h4>
          <h5> 设置文字字体4ABCDEFG</h5>
              <p>默认字体颜色</p>
              </body>
          </html>
    CSS文件如下：
      body {background:red url("image1.jpg") no-repeat fixed center;
           }
          h1 {background-color:rgb(0,100,100);
              color:#00ff00;
          font:italic bold 120% "Times New Roman",serif;
               }
          h2 {font-family:arial,verdana,sans-caps;
              font-style:normal;
              font-variant:normal; 
          font-weight:normal;
          font-size:20px;
              }
          h3 {font-family:"Times New Roman", serif;
          font-style:italic;
          font-variant:small-caps;
          font-size:20pt;
              text-indent: 30%
          }
          h4 {font-family:Courier，Courier New，monospace;
          font-style:oblique;
          font-size:20%;
              text-indent: 30em
          }
          h5 {font-weight:900;
          font-size:2em;
              text-indent: 30pt}
          p {font-weight:bold;
         text-indent: 30px}

2.text-align:设置文本对齐方式
    value:left、right、center、justify（两端对齐）
    html文件如下：（已表格为例）
      <html>
          <head>
              <title>Color例子</title>
              <link rel="stylesheet" type="text/css" href="color.css"/>
          </head>
          <body>
          <table width="400px" border="1" cellpadding="1" cellspadding="1">
              <caption>员工绩效分数</caption>
              <tr><th>员工号</th><th>一月份</th><th>二月份</th><th>三月份</th></tr>
              <tr><td>20160907</td><td>90</td><td>91</td><td>92</td></tr>
              <tr><td>20160908</td><td>93</td><td>94</td><td>95</td></tr>
              <tr><td>20160909</td><td>96</td><td>97</td><td>98</td></tr>
              <tr><th>平均分</th><th>一月份</th><th>二月份</th><th>三月份</th></tr>
          </table>
          <p>测试文本信息</p>
          </body>
      </html>
    css文件如下：
      body {background:red url("image1.jpg") no-repeat fixed center;
          }
      th {text-align:right;}
      td {text-align:center;}
      p {text-align:justify;}

3.text-decoration:设置文本装饰
    value:underline[下划线]、overline[上划线]、line-through[删除线]等；
    html文件如下:
      <html>
          <head>
              <title>Color例子</title>
              <link rel="stylesheet" type="text/css" href="color.css"/>
          </head>
          <body>
          <table width="400px" border="1" cellpadding="1" cellspadding="1">
              <caption>员工绩效分数</caption>
              <tr><th>员工号</th><th>一月份</th><th>二月份</th><th>三月份</th></tr>
              <tr><td>20160907</td><td>90</td><td>91</td><td>92</td></tr>
              <tr><td>20160908</td><td>93</td><td>94</td><td>95</td></tr>
              <tr><td>20160909</td><td>96</td><td>97</td><td>98</td></tr>
              <tr><th>平均分</th><th>一月份</th><th>二月份</th><th>三月份</th></tr>
          </table>
          <p>测试文本信息</p>
      <h1>测试文本信息1</h1>
          <h2>测试文本信息2</h2>
          <h3>测试文本信息3</h3>
          </body>
      </html>
    css文件如下：
      body {background:red url("image1.jpg") no-repeat fixed center;
          }
      th {text-align:right;}
      td {text-align:center;}
      p {text-align:justify;}
      h1 {text-decoration:underline;}
      h2 {text-decoration:overline;}
      h3 {text-decoration:line-through;}

4.letter-spacing:设置字符间距
    value:px、pt、em(三种单位)(注意:%没有测试成功)
    html文件同上；
    css文件如下：
      body {background:red url("image1.jpg") no-repeat fixed center;
        }
      th {text-align:right;}
      td {text-align:center;}
      p {text-align:justify;
         letter-spacing:5px;}
      h1 {text-decoration:underline;
          letter-spacing:5pt;}
      h2 {text-decoration:overline;
          letter-spacing:180%;}
      h3 {text-decoration:line-through;
      letter-spacing:5em;}

5.text-transform:设置文本转换
    value:none[无任何转换]、capitalize[每个单词的首字母大写]、uppercase[全部大写]、lowercase[全部小写];
    html文件同上；
    css文件如下:
      body {background:red url("image1.jpg") no-repeat fixed center;
        }
      th {text-align:right;}
      td {text-align:center;}
      p {text-align:justify;
         letter-spacing:5px;
         text-transform:none;}
      h1 {text-decoration:underline;
          letter-spacing:5pt;
          text-transform:capitalize;}
      h2 {text-decoration:overline;
          text-transform:uppercase;}
      h3 {text-decoration:line-through;
          letter-spacing:1em;
          text-transform:lowercase;}