[align=center]文本排版之CSS属性[/align]
[b]1.1段落设置[/b]
1、text-indent,段落首行文字缩进。
例:
.for-mat{
text-indent:20px;[color=green]/*首行缩进20px*/[/color]
}
2、水平对齐方式——设置或检索对象(图片和文字等)中文本的左中右对齐方式。
语法:
text-align:center;居中对齐。
text-align:left;居左。
text-align:right;居中。
[color=blue]* text-align:justify;两端对齐(不推荐使用,通常大部分浏览器不使用)。[/color]
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; [color=green]/*设置每行的行高20px*/[/color]
}
.div2{
line-height:30px;
height:30px;
[color=green]/*高度固定上下居中*/[/color]
}
总结:
遇见内容与图片混排,希望图片和文字内容上下居中在一排,但是文字会居图片下部,通常解决方法是使用两个盒子分别设置行高与高度。
[b]1.2文字设置[/b]
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:"设置字体名称";
[color=red]注意:在这里字体只能设置为常见或系统自带的字体,而不能设置自己安装的字体。电脑自带字体,和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif等。[/color]
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;
}
[b]1.3强制同一行内显示所有文本不换行——CSS white-space属性[/b]
使文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示。当然为了隐藏超出的文字内容我们可以再加一个css overflow:hidden样式。
语法:
white-space:normal;//默认处理方式
white-space:nowrap;//强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
[color=red]注意:使用white-space样式使文字内容在一行内显示时,遇到html br强制换行标签,无论是设置white-space与否都会被<br>强制换行。
[/color]
[b]1.1段落设置[/b]
1、text-indent,段落首行文字缩进。
例:
.for-mat{
text-indent:20px;[color=green]/*首行缩进20px*/[/color]
}
2、水平对齐方式——设置或检索对象(图片和文字等)中文本的左中右对齐方式。
语法:
text-align:center;居中对齐。
text-align:left;居左。
text-align:right;居中。
[color=blue]* text-align:justify;两端对齐(不推荐使用,通常大部分浏览器不使用)。[/color]
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; [color=green]/*设置每行的行高20px*/[/color]
}
.div2{
line-height:30px;
height:30px;
[color=green]/*高度固定上下居中*/[/color]
}
总结:
遇见内容与图片混排,希望图片和文字内容上下居中在一排,但是文字会居图片下部,通常解决方法是使用两个盒子分别设置行高与高度。
[b]1.2文字设置[/b]
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:"设置字体名称";
[color=red]注意:在这里字体只能设置为常见或系统自带的字体,而不能设置自己安装的字体。电脑自带字体,和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif等。[/color]
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;
}
[b]1.3强制同一行内显示所有文本不换行——CSS white-space属性[/b]
使文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示。当然为了隐藏超出的文字内容我们可以再加一个css overflow:hidden样式。
语法:
white-space:normal;//默认处理方式
white-space:nowrap;//强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
[color=red]注意:使用white-space样式使文字内容在一行内显示时,遇到html br强制换行标签,无论是设置white-space与否都会被<br>强制换行。
[/color]