0
0

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

CSS基础知识详解

👨‍💻个人主页：@花无缺
欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创

本文章收录于专栏 【CSS】

【CSS专栏】已发布文章

📁【CSS基础认知】
📁【CSS选择器全解指南】
📁【CSS字体样式】

本文目录【CSS文本样式】

🌙文本颜色

属性名：

color

作用：设置文本的颜色

属性值：
颜色表示方式表示含义属性值颜色名称预定义的颜色名red、green、blue…RGB表示法红绿蓝三原色，每项取值范围:0255rgb(0，0，0)、rgb(255，255，255)RGBa表示法红绿蓝三原色+a表示透明度，取值范围是01rgba(255，255，255，0.5)、rgba（255，0，0，0.3）十六进制表示法以#开头，将数转换成十六进制表示#000000、#ff0000、#e92322，简写：#000、#f00
例如：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>p{color: blue;}span{color: pink;}</style></head><body><p>这是一句话，被设置成了蓝色</p><span>这是另一句话，被设置成了粉色</span></body></html>

🌙文本缩进

属性名：

text-indent

取值：

  • 数字+px
  • 数字+em

例如：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>p{text-indent: 32px;}</style></head><body><p>这是一句话，设置文本缩进32px，相当于两个汉字的距离</p><span>这是另一句话，没有设置文本缩进</span></body></html>

🌙文本对齐

🌏水平对齐

🌸一般水平对齐

属性名：

text-align

作用：用于设置文本的水平对齐方式

取值：
属性值效果left文本左对齐center文本居中对齐right文本右对齐justify文本两端对齐
注意：属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度

例如：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>花无缺</title><style>.a1{text-align: center;}.a2{text-align: left;}.a3{text-align: right;}.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;}</style></head><body><pclass="a1">文本水平居中对齐</p><pclass="a2">文本左对齐</p><pclass="a3">文本右对齐</p><divclass="a4">文本两端对齐，文本两端对齐，文本两端对齐</div><divclass="a5">文本默认对齐，文本默认对齐，文本默认对齐</div></body></html>

🌸最后一行的水平对齐

属性名：

text-align-last

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

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

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

🌏垂直对齐

属性名：

vertical-align

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

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>.a1{vertical-align: text-top;}.a2{vertical-align: text-bottom;}</style></head><body><p>把元素的顶端<imgsrc="../../../../../../ChromeDownload/爱心.png"class="a1">与父元素字体的顶端对齐</p><hr><p>把元素的底端<imgsrc="../../../../../../ChromeDownload/爱心.png"class="a2">与父元素字体的底端对齐。</p></body></html>

🌙文本修饰

属性名：

text-decoration

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>.a1{text-decoration: underline;}.a2{text-decoration: line-through;}.a3{text-decoration: overline;}.a4{text-decoration: none;}</style></head><body><pclass="a1">下划线效果</p><pclass="a2">删除线效果</p><pclass="a3">删除线效果</p><pclass="a4">无装饰线</p></body></html>

🌙文本转换

属性名：

text-transform

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

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>.a1{text-transform: capitalize;}.a2{text-transform: uppercase;}.a3{text-transform: lowercase;}</style></head><body><pclass="a1">My name is huawuque.</p><pclass="a2">My name is huawuque.</p><pclass="a3">My name is huawuque.</p></body></html>

🌙文本方向

属性名：

direction

取值：
取值效果ltr默认，文本方向从左到右rtl文本方向从右到左
如果文本方向设置为从右到左，则需要配合

unicode-bidi: bidi-override;

使用。

例如：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>.a1{direction: ltr;}.a2{direction: rtl;unicode-bidi: bidi-override;}</style></head><body><pclass="a1">文本方向从左到右</p><pclass="a2">文本方向从右到左</p></body></html>

🌙文字间距

属性名：

letter-spacing/word-spacing

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

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>.a1{letter-spacing: 16px;}.a2{word-spacing: 16px;}</style></head><body><pclass="a1">文本间距为16px，i love you</p><pclass="a1">文本间距为16px，i love you</p></body></html>

🌙文本阴影

属性名：

text-shadow

作用：设置文本阴影效果

语法:

text-shadow: h-shadow v-shadow blur color;

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>p{text-shadow: 2px 2px 2px blue;}</style></head><body><p>文本阴影效果</p></body></html>

🌙行高

属性名：

line-height

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

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>.a1{line-height: 16px;}.a2{line-height: 50%;}</style></head><body><pclass="a1">
        这一个段落的行高为16px，没错，就是这么多，我写这么多字就是为了有足够多的字来换行。
    </p><pclass="a2">
        这一个段落的行高为默认字体大小的%50，没错，就是这么多，我写这么多字就是为了有足够多的字来换行。
    </p></body></html>

🌙文本重写

属性名:

unicode-bidi

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

语法:

unicode-bidi: normal|embed|bidi-override;

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>p{direction: rtl;unicode-bidi: bidi-override;}</style></head><body><p>文本方向改变了</p></body></html>

🌙空白处理

属性名：

white-space

作用:指定元素内的空白怎样处理

取值：
取值效果normal默认。空白会被浏览器忽略pre空白会被浏览器保留。其行为方式类似 HTML 中的 < pre > 标签nowrap文本不会换行，文本会在在同一行上继续，直到遇到 < br > 标签为止pre-wrap保留空白符序列，但是正常地进行换行pre-line合并空白符序列，但是保留换行符
例如：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>花无缺</title><style>.a1{white-space: nowrap;}.a2{white-space: pre-wrap;}.a3{white-space: pre-line;}.a4{white-space: pre;}</style></head><body><pclass="a1">
        这里的文本不会换行
        这里的文本不会换行
        这里的文本不会换行
        这里的文本不会换行
        这里的文本不会换行
    </p><pclass="a2">
        保留空白符序列，但是正常地进行换行 保留空白符序列，但是正常地进行换行 保留空白符序列，但是正常地进行换行
        保留空白符序列，但是正常地进行换行
        保留空白符序列，但是正常地进行换行
        保留空白符序列，但是正常地进行换行
        保留空白符序列，但是正常地进行换行
        保留空白符序列，但是正常地进行换行
    </p><pclass="a3">
        合并空白符序列,但是保留换行符 合并空白符序列,但是保留换行符 合并空白符序列,但是保留换行符
        合并空白符序列,但是保留换行符
        合并空白符序列,但是保留换行符
        合并空白符序列,但是保留换行符
        合并空白符序列,但是保留换行符
    </p><pclass="a4">
        空白会被浏览器保留。其行为方式类似 HTML 中的 < pre> 标签空白会被浏览器保留。其行为方式类似 HTML 中的 < pre> 标签
                空白会被浏览器保留。其行为方式类似 HTML 中的 < pre> 标签
                    空白会被浏览器保留。其行为方式类似 HTML 中的 < pre> 标签
    </p></body></html>

好了，CSS文本样式就讲解完毕了，更多CSS知识都将在 【CSS专栏】中持续更新哦~

🌸欢迎

关注

我的博客：来和我一起成长吧!
🥇往期精彩好文：
📢【HTML基础知识详解】
📢【CSS基础认知】
你们的点赞👍 收藏⭐ 留言📝 关注✅
是我持续创作，输出

优质内容

的最大动力！
谢谢！

标签： css 前端
本文转载自: https://blog.csdn.net/huawuque404/article/details/127877011
版权归原作者 花无缺~ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【CSS】CSS文本样式【CSS基础知识详解】”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航