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

最新推荐文章于 2024-04-17 23:37:40 发布

洲洋世界

最新推荐文章于 2024-04-17 23:37:40 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： css web前端

本文链接：https://blog.csdn.net/helloMr_wo/article/details/52710980

版权

web前端专栏收录该内容

83 篇文章 2 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
1
评论
web前端－CSS Text（文本）－005

Text Color颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如”＃FF0000”一个RGB值 - “RGB（255,0,0）”颜色的名称 - 如”红”一个网页的背景颜色是指在主体内的选择：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>baidu.com</title> <st
复制链接

扫一扫