CSS3学习笔记-04-详解各种文本修饰

7/4/2020 StyleCSS3

# 文章目录

# 一、字体的使用

注意:如果字体是由多个单词构成的,那么必须加上引号

# 1.1 定义字体 @font-face

参考:菜鸟教程 @font-face (opens new window)

<style>
    @font-face {
        /*  自定义字体的名次 */
        font-family: 'pengsir';
        /* 定义多个字体 当第一个字体不存在或不能识别时,使用第二个字体*/
        src: url('font/font.TTF'),
            url('font/freescpt.TTF');
    }
    span{
        font-family: pengsir;
    }
</style>
<body>
   <span>测试文本abc</span>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果:
在这里插入图片描述

# 二、字体样式

# 2.1 字重定义 font-weight

字重指字的粗细定义。取值范围 normal | bold | bolder | lighter | 100 ~900。

400 对应 normal,700 对应 bold ,一般情况下使用 bold 或 normal 较多。

效果:
在这里插入图片描述

# 2.2 字号 font-size

  • 字号用于控制字符的显示大小,包括 xx-small | x-small | small | meidum | large | x-large | xx-large。
  • 百分数
    • 百分数是子元素相对于父元素的大小,如父元素是 20px,子元素设置为 200%即为你元素的两倍(40px)大小。
  • em
    • em 单位等同于百分数单位 (可以理解为一个字的宽度)。

在这里插入图片描述

# 2.3 行高设置 line-height

这里是 1.5 倍行高,em 可以根据字的大小来自动调整行高,所以行高一般设置为 em

<style>
    p{
        line-height: 1.5em;
    }
</style>
<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab
        architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo
         quis autem, perferendis fugiat vitae asperiores.
    </p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

# 2.3 字体风格 font-style

italic 和 oblique 都是倾斜

<style>
  body > em {
    font-style: normal;
  }
  p:nth-of-type(1) {
    line-height: 1.5em;
    font-style: italic;
  }
  p:nth-of-type(2) {
    line-height: 1.5em;
    font-style: oblique;
  }
</style>
<body>
  <em>这是默认倾斜的字体</em>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis
    ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus
    maiores! Nemo quis autem, perferendis fugiat vitae asperiores.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis
    ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus
    maiores! Nemo quis autem, perferendis fugiat vitae asperiores.
  </p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果:
在这里插入图片描述

# 2.4 组合写法 font

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是(按顺序): “font-style font-variant font-weight font-size/line-height font-family”

font-sizefont-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。

# 2.5 大小写转换 font-variant or text-transform

  • font-variant:samll-caps 将小写字母转化为大写 将大写字母再放大和加粗
  • text-transform:capitalize 单词首字母大写
  • text-transform:lowercase 全部小写
  • text-transform:uppercase 全部转化为大写
    <style>
        p:nth-of-type(1) {
            font-variant: small-caps;
        }
        p:nth-of-type(2) {
            text-transform: capitalize;
        }
        p:nth-of-type(3) {
            text-transform:lowercase;
        }
        p:nth-of-type(4) {
            text-transform:uppercase;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur cum atque quia harum alias dolorem. Sequi</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto placeat nobis provident eveniet laboriosam</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam cupiditate illo corrupti odit dolore vel unde</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam cupiditate illo corrupti odit dolore vel unde</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果:
在这里插入图片描述

# 2.6 文本线条控制 text-decoration:

描述
solid 默认值。线条将显示为单线。
double 线条将显示为双线。
dotted 线条将显示为点状线。
dashed 线条将显示为虚线。
wavy 线条将显示为波浪线。

不会读?已经帮你填好了:百度翻译 (opens new window)

属性定义及使用说明
text-decoration 属性是以下三种属性的简写:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
<style>
  h3:nth-of-type(1) {
    /*下划线*/
    text-decoration: underline;
  }
  h3:nth-of-type(2) {
    /*上划线*/
    text-decoration: overline;
  }
  h3:nth-of-type(3) {
    /*删除线*/
    text-decoration: line-through;
  }

  /* 组合方式 */
  h1 {
    text-decoration: underline overline line-through dotted red;
  }
  h2 {
    text-decoration: underline overline wavy blue;
  }
</style>
<body>
  <h1>测试文本</h1>
  <h2>测试文本</h2>
  <h3>测试文本</h3>
  <h3>测试文本</h3>
  <h3>测试文本</h3>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果:
在这里插入图片描述

# 2.7 文本阴影 text-shadow

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

注意: text-shadow 属性连接一个或更多的阴影文本。属性是阴影,指定的每 2 或 3 个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为 0。
在这里插入图片描述

<style>
  h3 {
    text-shadow: rgba(255, 222, 12, 0.4) 5px 5px 1px, rgba(
          0,
          0,
          255,
          0.8
        ) -5px -5px 1px;
  }
</style>
<body>
  <article>
    <h3>测试文本</h3>
  </article>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果:
在这里插入图片描述

# 2.8 空白处理 pre or white-space

使用 white-space 控制文本空白显示。

选项 说明
pre 保留文本中的所有空白,类似使用 pre 标签
nowrap 禁止文本换行
pre-wrap 保留空白,保留换行符
pre-line 空白合并,保留换行符
<style>
  h3:nth-of-type(1) {
    white-space: pre;
  }
  h3:nth-of-type(2) {
    white-space: pre-line;
  }
  h3:nth-of-type(3) {
    white-space: pre-wrap;
  }
</style>
<body>
  <article>
    <h3>测试 文本</h3>
    <h3>测试 文本</h3>
    <h3>测试 文本</h3>
    <pre>
测试    
                 文本
        </pre
    >
  </article>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果;
在这里插入图片描述

# 2.9 文本溢出处理 white-space overflow text-overflow

overflow属性指定如果内容溢出一个元素的框,会发生什么。

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。(会出现浏览器的横向或者纵向滚动条)
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

text-overflow text-overflow 属性指定当文本溢出包含它的元素,应该发生什么。

描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
<style>
  div:nth-of-type(1) {
    width: 20vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
    voluptatum, cum placeat veniam consequatur eaque inventore nostrum ex,
    delectus omnis quibusdam illo voluptas quas sed explicabo nisi magni unde?
    Ullam.
  </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果:
在这里插入图片描述

# 2.10 文本缩进与对齐

# 2.10.1 文本缩进

text-indent:2em文本缩进 2 个字符

# 2.10.2 水平对齐

text-align:center 文本水平居中

# 2.10.3 垂直对齐

参考:CSS vertical-align 属性 (opens new window)
vertical-align 属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

实例:

<style>
  article h3 {
    font-size: 30px;
    text-indent: 2em;
  }
  div img {
    vertical-align: middle;
  }
  article div div {
    display: inline-block;
    vertical-align: bottom;
  }
</style>
<body>
  <article>
    <h3>
      这是一段测试文本。这是一段测试文本,这是一段测试文本。
    </h3>
    <div>
      <img src="https://picsum.photos/200/200" alt="" />
      <div>测试文本</div>
      Laboris dolore cillum exercitation duis aliqua culpa commodo amet eiusmod
      ullamco sint.
    </div>
  </article>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

文中用到了 https://picsum.photos 这个网址,他可以随机返回一张图片。有兴趣可以百度看看。
效果:
在这里插入图片描述

# 2.11 字符间距 letter-spacing | word-spacing

字符间距 letter-spacing

单词间距 word-spacing

长单词换行
word-wrap:break-word

<style>
  p:nth-of-type(1) {
    letter-spacing: 15px;
  }
  p:nth-of-type(2) {
    word-spacing: 20px;
  }
  p:nth-of-type(3) {
    border: 1px solid black;
    width: 200px;
  }
  p:nth-of-type(4) {
    border: 1px solid black;
    width: 200px;
    /* 规定长单词换行 */
    word-wrap: break-word;
  }
</style>
<body>
  <p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p>
  <p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p>
  <p>
    Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit
    duis ea nisi velit.
  </p>
  <!-- 长单词换行 -->
  <p>
    Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit
    duis ea nisi velit.
  </p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

效果:
在这里插入图片描述

# 2.12 排版方式 writing-mode

参考:writing-mode 属性 (opens new window)

writing-mode:horizontal-tb 默认值,从上到下
默认值就不演示了,都一样的

writing-mode: vertical-lr 垂直方向 从左到右
在这里插入图片描述
writing-mode: vertical-rl 垂直方向 从右到左
在这里插入图片描述

最后更新于: 2021年9月15日星期三晚上10点10分
Dawn
DDRKirby(ISQ)