10、CSS文本的实例演练

时间：2021-03-09 09:15:33 阅读：26 评论：0 收藏：0 [点我收藏+]

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

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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) 处理内容溢出

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

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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;
}

效果：

技术分享图片

(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文本的实例演练

原文：https://www.cnblogs.com/I-Love-Programming/p/14503110.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)