摘要:大家好,我是IT共享者,人称皮皮。这篇文章我们来讲讲CSS的文本样式。一、文本颜色Color颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定: 十六进制值 - 如"#FF0000"。一个RGB值 - "RGB(…
大家好,我是IT共享者,人称皮皮。这篇文章我们来讲讲CSS的文本样式。
一、文本颜色Color
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
十六进制值 - 如"#FF0000"。一个RGB值 - "RGB(255,0,0)"。颜色的名称 - 如"红"。一个网页的文本颜色是指在主体内的选择:
hello world
welcome to CaoZhou
![](https://pic2.zhimg.com/v2-8c2d01a49cacba590bc854cabb05fb19_b.png)
![](https://pic2.zhimg.com/80/v2-8c2d01a49cacba590bc854cabb05fb19_720w.png)
注:对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。
二、属性
1. text-align 文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐。
当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。
2015 年 3 月 14 号
从前有个书生,和未婚妻约好在某年某月某日结婚。到那一天,未婚妻却嫁给了别人。书生受此打击, 一病不起。 这时,路过一游方僧人,从怀里摸出一面镜子叫书生看。书生看到茫茫大海,一名遇害的女子一丝不挂地躺在海滩上。路过一人, 看一眼,摇摇头,走了。又路过一人,将衣服脱下,给女尸盖上,走了。再路过一人,过去,挖个坑,小心翼翼把尸体掩埋了。 僧人解释道, 那具海滩上的女尸,就是你未婚妻的前世。你是第二个路过的人,曾给过他一件衣服。她今生和你相恋,只为还你一个情。但是她最终要报答一生一世的人,是最后那个把她掩埋的人,那人就是他现在的丈夫。书生大悟,病愈。
注意: 重置浏览器窗口大小查看 "justify" 是如何工作的。
![](https://pic4.zhimg.com/v2-cbd61c3e8c8b685926e9add41385b22b_b.jpg)
![](https://pic4.zhimg.com/80/v2-cbd61c3e8c8b685926e9add41385b22b_720w.jpg)
2. text-decoration文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线:
原来的样子
wwwwwwwwwwwwwwwwww去掉下划线
wwwwwwwwwwwwwwwwwwwww![](https://pic3.zhimg.com/v2-5e47a5b924685d17fb6f2e59250252c6_b.jpg)
![](https://pic3.zhimg.com/80/v2-5e47a5b924685d17fb6f2e59250252c6_720w.jpg)
也可以这样装饰文字:
This is heading 1
This is heading 2
This is heading 3
注:不建议强调指出不是链接的文本,因为这常常混淆用户。
![](https://pic4.zhimg.com/v2-8e70f1b10cfea0423678d088fb08782f_b.jpg)
![](https://pic4.zhimg.com/80/v2-8e70f1b10cfea0423678d088fb08782f_720w.jpg)
3. text-transform文本转换
text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。
uppercase:转换为全部大写。lowercase:转换为全部小写。capitalize :每个单词的首字母大写。This is some text.
This is some text.
This is some text.
![](https://pic3.zhimg.com/v2-837490c623f231f308fac2f099f2675e_b.jpg)
![](https://pic3.zhimg.com/80/v2-837490c623f231f308fac2f099f2675e_720w.jpg)
4. text-indent文本缩进
text-indent文本缩进属性是用来指定文本的第一行的缩进。
5. letter-spacing 设置字符间距网站优化
增加或减少字符之间的空间。
![](https://pic1.zhimg.com/v2-a0a35305d846809b48d0c3b9defad2b4_b.jpg)
![](https://pic1.zhimg.com/80/v2-a0a35305d846809b48d0c3b9defad2b4_720w.jpg)
6. line-height设置行高
指定在一个段落中行之间的空间。
This is a paragraph with a standard line-height. This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%.
This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height.
![](https://pic2.zhimg.com/v2-1a7ebf288b9d96b40d62d52a98d03615_b.jpg)
![](https://pic2.zhimg.com/80/v2-1a7ebf288b9d96b40d62d52a98d03615_720w.jpg)
7. word-spacing 设置字间距
增加一个段落中的单词之间的空白空间。
This is some text. This is some text.
![](https://pic4.zhimg.com/v2-3c4fbbb535590f5a83d75e2a01a5617b_b.png)
![](https://pic4.zhimg.com/80/v2-3c4fbbb535590f5a83d75e2a01a5617b_720w.png)
8. vertical-align 设置元垂直居中
设置文本的垂直对齐图像。
An image with a default alignment.
An image with a text-top alignment.
An image with a text-bottom alignment.
![](https://pic3.zhimg.com/v2-b731000a227ac4c6ad1bd00b33dd898e_b.jpg)
![](https://pic3.zhimg.com/80/v2-b731000a227ac4c6ad1bd00b33dd898e_720w.jpg)
9. text-shadow 设置文本阴影
设置文本阴影。
Text-shadow effect
![](https://pic3.zhimg.com/v2-0ce1f7412997b0af228451565ab9b61e_b.jpg)
三、总结
本文主要介绍了CSS文本样式实际应用中应该如何去操作,通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示,能够更直观的看到运行的效果,能够更好的理解。使用Html语言,代码结构更佳的清晰,能够帮助你更好的学习。
网站优化