(〇) 字体

font-family西文字体Arial在前中文字体微软雅黑在后

font-family西文字体Arial在后中文字体微软雅黑在前

1.字体样式:font-style:italic(斜体) 2.字体粗细:font-weight:bold(粗体)
3.字体大小:font-size: x-large
4.字体大小斜体:font-size: xx-large;font-style: italic

(一) 首行缩进(text-indent)

首行缩进This is a paragragh.人总是要死的,但死的意义有不同。中国古时候有个文学家叫做司马迁的说过:人固有一死,或重于泰山,或轻于鸿毛。为人民利益而死,就比泰山还重;替法西斯卖力,替剥削人民和压迫人民的人去死,就比鸿毛还轻。张思德同志是为人民利益而死的,他的死是比泰山还要重的。

首行悬挂缩进This is a paragragh.因为我们是为人民服务的,所以,我们如果有缺点,就不怕别人批评指出。不管是什么人,谁向我们指出都行。只要你说得对,我们就改正。你说的办法对人民有好处,我们就照你的办。精兵简政这一条意见,就是党外人士李鼎铭生提出来的;他提得好,对人民有好处,我们就采用了。只要我们为人民的利益坚持好的,为人民的利益改正错的,我们这个队伍就一定会兴旺起来。

普通段落(西文顶格)This is a paragragh.因为我们是为人民服务的,所以,我们如果有缺点,就不怕别人批评指出。不管是什么人,谁向我们指出都行。只要你说得对,我们就改正。你说的办法对人民有好处,我们就照你的办。精兵简政这一条意见,就是党外人士李鼎铭生提出来的;他提得好,对人民有好处,我们就采用了。只要我们为人民的利益坚持好的,为人民的利益改正错的,我们这个队伍就一定会兴旺起来。

首行相对父元素缩进10%。由于父元素是500px,因此本段落首行就缩进50px。This is a paragragh.这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容

some text. some text. some text.

This is a paragragh.text-indent属性可以继承

(二) 文本对齐(text-align)

左对齐(left)This is a paragragh.人总是要死的,但死的意义有不同。中国古时候有个文学家叫做司马迁的说过:人固有一死,或重于泰山,或轻于鸿毛。为人民利益而死,就比泰山还重;替法西斯卖力,替剥削人民和压迫人民的人去死,就比鸿毛还轻。张思德同志是为人民利益而死的,他的死是比泰山还要重的。

居中(center)This is a paragragh.人总是要死的,但死的意义有不同。中国古时候有个文学家叫做司马迁的说过:人固有一死,或重于泰山,或轻于鸿毛。为人民利益而死,就比泰山还重;替法西斯卖力,替剥削人民和压迫人民的人去死,就比鸿毛还轻。张思德同志是为人民利益而死的,他的死是比泰山还要重的。

右对齐(right)This is a paragragh.人总是要死的,但死的意义有不同。中国古时候有个文学家叫做司马迁的说过:人固有一死,或重于泰山,或轻于鸿毛。为人民利益而死,就比泰山还重;替法西斯卖力,替剥削人民和压迫人民的人去死,就比鸿毛还轻。张思德同志是为人民利益而死的,他的死是比泰山还要重的。

(三) 垂直对齐(text-decoration):middle|top|bottom

使用valign="middle" 使用valign="bottom" 使用valign="top"
使用vertical-align:middle 使用vertical-align:bottom 使用vertical-align:top

display:table-cell; vertical-align:middle
display:table-cell; vertical-align:bottom
display:table-cell; vertical-align:top

(四) 行高(line-height):因子|百分比|长度

通常定义line-height值1.1-1.5比较美观,通常定义line-height值1.1-1.5比较美观,通常定义line-height值1.1-1.5比较美观。

定义line-height小于1.0、100%或font-size,会引发文字重叠的现象,会引发文字重叠的现象,会引发文字重叠的现象。

(五) 字词间隔:词间距(word-spacing)、字间距(letter-spacing)

This is a normal paragraph. 这 是 普通 段落,这是普通段落。

正数词间距(word-spacing:0.5em)The spaces between words will be increased. 单词 之间 的 间距 被 扩大了,单词之间的间距被扩大了。

负数词间距(word-spacing:-0.2em)The spaces between words will be decreased. 单词 之间 的 间距 被 缩小了,单词之间的间距被缩小了。

正数字间距(letter-spacing:0.2em)The spaces between letters will be increased. 字符之间的间距被扩大了,字符之间的间距被扩大了。

负数字间距(letter-spacing:-0.2em)The spaces between letters will be decreased. 字符之间的间距被缩小了,字符之间的间距被缩小了。

(六) 文本装饰(text-decoration):下划|上划|贯穿

下划线(underline)上划线(overline)贯穿线(line-through)

(七) 文本阴影(text-shadow)

普通文字阴影效果模糊文字阴影效果多重模糊文字阴影效果

(八)单词转换(text-transform):改变字母的大小写

大写:Hello world 小写:Hello world 首字母大写:Hello world

(九)空格处理(white-space):normal(默认:合并空白、越界换行)|nowrap(合并空白、不越界换行)|pre-line(保持换行、合并空格、越界换行)|pre(等宽字体、保持空格、不越界换行)|pre-wrap(等宽字体、预格式、自动换行)

这个 段落里面有 很多 的空格 以及很多 的换行符,测试 不同的 空格处理方式。(1)normal

这个 段落里面有 很多 的空格 以及很多 的换行符,测试 不同的 空格处理方式。(2)nowrap

这个 段落里面有 很多 的空格 以及很多 的换行符,测试 不同的 空格处理方式。(3)pre-line

这个 段落里面有 很多 的空格 以及很多 的换行符,测试 不同的 空格处理方式。(4)pre

这个 段落里面有 很多 的空格 以及很多 的换行符,测试 不同的 空格处理方式。(5)pre-wrap

(十)书写模式(writing-mode)

本段文字将按照水平从左到右的书写方向进行流动。

本段文字将按照水平从从右到左的书写方向进行流动。

本段文字将按照垂直从右到左的书写方向进行流动。

本段文字将按照垂直从左到右的书写方向进行流动。