web前端－CSS Text（文本）－005

来源：互联网发布：苹果下载iso软件编辑：程序博客网时间：2024/05/23 01:53

Text Color

颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：

十六进制值 - 如”＃FF0000”
一个RGB值 - “RGB（255,0,0）”
颜色的名称 - 如”红”

一个网页的背景颜色是指在主体内的选择：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>baidu.com</title> <style>body {color:red;}h1 {color:#00ff00;}p.ex {color:rgb(0,0,255);}</style></head><body><h1>这是标题 1</h1><p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p><p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p></body></html>

对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
实例：

h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}

文本修饰

text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}

也可以这样装饰文字：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>baidu.com</title> <style>h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}</style></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3></body></html>

不建议强调指出不是链接的文本，因为这常常混淆用户。

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
实例：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>baidu.com</title> <style>p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}</style></head><body><p class="uppercase">This is some text.</p><p class="lowercase">This is some text.</p><p class="capitalize">This is some text.</p></body></html>

运行结果：
这里写图片描述

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。
实例：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>baidu.com</title> <style>p {text-indent:50px;}</style></head><body><p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p></body></html>

运行结果：
这里写图片描述

所有CSS文本属性

属性描述 color 设置文本颜色 direction 设置文本方向 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行 text-shadow 设置文本阴影 text-transform 控制元素中的字母 unicode-bidi 设置或返回文本是否被重写 vertical-align 设置元素的垂直对齐 white-space 设置元素中空白的处理方式 word-spacing 设置字间距

0 0