图解CSS3读书笔记 文本与颜色

CSS3文本

css字体类型属性

font-family, font-style(normal、italic、oblique[倾斜]), font-weight,
font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持),
font-stretch(无浏览器支持), font-variant(定义字体大小写，取值有：normal、small-caps)

---

这里提一下font-size-adjust：

这个属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。 aspect指字体的小写字母 "x" 的高度与
"font-size" 高度之间的比率。
通常aspect值较高的字体具有较好的易读性。在元素下定义了为多种字体定义相同的aspect值，可保证当第一个字体不可用时，浏览器可以找出什么样的font-size使用第二选择字体显示文字。

再提一下font-variant，当其设定的值为small-caps(小写型大写字母)时，字体是这样显示的：

---

回到刚刚谈的6个文本属性，其中font-family是复合属性中必不可少的属性。此外还有一个复合属性font。

font: font-style font-weight/line-height font-family

css文本类型属性

word-spacing(词间距)、letter-spacing(字符间距)、vertical-align、text-decoration、text-indent、text-align、line-height、
text-transform(定义文本大小写，取值：none,uppercase,lowercase,capitalize)、
text-shadow、white-space(定义文本之间的空白符显示与否)、direction

css文本阴影属性——text-shadow

用法：

text-shadow: [color] x-offset y-offset blur-radius(只能是正值)

这个属性的用法跟box-shadow挺相似的，都是需要定义颜色、x轴偏移、y轴偏移和模糊半径。
但是box-shadow多了一个阴影扩展的属性，位于模糊半径后。

兼容性：

ie9+以及其他主流浏览器。
若想更好地兼容ie，可使用滤镜属性。

E: {filter:shadow(Color= 颜色值, Direction= 数值, Strength= 数值)}
其中Direction用于设定投影方向。

css溢出文本属性——text-overflow

语法：

text-overflow: clip || ellpisis

clip: 简单裁切，不显示省略标记
ellpisis: 文本溢出时显示省略（…）标记

兼容性：
IE6+！！！！以及其他主流浏览器。

使用方法：
先来看clip的情况：
代码：

.clip {
    width: 100px;
    border: 1px solid saddlebrown;
    text-overflow: clip;
    }

效果：

明显看出text-overflow没有起到任何裁切的效果。要想这个属性生效，需要配合其他三个属性使用，分别是 over-flow: hidden(定义超出隐藏)、white-space: nowrap(定义文本不换行)、width(元素宽度)。再来看看改进后的代码：

.clip {
    width: 100px;
    border: 1px solid saddlebrown;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    }

效果：

---

现在来看看ellipsis的情况：
同上啦，都是需要配合width、overflow: hidden、white-space: nowrap使用的。
代码：

.clip {
      width: 100px;
      border: 1px solid saddlebrown;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
        }

效果：

看上去就比clip自然多了。并且这个时候文本输出是完整的，只不过收到了元素容器大小限制无法全部显示出来，这是就用"…"代替隐藏的部分。

css3文本换行

在text-overflow的每个例子中都用到了white-space属性，用来禁止文本换行。为了增强文本换行显示的功能，css3中又添加了word-wrap和word-break属性。

word-wrap

在CSS3中，word-wrap可以实现长单词和URL地址的自动换行。

语法：

word-wrap: normal | break-word

normal: 浏览器只在半角空格或连字符的地方进行换行。
break-word: 将内容在边界内换行（不截断英文单词换行）

---

word-break

语法：

word-break: normal | break-all | keep-all

normal: 浏览器只在半角空格或连字符的地方进行换行。
keep-all: 不允许字断开。如果是中文把前后标点符号内的一个汉字短语整个换行，英文单词整个换行；如果出现某个英文字符长度超过容器边界，后面的部分将撑破容器。（个人感觉跟normal类似）
break-all: 强行截断英文单词，达到词内换行效果。

这里比较一下word-wrap和word-break的区别：

/*这是测试word-wrap为break-word的box*/
.box {
    width: 200px;
    word-wrap: break-word;
    border: 1px solid sandybrown;
    }
    
 /*这是测试word-break为break-all的box*/    
.box2 {
    width: 200px;
    word-break: break-all;
    border: 1px solid sandybrown;
    }
    

效果：

附加word-wrap为normal和word-break为keep-all的测试：

---

white-space

这个属性主要用来声明建立布局过程中如何处理元素中的空白符。

语法：

white-space: normal | pre | nowrap | pre-line | pre-wrap | inherit

pre: 类似html中<pre>标签效果。
nowrap: 文本不会换行。直至遇到<br/>
pre-line: 合并空白符，但是保留换行符。意思是不能有空格，但可以换行。
pre-wrap: 保留空白符和换行符。

现在来测试一下：

html：

css：

• white-space: nowrap;
  

• white-space: pre;
  

• white-space: pre-line;
  

• white-space: pre-wrap;
  

CSS3颜色

css3新增的颜色定义属性：

rgba(r,g,b,a)、hsl(h,s,l)、hsla(h,s,l,a)

其中a的值为0~1

浏览器兼容性为ie9+以及其他主流浏览器;

这里提一下rgba和opacity为元素设置透明度的区别：

opacity只能为元素的背景设置透明度，并且影响其后代元素，使其后代元素都将继承其透明度。
rgba可以对元素任何具有颜色的属性设置。并且对其后台元素无影响。

因为hsl的使用频率较少，这里就不详细叙述了。可以看看这篇文章：Click here