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

yvonne

CSS3文本

css字体类型属性

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


这里提一下font-size-adjust

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

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

clipboard.png


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

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

css文本类型属性

word-spacing(词间距)、letter-spacing(字符间距)、vertical-aligntext-decorationtext-indenttext-alignline-height
text-transform(定义文本大小写,取值:none,uppercase,lowercase,capitalize)、
text-shadowwhite-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;
    }

效果:
clipboard.png

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

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

效果:

clipboard.png


现在来看看ellipsis的情况:
同上啦,都是需要配合widthoverflow: hiddenwhite-space: nowrap使用的。
代码:

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

效果:

clipboard.png

看上去就比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;
    }
    

效果:

clipboard.png

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

clipboard.png


white-space

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

语法:

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

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

现在来测试一下:

html:
clipboard.png

css:

  • white-space: nowrap;
    clipboard.png

  • white-space: pre;
    clipboard.png

  • white-space: pre-line;
    clipboard.png

  • white-space: pre-wrap;
    clipboard.png

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

阅读 3.1k

Nodes of Front-end
前端妹砸的笔记本。。
1.3k 声望
93 粉丝
0 条评论
1.3k 声望
93 粉丝
文章目录
宣传栏