css3中text属性有哪些
css3中text属性有：1、颜色属性color；2、文本对齐属性【text-align】；3、字符间距属性【letter-spacing】；4、文本行高属性【line-height】；5、文本修饰属性【text-decoration】。
本教程操作环境：windows10系统、css3版，该方法适用于所有品牌电脑。
（学习视频分享：css视频教程）
css3中text属性有：
1、color
作用：指定文本的颜色
说明：该属性在块、行内、行内块的样式表中都可以使用，改变被控制元素内部所有文本的颜色
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#coDiv {
color: #00c6ff;
}
#coP {
color: #2b542c;
}
#coSpan {
color: palevioletred;
}
#coStrong {
color: blueviolet;
}
#colIn {
color: deeppink;
}
</style>
</head>
<body>
<div id="coDiv">
<p id="coP">
我是一名前端爱好者1
</p>
我是一名前端爱好者2
</div>
<span id="coSpan">
我是一名前端爱好者3
<strong id="coStrong">我是一名前端爱好者4</strong>
</span>
<input type="text" id="colIn" />
</body>
</html>2、text-align
作用：指定元素文本的水平对齐方式
说明：只在块级元素中使用生效，直接用在内联元素上不生效。如果使用该属性，在块元素中包含的文本、内联元素将会对齐，其内的块元素默认不设置此属性的话也会对齐，是因为子块元素继承父块元素的text-align的属性
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3之font属性</title>
<style type="text/css">
div {
border: 1px solid;
width: 1200px;
height: 150px;
}
#showdiv1 {
text-align: left;
}
#showdiv2 {
text-align: center;
}
#showdiv3 {
text-align: right;
}
#showdiv4 {
text-align: justify;
}
</style>
</head>
<body>
<div id="showdiv1">
大家好
</div>
<div id="showdiv2">
大家好
</div>
<div id="showdiv3">
大家好
</div>
<div id="showdiv4">
In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
</div>
</body>
</html>3、letter-spacing:
作用：增加或减少字符间的空白 （字符间距）
说明：负值过大时，字体会产生挤压，但不会重叠
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
letter-spacing: normal;
}
#lsSpan2 {
letter-spacing: 10px;
}
#lsSpan3 {
letter-spacing: -4px;
}
</style>
</head>
<body>
<span id="lsSpan1">Hello World</span><br>
<span id="lsSpan2">Hello World</span><br>
<span id="lsSpan3">Hello World</span><br>
</body>
</html>4、line-height:
作用：设置文本的行高
说明：不允许使用负值
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
line-height: 16px;
border: 1px solid;
}
#lsSpan2 {
line-height: 2em;
border: 1px solid;
}
</style>
</head>
<body>
<p id="lsSpan1">Hello World</p><br>
<p id="lsSpan2">Hello World</p><br>
</body>
</html>5、text-decoration
作用：规定添加到文本的修饰，下划线、上划线、删除线等
说明：该属性有以下三种简写 text-decoration-line，text-decoration-color，text-decoration-style
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
text-decoration: none;
text-decoration-line: overline;
}
#lsSpan2 {
text-decoration: underline;
text-decoration-color: pink;
}
#lsSpan3 {
text-decoration: overline;
text-decoration-style: wavy;
}
#lsSpan4 {
text-decoration: line-through;
}
#lsSpan5 {
text-decoration: overline wavy palevioletred;
}
</style>
</head>
<body>
<a id="lsSpan1">这是超链接</a><br>
<p id="lsSpan2">Hello World</p><br>
<p id="lsSpan3">Hello World</p><br>
<p id="lsSpan4">Hello World</p><br>
<p id="lsSpan5">Hello World</p><br>
</body>
</html>相关推荐：CSS教程
以上是css3中text属性有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何在Python中获取整数字面量属性而不是SyntaxError？
Aug 20, 2023 pm 07:13 PM
要获得intliteral属性而不是语法错误，请使用空格或括号。intliteral是Python中NumericLiterals的一部分。NumericLiterals还包括以下四种不同的数字类型 - int（有符号整数） - 它们通常被称为整数或整数，是正数
Python的dir()函数：查看对象的属性和方法
Nov 18, 2023 pm 01:45 PM
Python的dir()函数：查看对象的属性和方法，需要具体代码示例摘要：Python是一种强大而灵活的编程语言，其内置函数和工具为开发人员提供了许多方便的功能。其中一个非常有用的函数是dir()函数，它允许我们查看一个对象的属性和方法。本文将介绍dir()函数的用法，并通过具体的代码示例来演示其功能和用途。正文：Python的dir()函数是一个内置函数，
如何在Java中使用Gson重命名JSON的属性？
Aug 27, 2023 pm 02:01 PM
Gson@SerializedName注释可以序列化为JSON，并将提供的名称值作为其字段名称。此注释可以覆盖任何FieldNamingPolicy，包括可能已在Gson实例上设置的默认字段命名策略。可以使用GsonBuilder类设置不同的命名策略。语法@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedName示例importcom.google.gson.annotations.*;
Win11磁盘属性未知怎么办
Jul 03, 2023 pm 04:17 PM
Win11磁盘属性未知怎么办？近期Win11用户在电脑的使用中，发现系统出现提示磁盘错误的情况，这是怎么回事儿呢？而且应该如何解决呢？很多小伙伴不知道怎么详细操作，小编下面整理了Win11磁盘出错的解决步骤，如果你感兴趣的话，跟着小编一起往下看看吧！ Win11磁盘出错的解决步骤 1、首先，按键盘上的Win+E组合键，或点击任务栏上的文件资源管理器； 2、文件资源管理器的右侧边栏，找到边右键点击本地磁盘（C：），在打开的菜单项中，选择属性； 3、本地磁盘（C：）属性窗口，切换到工具选
css3怎么实现花边边框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。
CSS中bottom属性语法
Feb 21, 2024 pm 03:30 PM
CSS中bottom属性语法及代码示例在CSS中，bottom属性用于指定一个元素与容器底部之间的距离。它可以控制一个元素相对于其父元素底部的位置。bottom属性的语法如下：element{bottom:value;}其中，element表示要应用该样式的元素，value表示要设置的bottom值。value可以是一个具体的长度值，比如像素
使用Vue.set函数实现动态添加属性的方法和示例
Jul 24, 2023 pm 07:22 PM
使用Vue.set函数实现动态添加属性的方法和示例在Vue中，如果我们想要动态地添加一个属性到一个已经存在的对象上，通常会使用Vue.set函数来实现。Vue.set函数是Vue.js提供的一个全局方法，它能够在添加属性时保证响应式更新。本文将介绍Vue.set的使用方法，并提供一个具体的示例。首先，在Vue中，我们通常会使用data选项来声明响应式的数据。
炉石传说绝望线缕属性介绍
Mar 20, 2024 pm 10:36 PM
绝望线缕是暴雪娱乐旗下佳作《炉石传说》中的一张稀有卡牌，在“威兹班的工坊”卡包中有机会获得。可消耗100/400点奥术之尘合成普通/金色版本。炉石传说绝望线缕属性介绍答：在威兹班的工坊卡包中有几率获得，也也可以通过奥术之尘合成。稀有度：稀有类型：法术职业：死亡骑士法力值：1效果：使所有随从获得亡语：对所有随从造成1点伤害
