一、文本的颜色 “color”
在目前的浏览器标准中，要想改变浏览器默认字体的颜色（#000000）唯一的途径就是通过CSS的“color”属性进行设置。颜色。
color属性可以设置4种类型的值
① 颜色英文单词
可以通过颜色的英文单词直接设置文本的颜色，如
“red”、“”orange、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”
等等。
② HEX（三原色，16进制表示）
通过“#”+16进制表示颜色，
有“#”+“三位”和“#”+“六位”的形式。
若是“三位”的形式，第一位表示“红”，第二位表示“绿”，第三位表示“蓝”，通过取值区间“0-9”,“a-f”(10-16)的组合，如“#26f”，共计能表达4,096个颜色。
若是“六位”的形式，可以表示的颜色数更加细致，第一二为表示“红”，第三四位表示“绿”，第四五位表示“蓝”，同样也是通过取值区间“0-9”,“a-f”的组合，如“#2369fd”，共计能表达16,777,216【一千六百多万】个颜色。
③ RGBa（三原色，十进制表示）
和“HEX”表示三原色一样，该模式同样也是采用三元色的值来表现色彩，不过“RGBa”颜色模式采用的是10进制的值，
格式如“rgb(34, 102, 255)”，值之间用英文逗号“,”进行分割，第一个值表示“红”，第二个值表示“绿”，第三个值表示“蓝”，每个值的区间为“0-255”（256个色阶），同样能表示16,777,216【一千六百多万】个颜色。
除此之外，该模式还支持对不透明度的设置，也就是“RGBa”里面的这个“a”（alpha），它表示不透明度，取值区间是“0到1”之间的浮点数（可保留到两位小数），
“0”表示完全透明，“1”表示完全不透明，写法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255)”。
④ HSLa（色调，饱和度，亮度，不透明度）
该模式通过设置
“色调”（Hue）、
“饱和度”（Saturation）、
“亮度”（Lightness）
“不透明度”（Alpha）
来表现色彩的，不透明度的表示和“RGBa”一样，我们主要来看下面三个值的意义：
- 色调
除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间，共计360个色调； - 饱和度
从该色调的纯黑到该色调的纯色区间，越接近黑色，饱和度越低，越接近纯色，饱和度越高； - 亮度
从“纯黑”到“纯白”这一过程的表示，越接近黑色亮度越低，越接近白色亮度越高。 - 例子
HSL(76, 35%, 45%) ：这是一个色调为76，饱和度35%，亮度45%，不透明的颜色
HSLa(316, 75%, 56%, 0.9)：这是一个色调为316，饱和度75%，亮度56%，不透明度0.9的颜色
⑤ Transparent（透明）
只要设置该值，那文本的内容将变为完全透明，即无论背景为什么颜色或图片，都会完全看不到设置的文字元素，只是起到了一个占位作用，除非文本被选中，如下例：
div { color: transparent;}
需要补充的是，“IE 8”浏览器及以下的版本不支持“RGBa”、“HSLa”模式及“Transparent”值，即不支持透明度部分的值，对常规“RGB”和“HSL”模式仍能正常支持。
二、文本的居中方式“text-align”
该属性用于控制“行内块元素”或“块元素”内“行内元素”（文本元素）的居中方式的，包含三个值：
left（默认）
文本左对齐
center
文本居中对齐
right
文本右对齐
三、段落首行缩进“text-indent”
该属性是用于设置 每个段落首行缩进数量值 的属性，
如果是用于中文布局，一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。
四、文本装饰线“text-decoration”
该属性是为文本上添加一根装饰线，带"href"属性的标签默认会带有一根下划线，就是由该属性的值“underline”设置的。
“text-decoration”属性有以下值：
none（默认）
不显示任何装饰线
underline
在文本下方显示装饰线
overline
在文本上方显示装饰线
line-through
在文本中间显示装饰线，相当于删除线
五、英文字母大小写转“text-transform”
该属性能将“行内元素”中的英文文本进行大小写转换，以满足网站对规范性的要求。
特别在一些对项目产品细节要求至严的跨国企业或合资企业，
他们对网站或应用中的文本格式也有相当高的要求。
当网站中的绝大部分英文文本都是由其它地方整理粘贴而来的时候，如果要逐一去修改这些文本，不仅时间成本大大地增加，也容易出现一些难以一时发现的疏漏，这个时候“text-transform”属性就有它的“用武之地”了。
该属性有以下属性值：
none（默认）
保持文本中英文单词的默认大小写
capitalize
将每个英文单词首字母变为大写字母（而不管他原本是大写还是小写），其它字母即便是小写也不管。
uppercase
将所有英文单词转换为大写字母
lowercase
将所有英文单词转换为小写字母
六、文本的阴影“text-shadow”
该属性的作用是给文本添加阴影效果。
该属性最初是在CSS2.0中被定义的，但在CSS 2.1被删除了，不知道是出于什么考虑，在CSS3.0中又重新被写进了规范。
目前除了IE9及之前版本不支持该属性外，其它主流浏览器钧支持该属性。
该属性有4个值，具体如下：
水平方向阴影偏移（h-shadow）
“0”表示维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”。
垂直方向阴影偏移（v-shadow）
“0”表示维持原位，正数为向上偏移，负数为向下偏移。单位为像素“px”。
阴影模糊距离（blur）
用正数表示阴影模糊的单位距离，距离越大模糊程度越高，单位为像素“px”。
阴影的颜色（color）
支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
和“行内块元素”和“块元素”所用的“box-shadow”（以后会学习）有所不同，文本阴影的属性值里没有“inset”（设置为内阴影）和“spread”（阴影的扩展，单位像素“px”），以后在使用中需要加以区分。
七、段落文本行高“line-height”
该属性是用于设置“行内元素”中文本元素在一行中所占据的高度，（可实现单行文本垂直居中的效果）
使用场景如：表格、导航按钮、自定义样式按钮、标题栏等。
八、单词的间距“word-spacing”
该属性用于设置英文单词之间的间距。
注意
他区分单词时是按照单词两边是否含有空格来判断的，所有如果你的内容是中文，
当你的文字间没有空格时，整体就会被当做一个单词。
当你的每个汉字两边都有空格时，每个汉字才会被当做是一个单词。
其值可以为负数，距离会减小
九、字符的间距“letter-spacing”
和“word-spacing”有所不同，该属性是用于控制字符间的间距。
一个字母，一个汉字，甚至一个空格都是一个字符。
注意：
在html中，多个空格最终会变为一个空格的。
其值可以为负数，距离会减小
十、空格换行处理“white-space”
该属性设置如何处理元素内的空格符和换行符，它主要有以下值：
normal（默认）
由浏览器处理空格和换行
pre
段落里所有的空格符和换行符都会被保留（类似于pre标签）
nowrap
段落内的文本不会换行（类似于没有设置过换行的“notepad”）
pre-wrap
段落里所有的空格符序列和换行符序列都会被保留，这点类似于pre
但是他不会去更改浏览器的默认行为（当内容的宽度小于了窗体的宽度时会出现滚动条的行为）
pre-line
保留换行符，但是多个空格还是会按照浏览器的默认行为处理（多个合并为一个）
**注意：**如果你当前的内容是无空格分隔的一连串的英文，那么他会被浏览器当作是一个单词，不会让他换行，只会出现水平滚动条去适应他。
十一、设置文本方向“direction
该属性是由于控制文本显示方向的，即从左往右，或从右向左。
在有些国家，如：“阿拉伯”、“伊朗”、“以色列”，还有古典的“中日韩”文等等，他们的文字显示方向都是从右向左的，为了适应这些文字方向的需求，如果用手工去设置，耗费的时间成本会过高，也非常容易出错，这个时候“direction”属性会帮你克服这个问题。该属性有两个值：
ltr
默认值,文本方向从左到右
rtl
文本方向从右向左
十二、设置文本溢出时的处理“overflow”
overflow : hidden,scroll,auto
十三、文本的裁切“text-overflow”
该属性规定当文本溢出所在标签时进行的处理。
该属性主要包含两个值：
clip 裁剪文本（从属性意义不大，通过overflow：hidden可实现此效果）
ellipsis显示省略符号来代表被裁剪的文本
不过该属性不能单独使用，必须要配合
“white-space”和“overflow”来使用，
否则会达不到所期望的效果。
显示省略号的流程
- 文本长度需要超出宽度边界
- 不允许内容换行
- 设置超出就隐藏
- 设置文本末尾显示省略号
扫一扫
2016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
