CSS Text(文本)

CSS文本属性使您可以非常有效地轻松定义几种文本样式,例如颜色,对齐方式,间距,装饰,变换等。

使用CSS格式化文本

CSS具有几个用于定义文本样式的属性。这些属性使您可以精确控制字符空格单词段落等的视觉外观。

您可以设置元素的以下文本属性:

文字颜色

文本颜色由CSS color属性定义。

css 复制代码
h1 {
    color: #ff0000;
}
p {
    color: green;
}

注意: 尽管文本的颜色看起来像是CSS文本的一部分,但实际上是CSS中的独立属性。

文字对齐

text-align属性用于设置文本的水平对齐方式。

此属性可能的值有:left,right,center,justify,和inherit。

css 复制代码
h1 {
    text-align: center;
}
p {
    text-align: justify;
}

文字修饰

text-decoration属性用于设置或删除文本装饰。

此属性的可能值有:none,underline,overline,line-through,blink和inherit。您应避免在非链接的下划线文本,否则可能会使访问者感到困惑。 警告: 大多数浏览器都不支持blinkCSS text-decoration属性的值。您应该避免使用此值。

删除链接默认下划线

该text-decoration属性通常用于从超链接中删除默认下划线。完全删除下划线可能会使访问者感到困惑。除非您提供其他视觉提示以使其脱颖而出,同时还要设计链接的样式。

例如,您可以使用点而不是实线在链接下划线。

css 复制代码
a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

注意: 创建HTML链接时,内置在样式表中的浏览器会自动在其下划线,以便读者可以看到可单击的文本。

文字转换

该text-transform属性用于设置文本的大小写。

它可用于将元素的文本内容设置为大写或小写字母,或将每个单词的首字母大写。对于可能的值text-transform属性有:none,capitalize,uppercase,lowercase和inherit。

css 复制代码
p.up {
    text-transform: uppercase;
}
p.cap {
    text-transform: capitalize;
}
p.low {
    text-transform: lowercase;
}

文字缩进

该text-indent属性用于设置元素的第一行文本的缩进。该text-indent属性的可能值为:百分比 (%),长度(指定缩进空间)或inherit。

下面的示例演示如何缩进段落的第一行。

css 复制代码
p {
    text-indent: 100px;
}

注意: 文本是从左侧还是从右侧缩进取决于CSS direction属性定义的元素内文本的方向。

单词间距

word-spacing用于设置单词之间间距的属性。

  • 字间距可能会受到文本对齐方式的影响。
  • 保留空白时,所有空格字符均受单词间距的影响。

该word-spacing属性的可能值为:length(指定单词之间要插入的空格)normal和inherit。

css 复制代码
p.one {
    word-spacing: 20px;
}
p.two {
    word-spacing: 20px;
    text-align: justify;
}
p.three {
    word-spacing: 20px;
    white-space: pre;
}

字符间距

letter-spacing属性用于设置文本字符之间的额外间距。

此属性的可能值为:length(指定默认字符间空格normal以及字符之间要插入的额外空格)和inherit。

css 复制代码
h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

行间距

line-height属性定义一行文本的高度(也称为Lead)。

此属性可能的值是:百分比 (%),长度数量,normal和inherit。

css 复制代码
p {
    line-height: 1.2;
}

当值为数字时,通过将元素的字体大小乘以数字来计算行高。而百分比值则相对于元素的字体大小。 注意: 不允许该属性的负值。此属性也是字体简写属性的组成部分。 如果line-height属性的值大于font-size元素的值,则此差异(称为 "领先" )将切成两半(称为 "半领先" ),并均匀分布在in的顶部和底部行框。

css 复制代码
p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}

引用

菜鸟教程

相关推荐
努力往上爬de蜗牛13 分钟前
安装npm install vuedraggable@next报错
前端·npm·node.js
YAY_tyy21 分钟前
Three.js 开发实战教程(四):相机系统全解析与多视角控制
前端·javascript·3d·教程·three.js
IT_陈寒33 分钟前
Redis性能提升30%的秘密:5个被低估的高级命令实战解析
前端·人工智能·后端
excel1 小时前
全面解析 JavaScript 内置 Symbol 方法(含示例)
前端
excel1 小时前
一文搞懂 Vue 的双向绑定
前端
卡布叻_星星6 小时前
前端JavaScript笔记之父子组件数据传递,watch用法之对象形式监听器的核心handler函数
前端·javascript·笔记
开发加微信:hedian1167 小时前
短剧小程序开发全攻略:从技术选型到核心实现(前端+后端+运营干货)
前端·微信·小程序
YCOSA20259 小时前
ISO 雨晨 26200.6588 Windows 11 企业版 LTSC 25H2 自用 edge 140.0.3485.81
前端·windows·edge
小白呀白9 小时前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
吃饺子不吃馅10 小时前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学