CSS文本格式化

通过 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 &emsp;<span class="none">转换后:text-transform</span></p>

    <p>原文: text-transform &emsp;<span class="uppercase">转换后:text-transform</span></p>

    <p>原文: TEXT-TRANSFROM &emsp;<span class="lowercase">转换后:text-transform</span></p>

    <p>原文: text-transform &emsp;<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文本格式化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/885809.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue项目开发注意事项

事项一&#xff1a;项目代码放在本地怎么运行起来 1、首先确定项目对应的node和npm版本 node下载地址 Index of /dist/https://nodejs.org/dist/ node 与 npm版本对应关系 Node.js — Node.js Releases 2、node卸载的时候&#xff0c;会自动把对应的npm卸载掉 情况1&…

光控资本:股票后边带个u是啥意思,常见股票后缀字母还有哪些?

股票后面带有字母U标明该股票发行人到目前为止还没有盈利&#xff0c;这是根据上交所发布的《关于科创板股票及存托凭证生意相关事项的奉告》中的规则&#xff0c;在上市后实现初度盈利&#xff0c;这个标识就会消除掉。一般是在科创板上市的股票会有U的标明&#xff0c;且一般…

河南做网站与SEO:如何提升搜索引擎排名

河南做网站与SEO&#xff1a;如何提升搜索引擎排名 在当今数字化时代&#xff0c;越来越多的企业意识到互联网的重要性&#xff0c;特别是在河南这样一个快速发展的地区&#xff0c;建立一个优秀的网站已经成为企业发展的必要条件。而在建立网站的同时&#xff0c;SEO&#xff…

【算法】链表:206.反转链表(easy)

系列专栏 《分治》 《模拟》 《Linux》 目录 1、题目链接 2、题目介绍 3、解法&#xff08;快慢指针&#xff09; 解题步骤&#xff1a; 关键点&#xff1a; 复杂度分析&#xff1a; 4、代码 1、题目链接 206. 反转链表 - 力扣&#xff08;LeetCode&#xff09; …

Flutter中使用FFI的方式链接C/C++的so库(harmonyos)

Flutter中使用FFI的方式链接C/C库&#xff08;harmonyos&#xff09; FFI plugin创建和so的配置FFI插件对so库的使用 FFI plugin创建和so的配置 首先我们可以根据下面的链接生成FFI plugin插件&#xff1a;开发FFI plugin插件 然后在主项目中pubspec.yaml 添加插件的依赖路径&…

滑动窗口->dd爱框框

1.题目&#xff1a; 2.题解&#xff1a; 2.1为什么用滑动窗口优化&#xff1a; 因为元素都是大于0的 所以&#xff1a;当找到大于等于x的值时&#xff0c;right可以不用返回 两个指针都往后走&#xff1b;因此可以使用滑动窗口优化暴力解法 2.2&#xff1a;滑动窗口具体使用步…

在掌控板中加载人教版信息科技教学指南中的educore库

掌控板中加载educore库 人教信息科技数字资源平台&#xff08;https://ebook.mypep.cn/free&#xff09;中的《信息科技教学指南硬件编程代码说明》文件中提到“本程序说明主要供教学参考。需要可编程主控板须支持运行MicroPython 脚本程序。希望有更多的主控板在固件中支持ed…

【PyTorch】图像分割

图像分割是什么 Image Segmentation 将图像每一个像素分类 图像分割分类 超像素分割&#xff1a;少量超像素代替大量像素&#xff0c;常用于图像预处理语义分割&#xff1a;逐像素分类&#xff0c;无法区分个体实例分割&#xff1a;对个体目标进行分割全景分割&#xff1a;…

2.点位管理|前后端如何交互——帝可得后台管理系统

目录 前言点位管理菜单模块1.需求说明2.库表设计3.生成基础代码0 .使用若依代码生成器最终目标1.创建点位管理2.添加数据字典3.配置代码生成信息4.下载代码并导入项目 4.优化菜单——点位管理1.优化区域管理2.增加点位数3. 合作商4.区域管理中添加查看详情功能5.合作商添加点位…

揭秘一下平时我们下载的python库跑到哪里了呢???

&#xff08;阅读之前&#xff0c;祝福大家国庆假期快乐&#xff0c;以及真诚的祝福我们的祖国越来越强大&#xff09;在那天的课上&#xff0c;老师问了我们这样一个问题&#xff1a;你们知道你们平时pip install下载库&#xff0c;下载好了&#xff0c;你们的库是下载到哪里了…

【高频SQL基础50题】16-20

day by day. 目录 1.进店却未进行过交易的顾客 2.项目员工 I 3.销售分析III 4. 判断三角形 5. 电影评分 1.进店却未进行过交易的顾客 连接题。 思路&#xff1a;根据trans表中的visit_id号在 visits表中排除&#xff0c;再将剩下的合并相同客户&#xff08;累加visit…

【API安全】crAPI靶场全解

目录 BOLA Vulnerabilities Challenge 1 - Access details of another user’s vehicle Challenge 2 - Access mechanic reports of other users Broken User Authentication Challenge 3 - Reset the password of a different user Excessive Data Exposure Challenge …

wordpress Contact form 7发件人邮箱设置

此教程仅适用于演示站有留言的主题&#xff0c;演示站没有留言的主题&#xff0c;就别往下看了&#xff0c;免费浪费时间。 使用了Contact form 7插件的简站WordPress主题&#xff0c;在有人留言时&#xff0c;就会发邮件到网站的系统邮箱(一般与管理员邮箱为同一个)里。上面显…

动态规划算法:13.简单多状态 dp 问题_打家劫舍II_C++

目录 题目链接&#xff1a;LCR 090. 打家劫舍 II - 力扣&#xff08;LeetCode&#xff09; 一、题目解析 题目&#xff1a; 解析&#xff1a; 二、算法原理 1、状态表示 2、状态转移方程 状态转移方程推理&#xff1a; 1、i位置状态分析 2、首尾状态分析 3、初始化 d…

《Linux从小白到高手》理论篇(九):Linux的资源监控管理

本篇介绍Linux的资源监控管理。 1、CPU 资源管理 进程调度&#xff1a; Linux 采用公平的进程调度算法&#xff0c;确保每个进程都能获得合理的 CPU 时间。调度算法会根据进程的优先级、等待时间等因素来决定哪个进程获得 CPU 使用权。 可以通过调整进程的优先级来影响其获得…

【数学分析笔记】第4章第2节 导数的意义和性质(1)

4. 微分 4.2 导数的意义与性质 4.2.1 导数在物理中的背景 物体在OS方向上运动&#xff0c;位移函数为 s s ( t ) ss(t) ss(t)&#xff0c;求时刻 t t t的瞬时速度&#xff0c;找一个区间 [ t , t △ t ] [t,t\bigtriangleup t] [t,t△t]&#xff0c;从时刻 t t t变到时刻 t…

架构设计笔记-5-软件工程基础知识-2

知识要点 构件组装是将库中的构件经适当修改后相互连接,或者将它们与当前开发项目中的软件元素连接,最终构成新的目标软件。 构件组装技术大体可分为: 1. 基于功能的组装技术:基于功能的组装技术采用子程序调用和参数传递的方式将构件组装起来。它要求库中的构件以子程序…

产品经理的学习

初学 接需求 画原型 写文档 日常产出 流程图 举例购物的流程 结构图 一个应用的全部功能&#xff0c;用思维导图的方式去罗列出来 竞品分析文档 竞品分类 竞品选择 竞品采集 竞品文档书写 也可以做一个产品的产品结构图 需求文档 干系人 需求方 记录人 产品经理 其他项目干系人…

时序必读论文15|TimeXer:通过外部变量增强Transformer在时间序列预测中的能力

论文标题&#xff1a;TimeXer: Empowering Transformers for Time Series Forecasting with Exogenous Variables 论文链接&#xff1a;https://arxiv.org/abs/2402.19072 前言 仅仅关注内生变量&#xff0c;通常不足以保证准确的预测&#xff0c;外部序列可以为内生变量提供…

蓝桥杯【物联网】零基础到国奖之路:十六. 扩展模块之矩阵按键

蓝桥杯【物联网】零基础到国奖之路:十六. 扩展模块之矩阵按键 第一节 硬件解读第二节 CubeMX配置第三节 MDK代码 第一节 硬件解读 扩展模块和ADC模块是一摸一样的&#xff0c;插在主板上。 引脚对应关系&#xff1a; PB6-ROW1 PB7-ROW2 PB1-COLUMN1 PB0-COLUMN2 PA8-COLUMN3 …