网页css样式之文本排版知识梳要

一：需求效果

网页文字的排版，说难也不能难，往往我们不清楚、模糊的情况下，查一下w3c或者百度，一下就出来咯，次数多了终究显得麻烦。为了解决这一通病，总结了一些加深一下理解，让以后在网页的文字排版随心就能达到在word排版的境界。

二：知识梳要

font的复合属性包含以下这些（重点总结常用）

1： font-size属性重要设置字体大小  属性值有：

值	描述
xx-small
x-small
small
medium	默认值
large
x-large
xx-large
smaller	设置比父元素更小的尺寸
larger	设置比父元素更大的尺寸
length	设置为一个固定的值
%	基于父元素的一个百分比的值
inherit	从父继承字体尺寸

2：font-style属性设置字体样式     属性值有：

normal  ------->默认值
italic      -------->浏览器会显示一个斜体的字体样式，注意是选择该字体的有的倾斜样式字体
oblique ---------> 浏览器会显示一个倾斜的字体样式，这是物理上强行倾斜
inherit   ---------> 规定应该从父元素继承字体样式

3:font-weight 设置字体粗细          属性值有：

normal ----------->默认值
bold      ----------->定义粗体字符
bolder  ----------->定义更粗体字符
lighter  ------------>定义更细的字符
100~900 --------->定义由粗到细的字符。100等价于lighter  400等价于nomarl   700等价于bold  900等价于bolder（经测试与bold与差异）
inherit  ------------>继承父元素的font-weight

4：font-family属性设置字体系列 如：

   有两种类型的字体系列名称：
family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。

5：font-variant属性
把段落设置为小型大写字母字体，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小        属性值有：

normal--------------->默认值
small-caps--------->浏览器会显示小型大写字母的字体
inherit---------------->从父元素继承font-variant属性值

6.text-transform  控制元素中的字母
属性值有：

•text-transform： capitalize | uppercase |lowercase 

（文字大小写转换，值分别是， 将单词首字母转大写 | 所有字母转大写 | 所有字母转小写，只对英文单词起作用。）

letter-spacing属性 （设置文本中元素的字母间距）

属性值有:

normal--------->默认值。规定字符没有额外的空间
length---------->定义字符间的固定空间的距离（允许使用负值）
inherit ---------->从父元素继承letter-spacing的属性值            注意：ie不支持该属性值

word-spacing属性 （设置文本中元素的字或者单理解单词间距，一般浏览器用空格来识别）

属性值有：

normal-------------->默认；定义单词间的标准空间
length  ------------->定义单词间固定空间
inherit--------------->从父元素继承word-spacing的属性值     注意：ie不支持

white-space属性 （设置如何处理元素内的空白）

属性值：

normal------------>默认；空白会被浏览器忽略（只留一个）
nowrap------------>文本不换行，文本会在同一行上继续，直到遇到<br/>标签为止
pre------------------>空白，换行会被浏览器保留。其行为方式类似html中的<pre>标签
pre-wrap---------->保留空白符序列，但是正常的进行换行
pre-line------------>合并空白符序列（去掉多余空白符），但也能保留换行符
inherit-------------->从父元素继承white-space属性值             注意：ie不支持

text-indent属性 （设置文本段落的第一行进行缩进）

属性值有：

length-------------->定义固定的缩进，默认值为0
%-------------------->定义基于父元素宽度的百分比的缩进
inherit-------------->从父元素继承text-indent属性值   注意：ie不支持该属性

text-shadow：规定添加到文本的阴影效果

语法：text-shadow: h-shadow v-shadow blurcolor;

说明：

1、h-shadow：必需，水平阴影的位置，允许负值

2、v-shadow：必需，垂直阴影的位置，允许负值

3、blur：可选，模糊的距离

4、color：阴影的颜色

text-align：水平对齐方式

语法：{text-align:left/right/center/justify(“两端对齐中文不起作用”);}

vertical-align：垂直对齐方式

语法：{vertical-align:top/bottom/middle/baseline;}

适用于：指定图片垂直对齐方式，相对于其他文字

该属性只对inline-block类型的元素起作用，他设置的是元素左右两边的元素相对于自己的对齐方式

line-height属性 （设置行间的距离 即行高）

属性值有：

normal---------------------->默认。设置合理的行间距
number--------------------->设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length----------------------->设置固定的行间距
%----------------------------->基于当前尺寸的百分比行间距
inherit----------------------->从父元素继承line-height属性值    注意：ie不支持

word-wrap属性

word-wrap属性允许长的内容可以自动换行。
语法结构：word-wrap:
normal|break-word;
normal:只在允许的断字点换行（浏览器保持默认处理）。
break-word:在长单词或url地址内部进行换行。

生活寄语

爱代码，爱生活！