【前端从0开始】CSS——3、文本样式

程皮

已于 2023-08-12 08:44:36 修改

阅读量68

点赞数

分类专栏：前端从0开始文章标签：前端 css

于 2023-08-12 08:43:14 首次发布

本文链接：https://blog.csdn.net/a1137588003/article/details/132219038

版权

前端从0开始专栏收录该内容

30 篇文章 1 订阅

订阅专栏

文本样式

1. CSS文本属性

CSS文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等。

1.1 文本缩进

text-indent 属性将页面上的段落的第一行进行缩进(首行缩进)，这是一种最常用的文本格式化效果。

取值：

用长度值指定文本的缩进。可以为负值。
用百分比指定文本的缩进。可以为负值。

p { 
    text-indent:20px; 
}

p { 
    text-indent:20%; 
}

1.2 文本对齐

text-align 属性设置文本水平对齐方式。

取值：

left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐，对最后一行无效。

css

li-01 {
    text-align:left;
}

li-02 {
    text-align:right;
}

li-03 {
    text-align:center;
}

li-04 {
    text-align:justify;
}

1.3 文本修饰

text-decoration 属性设置文本装饰线条的位置，综合属性。可以单独设置 text-decoration-line、text-decoration-color 和 text-decoration-style 属性。

text-decoration-line

none 指定文字无装饰
underline 指定文字的装饰是下划线
overline 指定文字的装饰是上划线
line-through 指定文字的装饰是贯穿线

注：还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条。

text-decoration-style

solid 线条显示为单行
double 线条显示为双线
dotted 线条显示为点线
dashed 线条显示为虚线
wavy 线条显示为波浪线

css

.under {
    text-decoration: underline red;
}

.over {
    text-decoration: wavy overline orange;
}

.lineThough {
    text-decoration: line-through;
}

.none {
    text-decoration: none;
}

.under01 {
    text-decoration-line: overline underline;
}

1.4 单词间距

word-spacing 属性设置英文单词之间的间距。

取值：

normal：默认间隔
用长度值指定间隔。可以为负值

css

p {
    word-spacing:20px;
}

1.5 文本间距

letter-spacing 属性设置字符之间的间距，适用于中英文文本。

取值：

normal：默认间隔
用长度值指定间隔。可以为负值

css

p {
    letter-spacing:20px;
}

1.6 文本换行

1.6.1 word-wrap 让文字换行

word-wrap 属性设置文本内部长单词或URL换行。

取值：

normal 默认值（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

1.6.2 word-break

word-break 属性设置自动换行的处理方法。

取值：

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

1.6.3 white-space 不允许文字换行

nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

1.6.4 text-overflow 当文本溢出包含元素时剪切文字

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

css

<style>
  .box{
    width: 300px;
    border: 1px solid #f00;
    white-space: nowrap;
    /*溢出隐藏*/
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<div class="box">
  这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本
</div>

在这里插入图片描述

1.7 文本颜色

color 属性设置文本颜色。
取值：

指定颜色

2 颜色值

CSS颜色取值方式：

十六进制色
RGB 颜色
RGBA 颜色
预定义/跨浏览器颜色名

2.1 十六进制色

目前所有浏览器都支持十六进制颜色。#RRGGBB 规定了颜色的成分，所有值必须介于 0 与 FF 之间。

p {
    color: #f00;
}

div {
    color: #ff6700;
}

2.2 RGB颜色

所有浏览器都支持 RGB 颜色值是 rgb(red, green, blue)。

css

p {
    color: rgb(255, 0, 0);
}

2.3 RGBA颜色

RGBA 是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了不透明度。

css

p {
    color: rgba(255, 0, 0, 0.5);
}

2.4 预定义/跨浏览器颜色名

所有浏览器都支持颜色名 HTML 和 CSS 颜色规范中定义了 147 中颜色名。

css

p {
    color: red;
}

2.5 文字阴影 text-shadow【css3】

text-shadow 属性向文本设置阴影。

语法：text-shadow: x-shadow y-shadow blur color;

x-shadow 必需。水平阴影的位置。允许负值。
y-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

/* 单层阴影 */
p.info {
    text-shadow: -5px -5px 3px black;
    font-size: 50px;
}
/* 多层阴影 */
p {
    text-shadow: 5px 5px 3px red, 8px 8px 3px orange, 11px 11px 3px yellow, 14px 14px 3px green, 17px 17px 3px yellowgreen, 20px 20px 3px greenyellow, 23px 23px 3px blue;
    font-size: 50px;
}
/* 正阴影 */
div {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
    font-size: 50px;
}

拓展1：单行/多行文本省略

<!-- 案例：单行文本省略 -->
<style>
  ul{
    width: 400px;
  }
  li{
    width: 100%;
    float: left;
    /* 不让文字换行 */
    white-space: nowrap;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 添加省略符号 */
    text-overflow: ellipsis;
  }
</style>

<ul>
  <li>中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
  <li>念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
  <li>外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
  <li>今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
  <li>俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
</ul>

<!-- 多行文本省略 -->
<style>
  ul{
    width: 200px;
  }
  li{
    width: 100%;
    margin-top: 30px;
    margin-left: 30px;
    /* 标签变为弹性盒子 */
    display: -webkit-box;
     /* 按照垂直方向排序 */
    -webkit-box-orient: vertical;
     /* 保留对应的行数 */
    -webkit-line-clamp: 2;
     /* 多余的行数隐藏 */
    overflow: hidden;
  }
  .for::after{
    content: "";
    clear: both;
    display: block;
  }
</style>
</head>
<body>
    <ul>
        <li>1.中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
        <li>2.念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
        <li>3.外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
        <li>4.今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
        <li>5.俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
    </ul>

在这里插入图片描述

拓展2：多行/多行文本垂直居中

单行文本垂直居中

<style>
.box{
    width: 300px;
    height: 300px;
    border: 1px solid #f00;
    line-height: 300px;
}
</style>
<div class='box'>
  比如，当前热映《长清湖》超越了《你好，李焕英》票房
</div>

多行文本垂直居中

<style>
  .box{
    width: 300px;
    height: 300px;
    border: 1px solid #f00;
    /* 将div修改为table单元格的特性 */
    display: table-cell;
    /* 垂直居中 */
    vertical-align: middle;
  }
</style>
<div class='box'>
  比如，当前热映《长清湖》超越了《你好，李焕英》票房，这是很不容易的。要知道当初《你好，李焕英》不仅拥有天时（影院放开不久），还有人和。贾玲与刘德华互联网上频繁互动，为影片上映做好了预热，不大卖都难。
</div>