[CSS教程]‘text-transform属性’有什么作用？与’text-decoration属性’的区别在哪里

在文本发布中，我们经常看到因为文章中有一些是大写字母开头的，当然我们这里不是指你自己在键盘上进行转换，而是无论你是大写还是小写通过给你转换掉，有些是首字母，而有些是全部大写或者全部小写，最常见的就是我们发表评论，一些评论区可能就有这种功能，当然这不是简单的css能够做到的，这需要涉及到一些后端方法，后面我们会讲到，常规中，我们如何去实现呢？text-transform会帮我们这个忙。

text-transform属性定义

简单的说就是控制文本大小写的

text-transform属性值

none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

代码实现过程

<!DOCTYPE html>
<html>
<head>
         <title>css教程</title>
         <style type="text/css">
                     .transform{
                           text-transform: capitalize;
                     }
                     .transform1{
                           text-transform: uppercase;
                     }
                     .transform2{
                           text-transform: lowercase;
                     }
                       .transform3{
                           text-transform: uppercase;
                     }
                     .transform4{
                          text-transform: inherit;
                     }
         </style>
</head>
<body>
      <div class="transform">
            this is a css, it`s very much
      </div>
      <div class="transform1">
            This IS a css, it`s very much
      </div>
      <div class="transform2">
            This is a css, it`s very much
      </div>
      <div class="transform3">
            This is a css, it`s very much
             <div class="transform4">
            This is a css, it`s very mucH
      </div>
    </div>
</body>
</html>

实现效果如下

注意事项

1 本属性一般用于英文，对于形如css-html，浏览器会默认是两个单词

text-decoration属性定义

text-decoration属性在中文字体中用的还是比较多的，当然英文中也是经常用到，主要是用于文本修饰。

text-decoration属性值

none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。 代码实现过程

<!DOCTYPE html>
<html>
<head>
         <title>css教程</title>
         <style type="text/css">
                     .decoration{
                           text-decoration:overline ;
                     }
                     .decoration1{
                           text-decoration: underline;
                     }
                     .decoration2{
                           text-decoration:line-through;
                     }
                       .decoration3{
                           text-decoration: blink;
                     }
                     .decoration4{
                          text-decoration: inherit;
                     }
         </style>
</head>
<body>
      <div class="decoration">
            this-css is a css, it`s very much
      </div>
      <div class="decoration1">
            This IS a css, it`s very much
      </div>
      <div class="decoration2">
            This is a css, it`s very much
      </div>
      <div class="decoration3">
            This is a css, it`s very much
             <div class="decoration4">
            This is a css, it`s very mucH
      </div>
    </div>
</body>
</html>

实现效果