CSS-文本属性

一、CSS文本格式

CSS 文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

属性如下：

属性	描述
color	设置文本颜色
text-indent	缩进元素中文本的首行
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-transform	控制元素中的字母
word-spacing	设置字间距
white-space	设置元素中空白的处理方式
text-overflow	设置文本溢出方式
text-shadow	设置文字阴影
word-wrap	允许长文本换行
word-break	单词拆分换行

1.1 文本颜色

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

• 十六进制值 - 如: ＃FF0000
• 一个RGB值 - 如: RGB(255,0,0)
• 颜色的名称 - 如: red

案例：

	body {color:red;}
	h1 {color:#00ff00;}
	h2 {color:rgb(255,0,0);}

1.2 缩进文本

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
使用负值

案例：

	p {text-indent: -5em;}

使用百分比值

案例：

	p {text-indent: 20%;}

1.3 文本水平对齐

使用text-align它会影响一个元素中的文本行互相之间的对齐方式。

属性值如下：

值	描述
left	把文本排列到左边
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果
inherit	规定应该从父元素继承text-align属性的值

案例：

h3 {text-align:left;}
h1 {text-align:center;}
.p1 {text-align:right;}
.p2 {text-align:justify;}

1.4 文本修饰

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

属性值如下：

值	描述
none	默认。定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
blink	定义闪烁的文本
inherit	规定应该从父元素继承text-decoration属性的值

案例:

	h3 {text-decoration: underline;} //下划线

	<h3>hello world</h3>

运行结果：

1.5 文本转换

使用text-transform属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

属性值如下：

值	描述
none	默认。
capitalize	文本中的每个单词以大写字母开头
uppercase	定义仅有大写字母
lowercase	定义无大写字母，仅有小写字母
inherit	规定应该从父元素继承text-transform属性的值

案例：

 	h3 {text-transform: uppercase;}
	
	<h3>hello world</h3>

运行结果：

1.6 字间隔

word-spacing可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

	h3 {word-spacing: 20px;}
	
	<h3>helloworld! helloworld! helloworld!</h3>

运行结果：

1.7 处理空白符

white-space通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

属性值如下：

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

案例：

	<style>
		div {
            width: 100px;
            white-space: nowrap;  //文字超出不换行
            border: 1px solid red;
     	}
	</style>
	
	<div>helloworld! helloworld! helloworld!helloworld!</div> 

1.8 文字溢出处理

text-overflow文本溢出属性指定应向用户如何显示溢出内容

值	描述
clip	修剪文本
ellipsis	显示省略符号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本

案例：

	<style>
        div {
            width: 120px;
            white-space: nowrap; 		//文字超出不换行
            overflow: hidden;			//超出隐藏
            text-overflow: ellipsis;	//文字超出用...代替
            border: 1px solid red;
        }
    </style>
    
	<div>helloworld! helloworld! helloworld!helloworld!</div>

运行结果：

1.9 文本阴影

text-shadow属性适用于文本阴影。

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

案例：

		h3 {
            text-shadow: 5px 5px red;
        }
        
		<h3>helloworld!</h3>

运行结果：

1.10 文本换行

word-wrap属性允许长单词或URL地址换到下一行。

属性值如下：

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

	<style>
        h3 {
            width: 200px;
            word-wrap: break-word;
            border: 1px solid red;
        }
    </style>
    
	<h3>this isavery veryveryveryveryverylongword</h3>

运行结果：

1.11 单词拆分换行

word-break属性指定非CJK脚本的断行规则。
提示:CJK脚本是中国，日本和韩国（“中日韩”）脚本。

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

案例：

<p class="test1"> This paragraph contains some text.
 This line will-break-at-hyphenates.</p>

运行结果：

总结：通过编写此篇博客，能够熟练的使用css的文字属性设置样式，像文字溢出不换行、文字溢出隐藏显示省略号等，这些属性在项目中运用次数的非常多，希望在今后的项目中能够融会贯通，加快样式的编写。非常感想大家阅读此篇博客，如有相关问题可点击评论，后续也将更新内容，敬请期待!!!