CSS3文本属性详解

news2024/9/21 4:28:07

4.2 文本属性

想缩进段落,幂指数,标题字符增加间距,要用到文本属性。

最有用的CSS文本属性:

  • text-indent:文本缩进
  • letter-spacing:字符间距
  • word-spacing:单词间距
  • text-decoration:文本装饰,下划线
  • text-align:文字对齐
  • line-height:行高
  • text-transform:
  • vertical-align:文本垂直对齐

4.2.1 文本缩进

值:长度值,正负都可。

示例:p { text-indent:3em }

text-indent属性设定行内盒子相对于包含元素的起点,默认是元素左上角。

首行缩进设置正值右移,负值左移。

继承的值与计算的值:子元素会继承父元素计算后的值,例如父元素宽400px,设置缩进5%,即20px,那么子元素就直接继承20px.

4.2.2 字符间距

值:任何长度值,正负都可(默认值基础上增减)。

示例:p { letter-spacing:.2em }

letter-spacing为正值时增大字符间距,为负值时缩小间距。

一定要用相对单位,以便字符能随字体大小同比例变化。

4.2.3 单词间距

值:任何长度值,正负都可以

示例:p { word-spacing:.2em }

对中文基本上没有用。

4.2.4 文本装饰

值:underline、overline、line-through、blink、none

示例: p { text-decoration:line-through; }

blink闪烁最好别用,none通常用于去除下划线。

4.2.5 文本对齐

值:left,right,center,justify(两端对齐)

示例:p { text-align:right; }

center用来在父元素中居中固定宽度的子元素或图片

4.2.6 行高

值:任何数字值,不用指定单位,字体大小的倍数。也可以是px绝对数值。

示例: p { line-height: 1.5; }

印刷行业中叫加铅条,去掉内外边距还有空白,想把空白也去掉,行高设为1或者小于1.

font-size和line-height写在一起,font:1.2em/1.4,表示行高是1.2em的1.4倍。

4.2.7 文本转换

值:none,uppercase,lowercase,capitalize(首字母大写)

示例:p { text-transform:capitalize }

要想实现小型大写字母的首字母放大效果,可以再加上font-variant:small-caps声明.

4.2.8 垂直对齐

值:top,middle,bottom等任意长度值。

示例: span { vertical-align:60%; }

只对行内元素生效,最常用于化学式,数学公式等。

重新设定上标和下标更好看。

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

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

相关文章

2024年小鹏MONA M03 P7 G3 G3i P5 G9 P7i G6 X9维修手册和电路图

汽修帮手资料库提供各大厂家车型维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对照表位置等,并长期保持高频率资料更新! 覆盖车型: 2024年小…

langchain结合searXNG实现基于搜索RAG

目录 一、背景 二、环境说明和安装 1.1 环境说明 2.2 环境安装 2.2.1 searXNG安装 三、代码实现 代码 结果输出 直接请求模型输出 四、参考 一、背景 大语言模型的出现带来了新的技术革新,但是大模型由于训练语料的原因,它的知识和当前实时热点…

白酒酿造设备大揭秘:科技与传统的结合

在白酒的酿造世界里,设备与工艺同样重要。它们共同构建了白酒的不同风味和品质。今天,就让我们一起走进豪迈白酒(HOMANLISM)的酿造车间,探索那些科技与传统相结合的酿造设备,感受它们如何为白酒的酿造增添魅…

Seata环境搭建

1、Seata下载: 1.下载地址 2.下载的版本 2、Seata参数配置参考: 各种seata参数官网参考 3、Seata安装部署: 3.1.Seata新手部署指南: 3.2.在mysql8.0数据库里面建库建表 a.建数据库: create database seata; use seata;b.建…

开源项目管理工具 Plane 安装和使用教程

说到项目管理工具,很多人脑海中第一个蹦出来的可能就是 Jira 了。没错,Jira 确实很强大,但是...它也有点太强大了,既复杂又昂贵,而且目前也不再提供私有化部署版本了。 再说说飞书,作为国产之光&#xff0…

电路基础 ---- 负反馈放大电路的方框图分析法

1 方框图分析法 方框图如下: 图中 A u o A_{uo} Auo​是一个电压输入的放大器的放大倍数,称为开环放大倍数。 F F F为反馈系数,是一个矢量,是指输出信号 x o x_{o} xo​的多少倍回送到放大器的输入端。 M M M为衰减系数&#x…

[pytorch] --- pytorch基础之损失函数与反向传播

1 损失函数 1.1 Loss Function的作用 每次训练神经网络的时候都会有一个目标,也会有一个输出。目标和输出之间的误差,就是用Loss Function来衡量的。所以Loss误差是越小越好的。此外,我们可以根据误差Loss,指导输出output接近目…

浏览器百科:网页存储篇-Cookie详解(一)

1.引言 在现代网页开发中,数据存储和管理是提升用户体验的重要环节之一。作为网页存储技术的元老,Cookie 自从诞生以来就扮演着不可或缺的角色。Cookie 允许网站在用户浏览器中存储小块数据,从而实现状态保持、用户跟踪以及个性化设置等功能…

数仓基础(六):离线与实时数仓区别和建设思路

文章目录 离线与实时数仓区别和建设思路 一、离线数仓与实时数仓区别 二、实时数仓建设思路 离线与实时数仓区别和建设思路 ​​​​​​​一、离线数仓与实时数仓区别 离线数据与实时数仓区别如下: 对比方面 离线数仓 实时数仓 架构选择 传统大数据架构 …

KRaft模式下的Kafka启动指南:摆脱Zookeeper依赖

一、背景介绍 多年来,人们一直在同时使用Apache ZooKeeper和Apache Kafka。但是自Apache Kafka 3.3发布以来,它就可以在没有ZooKeeper的情况下运行。同时它包含了新的命令kafka-metadata-quorum和kafka-metadata-shell?该如何安装新版kafka&#xff0c…

快手小店多店铺管理神器:甜羊浏览器

随着短视频平台的兴起,快手小店已经成为众多商家的重要销售渠道。然而,对于同时管理多个快手小店的商家来说,如何高效地运营这些店铺成为了一大挑战。特别是在需要同时登录和管理多个店铺账号时,问题尤为突出。那么,如…

【Python报错已解决】“ImportError: cannot import name ‘triu‘ from ‘scipy.linalg‘“?

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 文章目录 引言:一、问题描述1.1 报错示例:以下代码尝试从 scipy.linalg 中导入 triu 函数。1.2 报错分析…

@JsonFormat失败问题处理

JsonFormat失败问题处理 在开发中经常使用到时间格式,如果数据库的时间是timestamp格式的,则返回的格式通过带有毫秒 例如2024-08-30 14:53:58.236 这样子的格式,通常不是我们想要的; 但是我们又不想再后端写更多的代码&#xff…

公司电脑的敏感文件怎么审查?七大敏感文件管控策略,高效应对企业泄密风险!

在数字化时代,企业的敏感文件如同珍贵的宝藏,需时刻警惕潜在的风险。 古有"城门失火,殃及池鱼"之警,今有企业敏感信息泄露,牵一发而动全身之虞。 因此,如何有效审查与管理公司电脑中的敏感文件…

将.xml格式转换为YOLO所需的.txt文件格式

首先,原始的.xml数据集基础构成如下: image目录结构如下: label目录结构如下: .xml内容如下: 之后修改代码如下: import xml.etree.ElementTree as ET import os, cv2 import numpy as np from os import…

机器学习(西瓜书)第 3 章 线性模型

3.1 基本形式 例如若在西瓜 问题中学得“/好瓜⑺- 0.2 • n色泽 0.5 •/根蒂 0.3 •力敲声 1”,则意味着可 通过综合考虑色泽、根蒂和敲声来判断瓜好不好,其中根蒂最要紧,而敲声比 色泽更重要. 本章介绍几种经典的线性模型.我们先从回归任务…

为什么正午选她演大女主戏?看到殷桃这个片段,我全懂了

最近小编听说正午的最新力作《凡人歌》要上了,而且女主还是我特别喜欢的殷桃,赶紧马不停蹄的去追剧,结果狠狠爱上了殷桃的演技! 剧里殷桃饰演的沈琳是一位家庭主妇,她以为她放弃了工作,做家庭主妇&#xff…

你还在为编程效率低下而烦恼吗?编程界的神级辅助!一键解锁高效编程模式,让你的工作效率飙升不止一倍!

哪个编程工具让你的工作效率翻倍? 第一章 引言 在软件开发领域,编程工具的重要性不言而喻。它们不仅能够加速开发过程,还能提高代码质量,从而显著提升开发人员的工作效率。随着技术的不断进步,越来越多的编程工具涌现…

多头切片的关键:Model 类 call解释;LlamaModel 类 call解释;多头切片的关键:cache的数据拼接

目录 Model 类 call解释 LlamaModel 类 call解释 方法签名 方法体 总结 Model 类 call解释 这段代码定义了一个特殊的方法 __call__,它是Python中的一个魔术方法(magic method),允许类的实例像函数那样被调用。在这个上下文中,这个方法很可能被定义在一个封装了某种…

java宠物商城网站系统的设计与实现

springboot508基于Springboot宠物商城网站系统 题目:宠物商城网站系统的设计与实现 摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往…