←CSS 表格
CSS 用法→

文字颜色

color 属性用于设置文本颜色。
要指定颜色，我们可以使用颜色名称（红色）、十六进制值 (#ff0000) 或者 RGB 值（rgb (255,0,0)）。

颜色属性示例：.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>

文本变换

Transform 属性用于控制文本大小写。
这意味着我们可以将文本设置为大写、小写或者大写（标题大小写）。

Transform 属性具有以下值：

  • Uppercase(text-transform: uppercase) - 将所有字符转换为大写
  • Lowercase(text-transform: lowercase) - 将所有字符转换为小写
  • Capitalize (text-transform: capitalize) - 将每个单词的第一个字符转换为大写

text-transform 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>

文字阴影

当我们想为文本添加阴影时，我们使用 text-shadow 属性。

Shadow 属性用于对文本应用各种阴影效果。
它接受一个值列表。
列表中的每一项都可以有两个或者更多逗号分隔值。

文本阴影属性语法看起来像

text-shadow: h-shadow v-shadow blur color

在这里我们可以看到文本阴影的示例。

字间距

借助 CSS word-spacing 属性，我们可以更改一段文本中单词之间的间距，而不是单个字符。
它支持以下值：

  • Normal，指定正常的字间距。这是该属性的默认值。
  • 长度值，指定另外的字间距。可以指定为 px、pt、cm、em 等。负值有效。
  • Initial，使属性使用其默认值。
  • Inherit，从其父元素继承属性。

word-spacing 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </p>
    <h3>
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </h3>
    <span>
    经历过风雨，才懂得阳光的温暖。
    </span>
  </body>
</html>

字母间距

CSS letter-spacing 属性允许定义文本中字母/字符之间的空格。
此属性支持以下值：

  • Normal，这意味着字符之间不会有多余的空格。它是该属性的默认值。
  • 长度值，它定义了字符之间的另外空间。允许负值。
  • Initial，使属性使用其默认值。
  • Inherit，从其父元素继承属性。

字母间距属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </p>
    <h3>
      letter-spacing属性示例文本
    </h3>
  </body>
</html>
CSS 文本

其中我们看看可以设置文本样式的属性

  • 文字颜色
  • 文字对齐
  • 文字装饰
  • 文本变换
  • 文字阴影
  • 文字缩进
  • 字母间距
  • 行高
  • 字间距

文字装饰

文本装饰用于设置文本的装饰。
在 CSS3 中，它是 CSS text-decoration-line、CSS text-decoration-color 和 CSS text-decoration-style 属性的简写。

Decoration 属性用于指定添加到文本中的线条装饰。
以下值对 text-decoration 属性有效。

  • Overline (text-decoration:overline) - 每行文本上都有一行
  • Underline (text-decoration:underline) - 每行文字都有下划线
  • Line-through (text-decoration:line-through) - 每行文本都有一条线穿过它
  • None (text-decoration:none) - 没有应用文本装饰

text-decoration 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>

行高

line-height 属性定义了行高。
它用于设置文本行的前导。
如果 line-height 值大于某个元素的 font-size 值，则差异将是文本的前导。
以下是此属性支持的值：

  • Normal，它定义了法线高度。它是该属性的默认值。
  • 长度值，它定义了以 px、cm 等为单位的固定行高。
  • 数字，定义一个数字，与当前字体大小相乘以设置行高。
  • %，它以当前字体大小的百分比定义行高。
  • Initial，使属性使用其默认值。
  • Inherit，从其父元素继承属性。

行高属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>line-height 属性示例</h2>
    <p> 生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。 </p>
    <h3>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </h3> 
  </body>
</html>

文本缩进

文本缩进属性用于指定文本块中第一行的空白长度。
以下值对此属性有效：

  • 长度 ，以px、pt、cm、em等为单位指定缩进。默认值为0。允许负值。
  • 百分比 - 以包含块宽度的百分比指定缩进。
  • 每一行，当缩进影响第一行以及强制换行后的每一行，但不影响软换行后的行。
  • Hanging，它反转缩进的行。第一行不缩进。
  • Initial，使属性使用其默认值。
  • Inherit，从其父元素继承属性。

text-indent 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </p>
  </body>
</html>

文本对齐

Alignment 属性用于将元素内的文本向左、向右、居中等对齐。

文本对齐有四个值：

  • Left (text-align: left) - 将文本左对齐
  • Right (text-align: right) - 将文本向右对齐
  • Center (text-align: center) - 将文本置于页面中央
  • Justify (text-align: justify) - 拉伸文本行以对齐左右两端（如在杂志和报纸中）

浏览器默认将文本左对齐，如果需要将文本右对齐或者居中，我们应该使用相应的值。

文本对齐属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>
日期：2020-06-02 22:14:27 来源：oir作者：oir
←CSS 表格
CSS 用法→

目录

Copyright © 2017-2019 OnITRoad.com All rights reserved.  桂ICP备20001160号-1  关于 | 隐私和政策