您好!欢迎来到静学网! 注册 登入

  • 静学网专注SEO优化技术视频教程案例分析、算法知识,在这里免费学习到最新的SEO技术,让你轻松通往SEO高工程师级之路,全新的SEO算法将在这里得到解剖。同时静学网提供网站开发、app开发、移动开发、电商、自媒体、行业资讯等内容,丰富及弥补自己的知识体系,让你在未来更具有竞争力。

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

web前端 教育推动者 次浏览
在文本发布中,我们经常看到因为文章中有一些是大写字母开头的,当然我们这里不是指你自己在键盘上进行转换,而是无论你是大写还是小写通过给你转换掉,有些是首字母,而有些是全部大写或者全部小写,最常见的就是我们发表评论,一些评论区可能就有这种功能,当然这不是简单的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>
 
实现效果如下
 

text-transform 

注意事项

  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>
 
实现效果



text-decoration

注意事项

  1 有意思的是,text-decoration属性的值不会叠加,也就是说在同一个对象中添加多个属性值,不会同时出现两个。 如果想了解更多的css教程,请收藏本站 www.seojingxue.com
静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明[CSS教程]‘text-transform属性’有什么作用?与’text-decoration属性’的区别在哪里
顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码:点击我更换图片
合作伙伴:
自学网