CSS文本、字体与颜色

文本、字体与颜色

text-shadow文本定义文本阴影或模糊效果

text-overflow文本定义省略文本的处理方式

word-wrap文本定义文本超过指定容器的边界时是否断开转行

HSL颜色表示通过对色调（H）、饱和度（S）和亮度（L）三个颜色通道的变化以及他们相互之间的叠加来表示各式各样的颜色。

HSLA颜色表示方式HSLA是在HSL的基础上增加一个透明度（A）的设置。

 

CSS3新增的文本属性

white-space-collapse初始值为collapse，适用于所有元素。该属性用于设置或检索如何处理对象内包含的空格字符；

white-space初始值为无，适用于所有元素，该属性设置或检索对象空格字符的处理方式；

word-break属性初始值为normal，适用于所有元素，该属性设置或检索对象内文本的字内换行行为，对于中文，应该使用break-all;

text-wrap属性的初始值为normal，适用于所有元素，text-wrap属性设置或检索对象内文本的换行模式；

word-wrap属性针对字符换行问题进行处理，设置或检索当前行超过指定容器的边界时是否断开转行；

text-align属性初始值为start，适用于所有元素，该属性设置或检索对象中文本的对齐方式；

text-align-last属性初始值start，适用于所有元素，该属性设置或检索对象中最后一行文本的对齐方式，当text-align设置为justity时，强制换行的文本对齐方式；

text-justify初始值为auto，适用于所有元素，该属性设置或检索对象内调整文本使用的对齐方式；

word-spacing初始值为normal，适用于所有元素，该属性检索或设置对象中的单词之间插入的空格；

letter-spacing初始值为normal，适用于所有元素，该属性检索或设置对象中字符之间的间隔；

punctuation-trim初始化为none，适用于所有元素及其内容，该属性检索或设置标点符号的修剪；

text-emphasis初始值为none，适用于所有元素及其内容，该属性检索或设置重点文本样式；

text-shadow该属性检索或设置文本阴影；

text-outline初始值为none，适用于所有元素及其内容，该属性检索或设置文本的外形轮廓；

text-indent初始值为0，适用于块状元素、行内块状元素或者表格单元格，该属性检索或设置对象中的文本的缩进；

hanging-punctuation属性初始值为none，适用于块状元素、行内块状元素或者表格单元格，该属性检索或设置对象是否悬挂一个标点符号。

text-overflow属性初始值为无，属性可以设置超长文本省略显示，适用于块状元素或行内元素；

word-break属性定义文本自动换行；

line-break：专门负责控制日文换行；

word-wrap：可以控制换行，word-wrap：breakword控制是否断词，而不是断字符；

word-break：主要针对亚洲语言和非亚洲语言进行控制换行；

white-space：具有格式化文本作用，当属性取值为nowrap时，表示强制在同一行内显示所有文本，而属性值为pre时，表示显示预定义文本格式。

颜色样式

CSS3增加了3种颜色值定义模式：RGBA颜色值、HSL颜色值和HSLA颜色值，并且允许通过对RGBA颜色值和HSLA颜色值设定Alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。

• RGBA色彩模式是RGB色彩模式的扩展，它在红、绿、蓝三原色通道基础上增加了不透明度参数，其语法格式如下所示：

rgba(r,g,b,<opacity>);

• HSL色彩模式是工业界的一种颜色标准，它通过对色调（H）、饱和度（S）和亮度（L）3个颜色通道的变化以及它们相互之间的叠加来获得各种颜色，是目前运用最广的颜色系统之一。表示语法如下：

hsl(<length>,<percentage>,<percentage>);

• HSLA色彩模式是HSL色彩模式的扩展，在色相、饱和度、亮度三要素基础上增加了不透明度参数。使用HSLA色彩模式，可以定义不同透明度效果，语法格式如下：

hsla(<length>,<percentage>,<opacity>);

在CSS3中，除了使用Alpha通道的方法来设定透明度外，也可以通过opacity属性来设定透明度。

如果将颜色值指定为transparent，则会将背景、文字或边框等的颜色设定为完全透明，相当于使用了值为0的alpha通道。

border-color属性可以设置边框的颜色，使用它可以为边框设置更多的颜色，从而方便设计师设计渐变等炫丽的边框效果，基本语法如下所示：border-color:<color>;

• border-top-color:定义指定元素顶部边框的色彩；
• border-right-color：定义指定元素右侧边框的色彩；
• border-bottom-color：定义指定元素底部边框的色彩；
• border-left-color：定义指定元素左侧边框的色彩。

border-image能够模拟background-image属性功能，且功能更加强大，该属性的基本语法如下所示：

border-image:none|<image>

border-image属性能够根据border-image-slice属性值把背景图像切片分为几部分。

box-shadow属性定义元素的阴影，它与text-shadow属性功能是相同的。box-shadow属性值包含6个参数值：阴影类型、X轴位移、Y轴位移、阴影大小、阴影扩展和阴影颜色。

 

background-clip属性定义背景图像的裁剪区域，该属性的基本语法如下：background-clip:border|padding|content|no-clip;

• border:从边框区域向外裁剪背景；
• padding：从补白区域向外裁剪背景；
• content：从内容区域向外裁剪背景；
• no-clip：从边框区域向外裁剪背景。

background-size属性可以控制背景图像的显示大小。

background-break属性定义平铺內联元素背景图像时的循环方式，该属性包括3个值：bounding-box、each-box和continuous。

----------------------------------------------------------------------------------------------------------------------------------