css text(文本)属性就是设置文本的外观,比如字体颜色、对齐方式、缩进、行间距等。
- 文本颜色
属性名:color。
属性值:
颜色英文单词:color:red;
16进制颜色值:color:#000000;
RGB代码:color: rgb(255,255,255)或rgb(100%,0%,0%)
一般在开发中常用的是十六进制写法。
代码示例:
<head>
<style>
/* 文本颜色属性 */
.red {
color: red;
}
.colorNum {
color: #f00;
}
.colorRgb{
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<!-- 文本颜色属性 -->
<p class="red">我是文本属性的单词颜色设置</p>
<p class="colorNum">我是文本属性的16进制颜色设置</p>
<p class="colorRgb">我说文本属性的rgb颜色设置</p>
</body>
代码运行界面
- 文本对齐方式
属性名:text-align。
属性值:
“text-align: left”:默认值,文本左对齐。
“text-align:center”:文本居中对齐。
“text-align:right”:文本右对齐。
代码示例:
<head>
<style>
/* 文本对齐方式 */
.l {
text-align: left;
}
.cen {
text-align: center;
}
.ri {
text-align: right;
}
</style>
</head>
<body>
<!-- 文本对齐方式 -->
<p class="l">文本左对齐</p>
<p class="cen">文本居中对齐</p>
<p class="ri">文本右对齐</p>
</body>
运行界面:
- 文本装饰
属性:text-decoration。
属性值:
“text-decoration:none”:默认值,没有装饰线。
“text-decoration:underline”:给文本添加下划线。
注意:a标签中自带下划线,可以使用默认值属性去除a标签的下划线。
“text-decoration:overline”:给文本添加上划线。
“text-decoration:line-through”:给文本添加删除线。
代码示例:
<head>
<style>
/* 文本装饰线 */
.nor {
text-decoration: none;
}
.underl {
text-decoration: underline;
}
.upl {
text-decoration: overline;
}
.lineTh {
text-decoration: line-through;
}
</style>
</head>
<body>
<!-- 文本装饰 -->
<p class="nor">文本装饰线:默认状态</p>
<p class="underl">文本装饰线:文本添加下划线</p>
<p class="lineTh">文本装饰线:文本添加删除线</p>
<p class="upl">文本装饰线:文本添加上划线</p>
<a href="#">我是超链接标签,文本自带下划线</a><br>
<a href="#" class="nor">我是超链接标签,文本自带下划线。使用默认值属性,可去除文本下划线</a>
</body>
运行界面:
- 文本缩进
属性名:text-indent。通常指段落首行缩进。
属性值:px或em。
em是一个相对单位,
如果当前元素已经设置文字大小,就按照当前元素1个文字的大小显示缩进。
如果当前元素中没有设置,则按照父元素的1个文字大小,即1个em=16px显示缩进。
代码示例:
<head>
<style>
/* 文本缩进 */
.indEm {
text-indent: 2em;
/* em是一个相对单位,
在没有设置文字大小时,按照默认字体大小,即16px显示。
设置了文字大小,则按照设置的文字大小,几个em就是几个文字大小进行显示。
*/
}
.indPx {
/* 像素是绝对单位,设置几就是几 */
text-indent: 32px;
}
</style>
</head>
<body>
<!-- 文本缩进 -->
<p class="indPx">我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
</p>
<p class="indEm">我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。
</p>
</body>
运行界面: