Text Effects and Typographic Styles

Text Effects and Typographic Styles

thebookofcss3-chapter-06

CSS中默认的坐标轴原点在元素左上角。

text-shadow

此属性为文本添加阴影效果,需要指定阴影的坐标位置。

E { text-shadow: x y; }

阴影的默认颜色是从其父元素继承而来的,也可以指定阴影颜色。

E { text-shadow: x y color; }

阴影还可以有模糊效果,blur-radius 设置模糊效果的范围,默认值是0,不能为负值。

E { text-shadow: x y blur-radius color; }

来看下面的例子,先不设置模糊效果:

E { text-shadow: x y blur-radius color; }

E { text-shadow: x y blur-radius color; }

E { text-shadow: x y blur-radius color; }

h1{font-size: 50px}
.one { text-shadow: -3px -3px #8cc83f; }
.two { text-shadow: -5px 3px #8cc83f; }
.three { text-shadow: -5px 0 #8cc83f; }

设置模糊效果后:

.one { text-shadow: -3px -3px 3px #8cc83f; }
.two { text-shadow: -5px 3px 5px #8cc83f; }
.three { text-shadow: -5px 0 10px #8cc83f; }

同时使用多个阴影效果

text-shadow 支持同时使用多个阴影效果。

E { text-shadow: value, value, value; }

text-shadow: value, value, value;

text-shadow: value, value, value;

.one { text-shadow: 0 -2px 2px #8cc83f, 2px -4px 2px #6ab8c8, 4px -6px 2px #c063c8; }
.two { text-shadow: -8px 6px 9px #c8160f, -5px 4px 6px #c8c81f, -2px 2px 3px #33adcb; }

Restricting overflow

text-overflow 属性用来对处理文本内容的溢出。

E { text-overflow: keyword; }

可用的关键字有 clipellipsis,默认值是clip
clip,如果文本内容超出其容器的宽度,直接截断;ellipsis,如果超出,文本的最后变成省略号。

此属性要配合其他两个属性一起使用:

overflow: hidden;
white-space: nowrap;

white-space 属性用来设置如何处理元素内的空白。 没想到,最常用的竟然是不让文本换行...

white-space的值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

Aligning text

text-align 并不是在CSS3中才定义,CSS3为其添加了两个值:start, end,如果文本方向是从左到右,那么 start 对就 leftend 对应 right

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

text-align-last 用来处理段落的最后一行如何对齐,其关键字同text-align

E { text-align-last: keyword; }

Controlling line wrapping

word-wrap,如其名,控制是否允许让单词换行,其值可以是:normal, break-word

E { word-wrap: keyword; }

Resizing elements

resize属性,可以拖拽元素来改变其大小,注意,只能往更宽和更高的方向拖拽。其关键字有,horizontal, vertical, both, none
实测发现,必须和overflow属性一起使用才有效。

p {
    overflow: hidden;
    resize: both;
}

由于浏览器支持的不好,文章中忽略掉的属性:

E{ hyphens: keyword; } /* manual, auto, none  通过连字符来换行 */
E{ text-overflow: ellipsis ellipsis; } /* 此属性支持两个值,第一个设置文本结尾,第二个设置文本开始处*/
E{ text-overflow: '~'; } /* 被用来设置代替省略号 */


此文是对《The Book of CSS3 2nd edition》第6章的归纳,方便以后查阅。
感谢其作者Peter Gasston !

你可能感兴趣的:(Text Effects and Typographic Styles)