2.css文本属性

.流浪者

已于 2023-10-15 15:16:39 修改

阅读量46

点赞数

文章标签： css 前端

于 2023-10-15 14:35:22 首次发布

本文链接：https://blog.csdn.net/2301_80121917/article/details/133842246

版权

1 CSS文本属性

CSS ⽂本属性可定义⽂本的外观。通过⽂本属性，您可以改变⽂本的颜⾊、字符间距，对⻬⽂本，装饰⽂本，对⽂本进⾏缩进等等。

1.1 文本缩进

text-indent 属性将⻚⾯上的段落的第⼀⾏进行缩进(首行缩进)，这是⼀种最常⽤的⽂本格式化效果。取值：

：⽤⻓度值指定⽂本的缩进。可以为负值。
：⽤百分⽐指定⽂本的缩进。可以为负值。

p { 
    text-indent:20px; 
}
p { 
    text-indent:20%; 
}

1.2 文本对齐

text-align属性设置⽂本⽔平对⻬⽅式。取值：

left：内容左对⻬。
center：内容居中对⻬。
right：内容右对⻬。
justify：内容两端对⻬，对最后⼀⾏⽆效

注意：样式应用的最后一行文字不会生效（如果只有一行，那第一行同样是最后一行）

li-01 {
    text-align:left;
}

li-02 {
    text-align:right;
}

li-03 {
    text-align:center;
}

li-04 {
    text-align:justify;
}

案例：解决justify的问题

<!-- 如果只有一行文字
方法一 -->
<p class="test">
    只有一行很短的文字
</p>
 <style>
    p.test {
        width: 100%;
        border: 1px solid #f00;
        text-align-last: justify;
    }
</style>

<!-- 如果有多行文字 -->
<p class="test">
   只有一行很短的文字
</p>

<!--方法二
使用伪元素：
1. 需要使用after，将伪元素放在需要两端对齐的元素后面，作为第二行
2. 设定after的width为100%，生成第二行
3. 设置为行内快元素，设置的width才有效
-->
<style>
    p.test {
        text-align: justify;
    }

    p.test:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
</style>
<p class="test">
    只有一行很短的文字
</p>

案例：使用实现表单中名称两端对齐

<style>
    label {
        display: inline-block;
        width: 70px;
        /* 重点代码 */
        text-align: justify;
        text-align-last: justify;
        margin-right: 10px;
    }
</style>
<!-- 如果只有一行文字 -->
<div class="box">
    <form action="">
        <div class="item">
            <label for="username">用户名</label>
            <input type="text" name="" id="username">
        </div>
        <div class="item">
            <label for="pwd">密码</label>
            <input type="password" name="" id="pwd">
        </div>
        <div class="item">
            <label for="repwd">重复密码</label>
            <input type="password" name="" id="repwd">
        </div>
    </form>
</div>

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 线条显示为波浪线

.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：默认间隔
：⽤⻓度值指定间隔。可以为负值

p {
    word-spacing:20px;
}

1.5 文本间距

letter-spacing 属性设置字符之间的间距，适⽤于中英⽂⽂本取值：

normal：默认间隔
：⽤⻓度值指定间隔。可以为负值

p {
    letter-spacing:20px;
}

1.6 ⽂本换⾏

1.6.1 word-wrap 让文字换行

word-wrap 属性设置⽂本内部⻓单词或URL换⾏取值：

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

1.6.1 word-break

word-break 属性设置⾃动换⾏的处理⽅法取值：

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

1.6.3 white-space 不允许文字换行

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

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

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

<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，其中的 RR（红⾊）、GG（绿⾊）、BB（蓝⾊）⼗六进制整数规定了颜⾊的成分。所有值必须介于 0 与 FF 之间⼗六进制颜⾊计数： 0 1 2 3 4 5 6 7 8 9 a(10) b(11) c(12) d(13) e(14) f(15) 组合⽽成

p {
    color: #f00;
}

div {
    color: #ff6700
}

2.2 RGB颜⾊

所有浏览器都⽀持RGB颜⾊ RGB 颜⾊值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue)定义颜⾊的强度，可以是介于 0 与 255 之间的整数，或者是百分⽐值（从 0% 到 100%）

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

2.3 RGBA颜⾊

RGBA 颜⾊值得到以下浏览器的⽀持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。 RGBA 颜⾊值是 RGB 颜⾊值的扩展，带有⼀个 alpha 通道 - 它规定了不透明度。 RGBA 颜⾊值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

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

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

所有浏览器都⽀持颜⾊名 HTML 和 CSS 颜⾊规范中定义了 147 中颜⾊名（17 种标准颜⾊加 130 种其他颜⾊）。 17 种标准⾊是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

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

2.6 文字阴影box-shadow【css3】

box-shadow 属性向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

.box2 {
    width: 150px;
    height: 200px;
    background-color: antiquewhite;
    /* 
    内阴影
    box-shadow: 0px 0px 15px 0px #000 inset; 
    */
}

/* 小米商品鼠标悬浮阴影 */
.box2:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}

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

拓展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>