【CSS】CSS文本样式【CSS基础知识详解】

2401_84164527

于 2024-04-27 05:30:19 发布

阅读量923

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/2401_84164527/article/details/138237417

版权

.a4 {
width: 100px;
height: 90px;
float: left;
background-color: pink;
text-align: justify;
}

.a5 {
width: 100px;
height: 90px;
float: left;
margin-left: 10px;
background-color: skyblue;
}

文本水平居中对齐

<p class="a2">文本左对齐</p>

<p class="a3">文本右对齐</p>

<div class="a4">文本两端对齐，文本两端对齐，文本两端对齐</div>

<div class="a5">文本默认对齐，文本默认对齐，文本默认对齐</div>


![](https://img-blog.csdnimg.cn/5f096e4f70134680bc324d58f860bcfa.png#pic_center)


## 🌸最后一行的水平对齐


属性名：`text-align-last`


作用：规定如何对齐文本的最后一行


取值：




| 值 | 描述 |
| --- | --- |
| auto | 默认值。最后一行被调整，并向左对齐。 |
| left | 最后一行向左对齐。 |
| right | 最后一行向右对齐。 |
| center | 最后一行居中对齐。 |
| justify | 最后一行被调整为两端对齐。 |
| start | 最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。 |
| end | 最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |


例如：

花无缺

周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。 2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格。2002年举行“The One”世界巡回演唱会。2003年成为美国《时代周刊》封面人物。2004年获得世界音乐大奖中国区最畅销艺人奖。2005年凭借动作片《头文字D》获得金马奖、金像奖最佳新人奖。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖。2007年自编自导的文艺片《不能说的秘密》获得金马奖年度台湾杰出电影奖。


![](https://img-blog.csdnimg.cn/d7a99f36e07b4365bbba43daa207041f.png#pic_center)


## 🌏垂直对齐


属性名：`vertical-align`


作用：设置元素的垂直对齐方式


取值：




| 值 | 描述 |
| --- | --- |
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 使元素及其后代元素的底部与整行的底部对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | 将元素升高或降低指定的高度，可以是负数。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |


例如：

花无缺

.a2 {
vertical-align: text-bottom;
}

把元素的顶端与父元素字体的顶端对齐

把元素的底端与父元素字体的底端对齐。


![](https://img-blog.csdnimg.cn/d28ee5314074452f937995acce7ae01e.png#pic_center)


## 🌙文本修饰


属性名：`text-decoration`


取值：




| 属性值 | 效果 |
| --- | --- |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
| none | 无装饰线 |


例如：

花无缺

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

.a3 {
text-decoration: overline;
}

.a4 {
text-decoration: none;
}

下划线效果

<p class="a2">删除线效果</p>

<p class="a3">删除线效果</p>

<p class="a4">无装饰线</p>


![](https://img-blog.csdnimg.cn/6ad3c3fc8e684521a31677610f2d9d22.png#pic_center)


## 🌙文本转换


属性名：`text-transform`


作用：控制文本中的大小写字母


取值：




| 取值 | 效果 |
| --- | --- |
| capitalize | 文本中的每个单词以大写字母开头 |
| uppercase | 定义仅有大写字母 |
| lowercase | 定义无大写字母，仅有小写字母 |


例如：

花无缺

.a2 {
text-transform: uppercase;
}

.a3 {
text-transform: lowercase;
}

My name is huawuque.


![](https://img-blog.csdnimg.cn/01cbd846e13f443596266209730dfc32.png#pic_center)


## 🌙文本方向


属性名：`direction`


取值：




| 取值 | 效果 |
| --- | --- |
| ltr | 默认，文本方向从左到右 |
| rtl | 文本方向从右到左 |


如果文本方向设置为从右到左，则需要配合`unicode-bidi: bidi-override;`使用。


例如：

花无缺

.a2 {
direction: rtl;
unicode-bidi: bidi-override;
}

文本方向从左到右

文本方向从右到左


![](https://img-blog.csdnimg.cn/e173cb83fab44eccbc110f81c4110c8c.png#pic_center)


## 🌙文字间距


属性名：`letter-spacing/word-spacing`


作用：增加或减少字符间的空白（字符间距）


取值：




| 取值 | 效果 |
| --- | --- |
| normal | 默认。规定字符间没有额外的空间 |
| length | 定义字符间的固定空间（允许使用负值） |


例如：

花无缺

.a2 {
word-spacing: 16px;
}

文本间距为16px，i love you


![](https://img-blog.csdnimg.cn/f758c900d4d246e2804991b3294ce732.png#pic_center)


## 🌙文本阴影


属性名：`text-shadow`


作用：设置文本阴影效果


语法:`text-shadow: h-shadow v-shadow blur color;`


取值：




| 取值 | 作用 |
| --- | --- |
| h-shadow | 必须写，水平偏移量，允许负值 |
| v-shadow | 必须写，垂直偏移量，允许负值 |
| blur | 可选，模糊距离 |
| color | 可选，阴影颜色 |


例如：

花无缺

文本阴影效果


![](https://img-blog.csdnimg.cn/51101b3d59a24d659d1d3d26e0dabe2d.png#pic_center)


## 🌙行高


属性名：`line-height`


作用：控制文本行与行之间的距离


取值：




| 值 | 描述 |
| --- | --- |
| normal | 默认。设置合理的行间距。 |
| *number* | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| *length* | 设置固定的行间距。 |
| *%* | 基于当前字体尺寸的百分比行间距。 |


例如：

花无缺

.a2 {
line-height: 50%;
}

这一个段落的行高为16px，没错，就是这么多，我写这么多字就是为了有足够多的字来换行。

<p class="a2">
    这一个段落的行高为默认字体大小的%50，没错，就是这么多，我写这么多字就是为了有足够多的字来换行。
</p>


![](https://img-blog.csdnimg.cn/3a6d6afe6d1b4995933c5af65ab9dc94.png#pic_center)


## 🌙文本重写


属性名:`unicode-bidi`


作用:与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言


语法:`unicode-bidi: normal|embed|bidi-override;`


取值：




| 取值 | 效果 |
| --- | --- |
| normal | 默认。不使用附加的嵌入层面 |
| embed | 创建一个附加的嵌入层面 |
| bidi-override | 设置该属性为它的默认值 |


例如：

花无缺

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>


[外链图片转存中...(img-k32GoG5X-1714167001001)]
[外链图片转存中...(img-BbhMoIU1-1714167001001)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**