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;心想“要是能一次性设计好就…

MyBatis详解(1)-- ORM模型

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

jenkins部署过程记录

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

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

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

大数据处理,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.,…

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

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

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;动力电池生产紧随电动车普及步…

深度学习中RGB影像图的直方图均衡化python代码and对图片中指定部分做基于掩模的特定区域直方图均衡化

深度学习很重要的预处理步骤 就是需要对做直方图均衡化 其中主要分成灰度图以及RGB图的直方图均衡化 这俩的方法和代码不同 想要去看具体原理的朋友可以查看下面这篇博客的内容 写的很详细颜色直方图均衡化(https://www.cnblogs.com/wancy/p/17668345.html) 我们这个场景中会用…

【RT-DETR有效改进】FasterNet一种跑起来的主干网络( 提高FPS和检测效率)

前言 大家好&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持ResNet32、ResNet101和PP…

圈子论坛社交实名制系统---H5小程序APP,三端源码交付,允许二开!PHP系统uni书写!

圈子系统是一种社会化网络平台&#xff0c;它的核心是以用户为中心&#xff0c;围绕用户的兴趣、爱好、经历和职业等因素&#xff0c;将具有相同特质的个体聚集起来&#xff0c;形成具有共同话题和兴趣的社交圈子。这样的系统旨在帮助用户拓宽社交范围&#xff0c;提升社交效率…

封装 element el-date-picker时间选择区间

基于el-date-picker 处理满足项目需求。&#xff08;&#xff1a;最多选择7天&#xff09; 效果&#xff1a; 1 大于当前时间的以后日期禁选。2 选中时间的前后七天可选 &#xff08;最多可查询7天数据&#xff09;3 <template><section class"warning-contai…

FPGA硬件架构——具体型号是xc7k325tffg676-2为例

1.共如下图14个时钟域&#xff0c;XmYn(按坐标理解) 2.IOB(IOB为可编程输入输出单元,当然在普通Bank上的IOB附近还有很多时钟资源&#xff0c;例如PLL&#xff0c;MMCM资源。), 2.1 FPGA的Bank分为HP Bank和HR Bank&#xff0c;二者对电压的要求范围不同&#xff0c;HR支持更大…

2023龙信杯wp

打了好像70多分&#xff0c;没拿奖&#xff0c;因为一些众所周知的原因&#xff0c;复盘间隔时间太长了没什么印象了已经 案情简介 2023年9月&#xff0c;某公安机关指挥中心接受害人报案:通过即时通讯工具添加认识一位叫“周微”的女人&#xff0c;两人谈论甚欢&#xff0c;确…

大语言模型推理提速:TensorRT-LLM 高性能推理实践

作者&#xff1a;顾静 TensorRT-LLM 如何提升 LLM 模型推理效率 大型语言模型&#xff08;Large language models,LLM&#xff09;是基于大量数据进行预训练的超大型深度学习模型。底层转换器是一组神经网络&#xff0c;这些神经网络由具有 self-attention 的编码器和解码器组…

HTTP动态代理的原理及其对网络性能的影响

HTTP动态代理是一种通过代理服务器来转发HTTP请求和响应数据的网络技术&#xff0c;它可以优化网络性能、提高网络安全性&#xff0c;并解决跨域请求的问题。本文将详细介绍HTTP动态代理的原理及其对网络性能的影响。 一、HTTP动态代理的原理 HTTP动态代理的基本原理是在客户…