文本排版之CSS属性

1.1段落设置

1、text-indent，段落首行文字缩进。

例：

.for-mat{

text-indent:20px;/*首行缩进20px*/

}

2、水平对齐方式——设置或检索对象（图片和文字等）中文本的左中右对齐方式。

语法：

text-align:center;居中对齐。

text-align:left;居左。

text-align:right;居中。

*text-align:justify；两端对齐（不推荐使用，通常大部分浏览器不使用）。

3、行高上下居中——设置内容（图片、文字）行高上下居中。

行高语法：

line-height:numpx;

行高line-height的值num可以为百分比数字/由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。在CSS布局中一般采用像素px为单位。

行高应用：

line-height行高属性，运用到对文字排版，实现上下排文字间隔距离，以及单排文字在一定高度情况上下垂直居中布局。

1>对于文章类文字上下排间隔

一般对对象设置line-height行高属性，即可实现让自动换行文字排版均匀间隔多少。

2>对单排文字高度固定的上下垂直居中。

一个固定30px高度div对象，使其文字内容上下垂直居中，即可使用line-height:30px即可。

例：

html代码

<divclass="div1">

<p>我是第一排</p>

<p>我是第二排</p>

<p>我是第三排</p>

</div>

<divclass="div2">我高度为30px,实现上下居中</div>

css代码

.div1{

line-height:20px;/*设置每行的行高20px*/

}

.div2{

line-height:30px;

height:30px;

/*高度固定上下居中*/

}

总结：

遇见内容与图片混排，希望图片和文字内容上下居中在一排，但是文字会居图片下部，通常解决方法是使用两个盒子分别设置行高与高度。

1.2文字设置

1、font

代码：font:12px/1.5Arial,Helvetica,sans-serif;

分析：

font(字设置):12px(字大小12像素)/1.5(相当于line-height为1.5倍字大小)Arial,Helvetica,sans-serif(字体);

2、font-family，设置字体字形。

语法：

font-family:"设置字体名称";

注意：在这里字体只能设置为常见或系统自带的字体，而不能设置自己安装的字体。电脑自带字体，和常设置文字字体有黑体、新宋体、宋体、Arial,Helvetica,sans-serif等。

3、font-size，设置元素的字体大小。

属性值：

把字体的尺寸设置为不同的尺寸，从xx-small到xx-large。

xx-small最小。

x-small较小。

small设置文字字体大小为小。

medium默认值medium，根据字体进行调整。

large大。

x-large较大。

xx-large最大。

smaller把font-size设置为比父元素更小的尺寸。

larger把font-size设置为比父元素更大的尺寸。

length把font-size设置为一个固定的值。

%把font-size设置为基于父元素的一个百分比值。

可取具体长度单位值。

常见运用：

1>直接标签内使用font-size设置对象内容字体大小。

<divstyle="font-size:14px">我被设置字体大小为14px</div>

2>使用HTML标签与CSS样式分离设置对象内容字体大小。

.for-mat{

font-size:12px;/*设置对象具体字体大小为12px*/

}

4、color，设置文字颜色。

5、font-style，设置使用斜体、倾斜或正常字体。

语法：

font-style:normal;正常的字体(默认字体样式，可用于去掉html<i>斜体标签的默认斜体样式)。

font-style:italic;使文字斜体。对于没有斜体变量的特殊字体，将应用oblique。

font-style:oblique;倾斜的字体。

6、font-weight，设置文字的粗细。

font-weight参数：

normal:正常的字体。相当于number为400。声明此值将取消之前任何设置。

bold:粗体。相当于number为700。也相当于<b>标签的作用。

bolder:IE5+　特粗体。

lighter:IE5+　细体。

number:IE5+　100|200|300|400|500|600|700|800|900

7、text-decoration，设置文字是否有下划线。

语法：

text-decoration:none;无装饰，通常对html下划线标签去掉下划线样式。

text-decoration:underline;添加下划线样式。

text-decoration:line-through;添加删除线样式-贯穿线样式。

text-decoration:overline;添加上划线样式。

8、font-variant，设置英文字母全大写后缩小字体。

语法：

font-variant:normal;正常的字体。

font-variant:small-caps;将文本里英文转为全大写，并以缩小方式显示。

9、text-transform，设置英文大小写的转换（大转小，小转大，开头第一个字母大写）。

语法：

text-transform:none无转换发生

text-transform:capitalize将每个单词的第一个字母转换成大写，其余无转换发生

text-transform:uppercase转换成大写

text-transform:lowercase转换成小写

10、letter-spacing，设置文字的间隔（字间距、字符间距、字体间距）。

例：

.for-mat{

letter-spacing:8px;

font-size:36px;

font-family:”黑体”;

color:#FF0000;

}

1.3强制同一行内显示所有文本不换行——CSSwhite-space属性

使文字不自动换行，无论CSS宽度设置多少，所有文字都在一行内显示。当然为了隐藏超出的文字内容我们可以再加一个cssoverflow:hidden样式。

语法：

white-space:normal;//默认处理方式

white-space:nowrap;//强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

注意：使用white-space样式使文字内容在一行内显示时，遇到htmlbr强制换行标签，无论是设置white-space与否都会被<br>强制换行。