一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

CSS属性-文本

前言


🦧上篇文章我们学习了CSS的相关概念,这篇文章我们将开始学习CSS中一些属性,本文章是入门级别的内容,同时也是个人学习笔记性质的内容,前端老鸟请绕路。

CSS属性-文本

一.text-decoration


🐻‍❄️text-decoration用来设置文字的装饰线,text-decoration一般有如下的取值,我们一一来进行演示

  1. none:无任何装饰线,可以去除a标签的下划线。
  2. underline:下划线。
  3. overline:上划线。
  4. line-through:中划线(删除线)
<style>
    .text-style1 {
      text-decoration: none;
      margin-bottom: 20px;
    }

    .text-style2 {
      text-decoration: underline;
      margin-bottom: 20px;
    }

    .text-style3 {
      text-decoration: line-through;
      margin-bottom: 20px;
    }

    .text-style4 {
      text-decoration: overline;
      margin-bottom: 20px;
    }
</style>

<body>
  <div class="text-style1">你好世界111!</div>
  <div class="text-style2">你好世界222!</div>
  <div class="text-style3">你好世界333!</div>
  <div class="text-style4">你好世界444!</div>
</body>

CSS属性-文本

二.text-transform


🙈text-transform用于设置文字的大小写转换,transform单词的意思是使形变的意思。

  1. capitalize:(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写。
  2. uppercase:(大写字母)将每个单词的所有字符变为大写。
  3. lowercase:(小写字母)将每个单词的所有字符变为小写。
  4. none:没有任何影响。
<style>
    .text-style1 {
      text-transform: none;
      margin-bottom: 20px;
    }

    .text-style2 {
      text-transform: capitalize;
      margin-bottom: 20px;
    }

    .text-style3 {
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .text-style4 {
      text-transform: lowercase;
      margin-bottom: 20px;
    }
</style>
<body>
  <div class="text-style1">abcdefg</div>
  <div class="text-style2">abcdefg</div>
  <div class="text-style3">ABCDEFG</div>
  <div class="text-style4">ABCDEFG</div>
</body>

CSS属性-文本

三.text-indent


🐸text-indent用于设置首行文本的缩进,text-indent: 2em刚好缩进两个空格。

CSS属性-文本

<style>
    .text-style1 {
      text-transform: none;
      width: 200px;
      background-color: antiquewhite;
      margin-bottom: 20px;
      padding: 16px;
      text-indent: 2em;
    }
</style>

<body>
  <div class="text-style1">风到这里就是黏,黏住过客的思念,雨到了这里缠成线,缠住我们留恋人世间,你在身边就是缘</div>
</body>

四.text-align


😳text-align直接翻译过来的意思使对齐方式,它有如下这些常用值。

  1. left左对齐
  2. right右对齐
  3. center中间对齐
  4. justify两端对齐
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text-style1 {
      width: 200px;
      background-color: antiquewhite;
      margin-bottom: 20px;
      padding: 16px;
      text-align: center;
    }

    .text-style2 {
      width: 200px;
      background-color: antiquewhite;
      margin-bottom: 20px;
      padding: 16px;
      text-align: left;
    }

    .text-style3 {
      width: 200px;
      background-color: antiquewhite;
      margin-bottom: 20px;
      padding: 16px;
      text-align: right;
    }

    .text-style4 {
      width: 200px;
      background-color: antiquewhite;
      margin-bottom: 20px;
      padding: 16px;
      text-align: justify;
    }
  </style>
</head>

<body>
  <div class="text-style1">风到这里就是黏</div>
  <div class="text-style2">风到这里就是黏</div>
  <div class="text-style3">风到这里就是黏</div>
  <div class="text-style4">风到这里就是黏</div>
</body>

</html>

CSS属性-文本

五.letter-spacing、word-spacing


🙈这两个属性主要用来设置字母单词之间的间距内容单位是像素,默认值为0,可以设置负值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text-style1 {
      width: 200px;
      background-color: antiquewhite;
      margin-bottom: 20px;
      padding: 16px;
      letter-spacing: 2px;
    }

    .text-style2 {
      width: 200px;
      background-color: antiquewhite;
      margin-bottom: 20px;
      padding: 16px;
      word-spacing: 4px;
    }
  </style>
</head>

<body>
  <div class="text-style1">classclassclassclass</div>
  <div class="text-style2">HelloWorld</div>
</body>

</html>

CSS属性-文本

六.总结


😬这篇文章我们学习了文本相关的几个CSS属性,CSS相关的属性有非常多的内容,但是在日常开发中基本就是写的这几个属性,所以把这几个写好就基本满足了开发的要求了。

原文链接:https://juejin.cn/post/7328213780310229032 作者:一溪风月

(0)
上一篇 2024年1月26日 下午5:03
下一篇 2024年1月26日 下午5:14

相关推荐

发表评论

登录后才能评论