CSS文本外观属性(知识点2)

知识引入

1.text-indent:首行缩进

text-indent属性是用于定义首行文本的缩进,其属性值可为不同单位的数值,em字符宽度的倍数或相对于浏览器窗口宽度的百分比%,允许使用负值,建议使用em作为设置单位,下面通过一个案例来演示text-indent属性的使用方法,先写代码,如图1

图1

保存并运行代码,如图2

图2

*注意:text-indent属性仅适用于块级元素,对行内元素无效。

2.text-align:水平对齐方式

Text-align属性用于设置文本内容的水平对齐,相当于HTML中的align对齐属性,其属性值取值为以下三种。

(1)left:左对齐(默认值)。

(2)right:右对齐。

  (3)center:;居中对齐。

例如设置二二级标签居中对齐,可使用以下代码。

h2{text-align:center;}

*注意:(1)text-align仅适用于块级元素,对行内元素无效。(2)如果对图像设置水平对齐,,可以为图像添加一个父标签(如<p>),然后对父标签使用text-align属性就可以实现对图像设置水平对齐。

3.white-space:空白符处理

使用HTML制作网页时,不论源代码中有多少空格,在浏览器中只会显示一个字符的空白,在CSS中,使用white-space属性可设置空白符的处理方法,其属性值如下。

(1)normal:常规显示(默认值),文本中的空格,空行无效,满行(到达区域边界)后自动换行。

(2)pre:预格式化,按文档的书写格式保留空格,空行原样显示。

(3)nowrap:空格空行无效,强制文本不能换行,除非遇到换行标签<br/>。内容超出元素的边界也不会换行,若超出浏览器界面则会自动添加滚动条。

下面通过一个案例来演示一下white-space属性的使用方法。

先写代码,如图3

图3

保存显示如图4

图4

从图4和图3可以看出,使用white-space中的pre属性值可以看出定义的文本会保留原有的空白符,在浏览器中会原样显示,使用white-space中的rowrap属性,浏览器定义的文本不会换行,并且浏览器出现了滚动条。

4.text-shadow:阴影效果

Text-shadow属性用于给文本添加阴影效果,其属性的基本格式如下。

选择器{text-shadow:h-shadow  v-shadow  bluer color;}

在上面的语法格式中,h-shadow用于设置阴影水平偏移的距离,v-shadow用于设置阴影垂直偏移的距离,blur用于设置模糊的半径,color用于设置阴影颜色。

下面通过一个案例来演示一下text-shadow的使用方法。

先写代码,如图5

图5

保存并运行如图6

图6

*注意:(1)阴影的水平或垂直偏移距离参数可以设为负值,但阴影的模糊半径参数只能设置为正值,并且数值越大阴影向外模糊的范围也就越大。(2)可以使用text-shadow属性给文字添加多个阴影,从而产生阴影叠加的效果,方法为设置多组阴影参数,中间用逗号隔开,如图7的代码。

图7

5.text-overflow:标示对象内溢出文本

text-overflow为CSS3新增属性,该属性用于处理溢出的文本,其基本语法格式如下。

选择器{text-overflow:属性值;}

text-overflow属性常用取值有以下两个。

(1)clip:修剪溢出文本,不显示省略标签“…”。

(2)ellipsis:用省略标签“…”替代被修剪文本,省略标签插入的位置是最后一个字符。

下面通过一个案例来演示一下text-overflow的使用方法。

先写代码,如图8

图8

保存运行如图9

图9

总结图8和图9,可以得出设置省略标签标示溢出文本的具体步骤如下。

  (1)为包含文本的对象定义宽度。

(2)应用“white-space:nowrap;”样式强制文本不能换行。

  (3)应用“overflow:hidden;”样式隐藏溢出文本。

  (4)应用”text-overflow:ellipsis;”样式显示省略标签。

6.word-wrap属性

word-wrap是CSS3的新增属性,该属性用于实现长单词和URL地址的自动换行,其基本语法格式如下。

选择器{word-wrap:属性值;}

word-wrap取值如表3-3所示。

3-3  word-wrap属性值

描述

normal

只在 允许的断字点换行(浏览器保持默认处理)

break-word

在长单词或URL地址内部进行换行

下面通过一个URL地址换行来演示一下word-wrap的使用方法。

先写代码,如图10

图10

保存并运行如图11.

图11

7.以上就是CSS文本外观属性(知识点2)了,下期我们讲用CSS文本外观属性实现的案例。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker Image(镜像)

Docker镜像是什么 Docker image 本质上是一个 read-only 只读文件&#xff0c;这个文件包含了文件系统、源码、库文件、依赖、工具等一些运行 application 所必须的文件。我们可以把 Docker image 理解成一个模板&#xff0c; 可以通过这个模板实例化出来很多容器。image 里面…

智能家居20年,从「动手」到「用脑」

【潮汐商业评论/原创】 正在装修新家的Carro最近陷入了纠结之中&#xff0c;“还没想好要怎么装一套完整的智能家居&#xff0c;家里的基装就已经开始了。” 事实上&#xff0c;Carro对智能家居也不了解&#xff0c;并不知道该如何下手&#xff0c;心想“要是能一次性设计好就…

Java实现两个Ip相互跳转

需求:在请求HttpClient时,如果访问的http://127.0.0.1:5004/proxy/1为空或者为html(看自己的需求而定),那么就跳转到http://192.128.121.140:5004/proxy/1 传入的ip1和ip2分别是127.0.0.1和192.128.121.140 private String sendRequest(String ip1, String ip2) {CloseableHt…

MyBatis详解(1)-- ORM模型

MyBatis详解&#xff08;1&#xff09; JDBC的弊端&#xff1a; ORM 模型常见的ORM模型&#xff1a;mybatis和Hibernate的区别 ***优势&#xff1a;mybatis解决问题&#xff1a;优点&#xff1a; MyBatisMyBatis环境搭建项目架构mybatis生命周期 JDBC的弊端&#xff1a; 1.硬编…

头歌C语言递归函数、嵌套函数

目录 第1关:递归求阶乘数列 任务描述 相关知识(略) 编程要求 测试说明 第2关:递归实现输出一个整数的逆序 任务描述

jenkins部署过程记录

一、jenkins部署git链接找不到 原因分析&#xff1a; 机器的git环境不是个人git的权限&#xff0c;所以clone不了。Jenkins的master节点部署机器已经部署较多其他的job在跑&#xff0c;如果直接修改机器的git配置&#xff0c;很可能影响到其他的job clone 不了代码&#xff0c…

EI论文复现:考虑冷热运行特性的综合能源系统多时间尺度优化调度程序代码!

适用平台/参考文献&#xff1a;MatlabYalmipCplex&#xff1b; 参考文献&#xff1a;电力系统自动化《含冰蓄冷空调的冷热电联供型微网多时间尺度优化调度》 提出考虑冷热特性的综合能源系统多时间尺度优化调度模型&#xff0c;日前计划中通过多场景描述可再生能源的不确定性…

1.20号网络

数据库基本概念 能够输入计算机并能被计算机程序识别和处理的信息集合数据库 &#xff08;Database&#xff09; 数据库是在数据库管理系统管理和控制之下&#xff0c;存放在存储介质上的数据集合 常用的数据库 1&#xff09;大型数据库Oracle公司是最早开发关系数据库的厂商…

大数据处理,Pandas与SQL高效读写大型数据集

大家好&#xff0c;使用Pandas和SQL高效地从数据库中读取、处理和写入大型数据集&#xff0c;以实现最佳性能和内存管理&#xff0c;这是十分重要的。 处理大型数据集往往是一项挑战&#xff0c;特别是在涉及到从数据库读取和写入数据时。将整个数据集加载到内存中的传统方法可…

opencv#33 边缘检测

边缘检测原理 图像的每一行每一列都可以看成是一个连续的信号经过离散后得到的数值&#xff0c;例如上图左侧给出的图像由黑色到白色的一个信号&#xff0c;也就是图像中某一行像素变化是由黑色逐渐到白色&#xff0c;我们将其对应在一个坐标轴中&#xff0c;将像素值的大小对应…

Pytorch线性代数

1、加法运算 A torch.arange(20, dtypetorch.float32).reshape(5, 4) B A.clone() # 通过分配新内存&#xff0c;将A的一个副本分配给B A, A B# tensor([[ 0., 1., 2., 3.], # [ 4., 5., 6., 7.], # [ 8., 9., 10., 11.], # [12., 13.,…

Linux系统创建并自动启用交换文件

在Linux系统中&#xff0c;交换空间&#xff08;Swap Space&#xff09;被用作当物理内存&#xff08;RAM&#xff09;不足时的额外内存。尽管现代计算机通常配备有大量的RAM&#xff0c;但在某些情况下&#xff0c;如运行内存密集型应用或程序时&#xff0c;交换空间仍然非常有…

鼠标移入/点击子组件,获取选中子组件事件

不管是移入&#xff0c;或者是点击事件 都要知道是触发的哪个组件 这里子组件是个通用小标题title 所以&#xff0c;通过标题内容&#xff0c;获取触发的哪个子组件子组件 <template><div mouseover"tMouseover" mouseleave"tMouseLeave" class&…

[AIGC大数据基础] Spark 入门

大数据处理已成为当代数据领域的重要课题之一。为了高效地处理和分析大规模数据集&#xff0c;许多大数据处理引擎应运而生。其中&#xff0c;Spark作为一个快速、通用的大数据处理引擎备受关注。 本文将从“是什么、怎么用、为什么用”三个角度来介绍Spark。首先&#xff0c;我…

【Flutter跨平台插件开发】如何实现kotlin跟C++的相互调用

【Flutter跨平台插件开发】如何实现kotlin跟C的相互调用 kotlin 调 c 在 Kotlin 中&#xff0c;可以使用 JNI (Java Native Interface) 来调用 C 代码 调用步骤: 创建 C 文件并实现函数。 // example.cpp #include <jni.h>extern "C" JNIEXPORT jstring J…

SQL 系列教程(二)

目录 SQL DELETE 语句 DELETE 语句 演示数据库 DELETE 实例 删除所有行 SQL TOP, LIMIT, ROWNUM 子句 TOP 子句 演示数据库 SQL TOP、LIMIT 和 ROWNUM 示例 SQL TOP PERCENT 实例 添加WHERE子句 SQL MIN() 和 MAX() 函数 MIN() 和 MAX() 函数 演示数据库 MIN() …

spring eureka集群相关问题

一、集群节点信息如何更新&#xff1f; EurekaServer节点启动的时候&#xff0c;DefaultEurekaServerContext.init()方法调用PeerEurekaNodes.start()方法&#xff0c;start方法中resolvePeerUrls()会从配置文件读取serviceUrl属性值获得集群最新节点信息&#xff0c;通过upda…

电池回收产业东风中,吉利科技集团如何先行一步?

随着绿色低碳可持续发展理念深入人心&#xff0c;全球能源变革和转型升级持续推进&#xff0c;新能源行业不断涌现新的机遇。 动力电池回收和再利用&#xff0c;就是近在眼前的“红利型”产业。 我国新能源汽车市场近年来爆发式增长&#xff0c;动力电池生产紧随电动车普及步…

【代码管理】TortoiseGit 图标没有显示

当TortoiseGit在Windows系统中没有正确显示文件和目录的图标状态时&#xff0c;可能的原因和解决方法如下&#xff1a; 原因与解决方案&#xff1a; TortoiseGit未集成到资源管理器&#xff1a; 请确保TortoiseGit已正确安装&#xff0c;并在安装过程中选择了“将TortoiseGit集…

C++区间覆盖(贪心算法)

假设有n个区间&#xff0c;分别是&#xff1a;[l1,r1], [l2,r2], [l3,r3].....[ln,rn] 从这n个区间中选出某些区间&#xff0c;要求这些区间满足两两不相交&#xff0c;最多能选出多少个区间呢&#xff1f; 基本思路&#xff1a; 按照右端点从小到大排序&#xff0c;再比较左端…