CSS属性-文本

209 阅读1分钟

一. text-decoration(常用)
取值:

  1. none:无样式,常用语去除a标签的默认下划线
  2. overline:上划线
  3. line-through:删除线
  4. underline:下划线,a标签默认添加了该样式
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>

    span {
      color: #551a8b;
      text-decoration: underline;
    }

    .overline {
      text-decoration: overline;
    }

    .linethrough {
      text-decoration: line-through;
    }

    .del {
      text-decoration: none;
    }

  </style>
</head>
<body>
  <a href="#">a元素默认是添加了text-decoration:underline的</a>
  <span>span也可以实现a的效果</span>
  <p class="overline">添加上划线</p>
  <p class="linethrough">添加删除线</p>
  <a href="#" class="del">去掉a的默认下划线</a>
</body>
</html>

image.png

二. text-transform(一般)
用于设置文字的大小写转换
text-transform有几个常见的值:

capitalize:(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写

uppercase:(大写字母)将每个单词的所有字符变为大写

lowercase:(小写字母)将每个单词的所有字符变为小写

none:没有任何影响

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>

    .capitalize {
      text-transform: capitalize;
    }

    .uppercase {
      text-transform: uppercase;
    }

    .lowercase {
      text-transform: lowercase;
    }
  </style>
</head>
<body>
  
 
  <!-- capitalize: 将每个单词的首字符变为大写 -->
  <div class="capitalize">Your english must be very good</div>

  <!-- uppercase: 将每个字母都变大写 -->
  <div class="uppercase">Your english must be very good</div>
  <!-- lowercase:将所有字母都变成小写 -->
  <div class="lowercase">YOUR ENGLISH MUST BE VERY GOOD</div>
</body>
</html>

image.png