文本排版之CSS属性

文本排版之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:num px;
    行高line-height的值num可以为百分比数字/由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。在CSS布局中一般采用像素px为单位。
行高应用：
    line-height行高属性，运用到对文字排版，实现上下排文字间隔距离，以及单排文字在一定高度情况上下垂直居中布局。
1>对于文章类文字上下排间隔
    一般对对象设置line-height行高属性，即可实现让自动换行文字排版均匀间隔多少。
2>对单排文字高度固定的上下垂直居中。
    一个固定30px高度div对象，使其文字内容上下垂直居中，即可使用line-height:30px即可。
例：
html代码
<div class="div1">
    <p>我是第一排</p>
    <p>我是第二排</p>
    <p>我是第三排</p>
</div>
<div class="div2">我高度为30px,实现上下居中</div>
css代码
.div1{
line-height:20px; /*设置每行的行高20px*/
}
.div2{
line-height:30px;
height:30px;
/*高度固定上下居中*/
}
总结：
    遇见内容与图片混排，希望图片和文字内容上下居中在一排，但是文字会居图片下部，通常解决方法是使用两个盒子分别设置行高与高度。
1.2文字设置
1、font
代码：font:12px/1.5 Arial, 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设置对象内容字体大小。
<div style="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强制同一行内显示所有文本不换行——CSS white-space属性
    使文字不自动换行，无论CSS宽度设置多少，所有文字都在一行内显示。当然为了隐藏超出的文字内容我们可以再加一个css overflow:hidden样式。
语法：
white-space:normal;//默认处理方式
white-space:nowrap;//强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
注意：使用white-space样式使文字内容在一行内显示时，遇到html br强制换行标签，无论是设置white-space与否都会被<br>强制换行。