CSS属性-文本 - 技术栈

前言

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

一.text-decoration

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

none：无任何装饰线，可以去除a标签的下划线。
underline：下划线。
overline：上划线。
line-through：中划线（删除线）

html 复制代码

<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>

二.text-transform

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

capitalize：(使...首字母大写, 资本化的意思)将每个单词的首字符变为大写。
uppercase：(大写字母)将每个单词的所有字符变为大写。
lowercase：(小写字母)将每个单词的所有字符变为小写。
none：没有任何影响。

html 复制代码

<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>

三.text-indent

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

html 复制代码

<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直接翻译过来的意思使对齐方式，它有如下这些常用值。

left左对齐
right右对齐
center中间对齐
justify两端对齐

html 复制代码

<!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>

五.letter-spacing、word-spacing

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

html 复制代码

<!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相关的属性有非常多的内容，但是在日常开发中基本就是写的这几个属性，所以把这几个写好就基本满足了开发的要求了。