HTML + CSS 连载 | 06 - CSS 文本属性

RiemannHypo
VIP.5 如鱼得水
159 阅读5分钟

html+css.jpeg

一、CSS 文本属性

CSS 中的文本属性的名称都是 text-*，常见的 CSS 文本属性包含以下几个：

  • text-decoration
  • text-transform
  • text-indent
  • text-align
  • word/letter-spacing

text-decoration 属性

text-decoration 属性用于设置文字的装饰线，比较常用，有以下几个常用的取值:

  • none：无任何装饰线，设置 none 可以去除 a 元素下默认的下划线
  • underline：设置下划线
  • overline：设置上划线
  • line-through：设置中划线或者删除线
<!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>
    a {
      text-decoration: none;
    }

    .bd {
      text-decoration: underline;
    }

    .google {
      text-decoration: overline;
    }

    .bing {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <!-- a 元素默认有 text-decoration 属性，属性值为 underline，可以是 none 去除下划线 -->
  <a href="https://www.baidu.com">百度</a>
  <p class="bd">百度</p>
  <p class="google">Google</p>
  <p class="bing">Bing</p>
</body>
</html>

效果如下：

image.png

在以后的开发中，都会多 a 元素的样式进行重置，其中就包括使用 text-decoration 属性去除 a 元素的下划线。

text-transform 属性

text-transform 用于设置文字的大小写转换，使用频率一般，有以下几个常见的值：

  • capitalize：将每个单词的首字母变为大写
  • uppercase：将每个单词的所有字母大写
  • lowercase：将每个单词的所有字母小写
  • none：不做任何设置
<!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>
    .alpha {
      text-transform: capitalize;
    }
    .bravo {
      text-transform: uppercase;
    }
    .charlie {
      text-transform: lowercase;
    }
    .delta {
      text-transform: none;
    }
  </style>
</head>
<body>
  <div class="alpha">alpha</div>
  <div class="bravo">bravo</div>
  <div class="charlie">CHARLIE</div>
  <div class="delta">delta</div>
</body>
</html>

效果如下：

image.png

text-indent 属性

text-indent 属性用于设置第一行内容的缩进，使用频率一般，单位为 em，如 text-indent: 2em 表所缩进两个文字的空。

<!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>
    p {
      font-size: 20px;
    }
    .indent {
      text-indent: 2em;
    }
  </style>
</head>
<body>
  <p class="indent">第一行要缩进两个空格第一行要缩进两个空格第一行要缩进两个空格第一行要缩进两个空格第一行要缩进两个空格第一行要缩进两个空格第一行要缩进两个空格第一行要缩进两个空格</p>
  <p>不缩进的形式不缩进的形式不缩进的形式不缩进的形式不缩进的形式不缩进的形式不缩进的形式不缩进的形式不缩进的形式不缩进的形式不缩进的形式不缩进</p>
</body>
</html>

根据页面显示的效果，可以确定在设置了 text-index 之后，可以实现两个字体大小的空格；

image.png

2em 表示的是 2 倍字体大小空格，em 单位字进行移动端开发的时候会常用到。

text-align 属性

text-align 可以用来设置文本的对齐方式，在 MDN 文档中的解释为 定义行内内容（如文字）如何相对他的块级父元素对齐，该属性的常用值有如下几个：

  • left：左对齐
  • right：右对齐
  • center：正中间对齐
  • 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>
    .box1 {
      background-color: #f00;
      color: white;
      /*text-align 设置对齐方式*/
      text-align: left;
    }
    .box2 {
      background-color: orange;
      color: white;
      /*text-align 设置对齐方式*/
      text-align: right;
    }
    .box3 {
      background-color: blueviolet;
      color: white;
      /*text-align 设置对齐方式*/
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box1">BOX1</div>
  <div class="box2">BOX2</div>
  <div class="box3">BOX3</div>
</body>
</html>

image.png

text-align 可以让文本、图片和输入框居中

<!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>
    .box {
      background-color:blanchedalmond;
      height: 300px;
      /* 图片居中 */
      text-align: center;
    }
    .box2 {
      background-color: yellowgreen;
      text-align: center;
    }
    img {
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="../images/1228984.png" alt="">
  </div>
  <div class="box2">
    <input type="text">
  </div>
  
</body>
</html>

image.png

但是无法让块级元素居中

<!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>
    .box {
      background-color: #f00;
      height: 300px;
      text-align: center;
    }
    .content {
      background-color: #0f0;
      height: 200px;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
</body>
</html>

image.png

因为只对行内级内容有效，对块级元素是无效的，div 就是一个块级元素，为了解决这个问题，可以将 div 这个块级元素变成行内级元素，将 CSS 代码改成如下形式：

    .content {
      background-color: #0f0;
      height: 200px;
      width: 200px;

      display: inline-block;
    }

在浏览器中打开该页面，可以看到实现了居中：

image.png

除了修改该元素的类型外，还可以设置 margin 属性来实现，将 CSS 代码改成如下形式：

    .content {
      background-color: #0f0;
      height: 200px;
      width: 200px;
      
      /* 修改元素为行内级元素 */
      /* display: inline-block; */
      /* 也可以设置 margin，左右边界距离为 auto */
      margin: 0 auto;
    }

在浏览器中打开页面，可以看到同样能够实现居中的效果

image.png

text-align 属性的 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>
    .box {
      width: 200px;
      background-color: #f00;
      color: white;

      text-align: justify;
    }
  </style>
</head>
<body>
  <div class="box">
    前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域
  </div>
</body>
</html>

在浏览器中打开页面，当对多行文字设置两端对齐时，最后一行文字不会生效，因为会造成阅读不连贯；

image.png

如果想要使最后一样也对齐，可以使用 text-align-last 属性来设置对齐方式：

    .box {
      width: 200px;
      background-color: #f00;
      color: white;

      text-align: justify;
      /* 设置最后一行两端对齐*/
      text-align-last: justify;
    }

在浏览器中打开页面，可以看到最后一行也是两端对齐；

image.png

letter/word-spacing

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>
    .box {
      letter-spacing: 10px;
      word-spacing: 30px;
    }
  </style>
</head>
<body>
  <div class="box">Alpha Bravo Tango Zulu</div>
  <div>Alpha Bravo Tango Zulu</div>
</body>
</html>

在浏览器中打开页面，可以看到设置了 word/letter-spacing 和没有设置之间的间距是不同的。

image.png

avatar
文章
阅读
粉丝