10、CSS文本的实例演练

2022-01-03 14:24:53

CSS文本的实例演练

前面我们已经学习了文本的字体样式，这里我们再来学习一下跟文本相关的其他样式属性。



文本除字体外的其他常用样式属性：

  • 文本颜色

    color：颜色

  • 字母间距

    letter-spacing：大小

  • 单词间距

    word-spacing：大小

  • 文本方向

    direction：方向

    • direction：ltr          从左到右（left to right）
    • direction：rtl          从右到左（right to left）

  • 文本修饰

    text-decoration：装饰样式

    • text-decoration：none          默认。标准的文本，没有装饰。
    • text-decoration：line-through          穿过文本的一条线
    • text-decoration：overline          文本上方的一条线
    • text-decoration：underline          文本下方的一条线

  • 文本对齐

    text-align：方向

    • text-align：center          居中对齐
    • text-align：left          左对齐
    • text-align：right          右对齐
    • text-align：justify          两端对齐

  • 文本缩进

    text-indent：大小

  • 英文字母大小写转换

    text-transform：转换样式

    • text-transform：uppercase          所有字母大写
    • text-transform：lowercase          所有字母小写
    • text-transform：capitalize          首字母大写

  • 处理元素内的空白

    white-space：处理方式

    • white-space：normal          默认。空白会被浏览器忽略。
    • white-space：nowrap          文本不会换行，文本会再在同一行上继续，直到遇到 < br > 标签为止。

  • 处理内容溢出

    overflow：处理方式

    • overflow：visible          默认值。内容不会被修剪，会呈现在元素框之外。
    • overflow：hidden          内容会被修剪，并且其余内容是不可见的。
    • overflow：scroll          内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    • overflow：auto          自动。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

  • 处理文本溢出

    text-overflow：处理方式

    • text-overflow：clip          修剪文本。
    • text-overflow：ellipsis          显示省略符号来代表被修剪的文本。

  • 垂直对齐

    vertical-align：方向

    • vertical-align：百分比          按百分比对齐（每100%对应1行的高度，即100%=1行高）
    • vertical-align：top          把元素的顶端与行中最高元素的顶端对齐
    • vertical-align：middle          把此元素放置在父元素的中部
    • vertical-align：bottom          使元素及其后代元素的底部与整行的底部对齐

  • 元素浮动

    float：浮动方向

    • float：none          默认值。元素不浮动，并会显示在其在文本中出现的位置。
    • float：left          元素向左浮动。
    • float：right          元素向右浮动。





(1) 文本颜色

color：颜色

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p>hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    p {
    color: red;
}

    效果：

    10、CSS文本的实例演练



(2) 字母间距

letter-spacing：大小

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt3">hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    .txt1 {
    letter-spacing: 0px;
}
.txt2 {
    letter-spacing: 10px;
}
.txt3 {
    letter-spacing: -5px;
}

    效果：

    10、CSS文本的实例演练



(3) 单词间距

word-spacing：大小

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt3">hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    .txt1 {
    word-spacing: 0px;
}
.txt2 {
    word-spacing: 10px;
}
.txt3 {
    word-spacing: -10px;
}

    效果：

    10、CSS文本的实例演练



(4) 文本方向

direction：方向

① direction：ltr          从左到右（left to right）

② direction：rtl          从右到左（right to left）

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt3">hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    .txt1 {

}
.txt2 {
    direction: ltr;
}
.txt3 {
    direction: rtl;
}

    效果：

    10、CSS文本的实例演练



(5) 文本修饰

text-decoration：装饰样式

① text-decoration：none          默认。标准的文本，没有装饰。

② text-decoration：line-through          穿过文本的一条线

③text-decoration：overline          文本上方的一条线

④ text-decoration：underline          文本下方的一条线

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt3">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt4">hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    .txt1 {
    text-decoration: none;
}
.txt2 {
    text-decoration: line-through;
}
.txt3 {
    text-decoration: overline;
}
.txt4 {
    text-decoration: underline;
}

    效果：

    10、CSS文本的实例演练



(6) 文本对齐

text-align：方向

① text-align：center          居中对齐

② text-align：left          左对齐

③ text-align：right          右对齐

④ text-align：justify          两端对齐

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt3">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt4">hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    p {
    width: 200px;
    background-color: yellow;
}
.txt1 {
    text-align: left;
}
.txt2 {
    text-align: center;
}
.txt3 {
    text-align: right;
}
.txt4 {
    text-align: justify;
}

    效果：

    10、CSS文本的实例演练



(7) 文本缩进

text-indent：大小

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt3">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt4">hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    p {
    width: 200px;
    background-color: yellow;
}
.txt1 {
    text-indent: 20px;
}
.txt2 {
    text-indent: 40px;
}
.txt3 {
    text-indent: 60px;
}
.txt4 {
    text-indent: 80px;
}

    效果：

    10、CSS文本的实例演练



(8) 英文字母大小写转换

text-transform：转换样式

① text-transform：uppercase          所有字母大写

② text-transform：lowercase          所有字母小写

③ text-transform：capitalize          首字母大写

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">heLLo woRLD 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">heLLo woRLD 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt3">heLLo woRLD 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    .txt1 {
    text-transform: uppercase;
}
.txt2 {
    text-transform: lowercase;
}
.txt3 {
    text-transform: capitalize;
}

    效果：

    10、CSS文本的实例演练



(9) 处理元素内的空白

white-space：处理方式

① white-space：normal          默认。空白会被浏览器忽略。

② white-space：nowrap          文本不会换行，文本会再在同一行上继续，直到遇到 < br > 标签为止。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    p {
    width: 200px;
    background-color: yellow;
}
.txt1 {
    white-space: normal;
}
.txt2 {
    white-space: nowrap;
}

    效果：

    10、CSS文本的实例演练



(10) 处理内容溢出

overflow：处理方式

① overflow：visible          默认值。内容不会被修剪，会呈现在元素框之外。

② overflow：hidden          内容会被修剪，并且其余内容是不可见的。

③ overflow：scroll          内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

④ overflow：auto          自动。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt3">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt4">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt5">hello world</p>
</body>
</html>

    css

    p {
    width: 200px;
    background-color: yellow;
}
.txt1 {
    white-space: nowrap;
    overflow: visible;
}
.txt2 {
    white-space: nowrap;
    overflow: hidden;
}
.txt3 {
    white-space: nowrap;
    overflow: scroll;
}
.txt4 {
    white-space: nowrap;
    overflow: auto;
}
.txt5 {
    white-space: nowrap;
    overflow: auto;
}

    效果：

    10、CSS文本的实例演练



(11) 处理文本溢出

text-overflow：处理方式

text-overflow：clip          修剪文本。

text-overflow：ellipsis          显示省略符号来代表被修剪的文本。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p class="txt1">hello world 这是一段文字 这是一段文字 这是一段文字</p>
    <p class="txt2">hello world 这是一段文字 这是一段文字 这是一段文字</p>
</body>
</html>

    css

    p {
    width: 200px;
    background-color: yellow;
}
.txt1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.txt2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    效果：

    10、CSS文本的实例演练



(12) 垂直对齐

vertical-align：方向

① vertical-align：百分比          按百分比对齐（每100%对应1行的高度，即100%=1行高）

② vertical-align：top          把元素的顶端与行中最高元素的顶端对齐

③ vertical-align：middle          把此元素放置在父元素的中部

④ vertical-align：bottom          使元素及其后代元素的底部与整行的底部对齐

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p>
        <img class="image1" src="logo.jpg">
        hello world 这是一段文字 这是一段文字 这是一段文字
    </p>
    <p>
        <img class="image2" src="logo.jpg">
        hello world 这是一段文字 这是一段文字 这是一段文字
    </p>
    <p>
        <img class="image3" src="logo.jpg">
        hello world 这是一段文字 这是一段文字 这是一段文字
    </p>
    <p>
        <img class="image4" src="logo.jpg">
        hello world 这是一段文字 这是一段文字 这是一段文字
    </p>
    <p>
        <img class="image5" src="logo.jpg">
        hello world 这是一段文字 这是一段文字 这是一段文字
    </p>
</body>
</html>

    css

    p {
    width: 200px;
    background-color: yellow;
}
.image1 {
    width: 100px;
    height: 100px;
}
.image2 {
    width: 100px;
    height: 100px;
    vertical-align: 100%;
}
.image3 {
    width: 100px;
    height: 100px;
    vertical-align: top;
}
.image4 {
    width: 100px;
    height: 100px;
    vertical-align: middle;
}
.image5 {
    width: 100px;
    height: 100px;
    vertical-align: bottom;
}

    效果：

    10、CSS文本的实例演练



(13) 元素浮动

float：浮动方向

① float：none          默认值。元素不浮动，并会显示在其在文本中出现的位置。

② float：left          元素向左浮动。

③ float：right          元素向右浮动。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本实例</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <p>
        <img class="image1" src="logo.jpg">
        hello world 这是一段文字
    </p>
    <br>
    <p>
        <img class="image2" src="logo.jpg">
        hello world 这是一段文字
    </p>
    <br>
    <p>
        <img class="image3" src="logo.jpg">
        hello world 这是一段文字
    </p>
</body>
</html>

    css

    p {
    width: 200px;
    background-color: yellow;
}
.image1 {
    width: 100px;
    float: none;
}
.image2 {
    width: 100px;
    float: left;
}
.image3 {
    width: 100px;
    float: right;
}

    效果：

    10、CSS文本的实例演练

10、CSS文本的实例演练

上一篇：GitHub Typora 图片上传 图床配置


下一篇：知乎网页版怎么删除提问