css网页布局中文字排版属性和用法
包括:设定字体、颜色、大小、段落空白，首字下沉、首行缩进、中文字的截断、固定宽
度词内折行(word-wrap和word-break)等。
一、设定文字字体、颜色、大小等使用font等。 font-style设定斜体，比如font-style: italic; font-weight设定文字粗细，比如font-weight: bold; font-size设定文字大小，比如font-size: 12px;(或者9pt，不同单位显示问题) line-height设定行距，比如line-height: 150%; color设定文字颜色(注意不是font-color)，比如color: red; font-family设定字体，比如
font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;(这是通用的
写法) 上面是常用的属性，更多参考css手册。
二、段落排版:使用margin、padding和text-align。 中文段落使用,p标签(也可以是
其他容器)，左右(相当于缩进)、段前段后的空白，都可以用margin或padding。比如: p{ margin: 18px 6px 6px 18px;/*分别是上、右、下、左，十二点开始的顺时针方向*/ margin:18px 6px;/*
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
示上下为18，左右为6*/ margin:1px 2px 3px;/*表示上为1px，下为
6px,左右为2px*/ } 文字的对齐方式用text-align，比如: p{ text-align: center; /*居中对齐*/ text-align: justify/*两端对齐*/ } 对齐方式还有left、right。 有很多
新手对margin、padding不是很熟悉，看下面图片的表示。
三、竖排文字:使用writing-mode。 writing-mode属性有两个值lr-tb和tb-rl，前者
是默认的左-右、上-下，后者是上-下、右-左。比如: p{ writing-mode: tb-rl; } 可
以结合direction排版。
四、项目符号的问题:使用list-style 在CSS里项目符号有disc(实心圆点)、circle(空心圆圈)、square(实心方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无)。比如设定一个列表(ul或ol)的项目符号为方块，如: li{ list-style: square; } 另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在
list-style下直接写url(“图片地址”)就可以了。但不提倡这样的方式。建议您设置图片为li 的
背景。
五、首字下沉效果 伪对象:first-letter配合font-size、float可以制作首字下沉效果。
比如: p:first-letter{ padding: 6px; font-size: 32pt; float: left;
}
六、文本缩进:使用text-indent text-indent可以使得容器内首行缩进一定单位。比
如中文段落一般每段前空两个汉字。可以这么写: p{ text-indent: 2em; /*em是相对
单位，2em即现在一个字大小的两倍*/ }
七、固定宽度汉字截断:使用text-overflow(显示省略号效果) 用后台语言可以对从数
据库里的字段内容做截断处理，比如说截12个汉字(之后用省略号)。但是有时还需要html标签的过滤等，而用CSS来控制则没有这个问题。比如对列表应用以下样式: li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
八、固定宽度汉字(词)折行:使用: 举个例子，比如说要在一个固定宽度容器里面显示
很多地名(假设以空格分隔)，为了避免地名中间断开(即一个字在上面而另一个字折断到
下一行去了)。则可以使用word-break。比如: ,div style="width:210px;height: 200px;background: #ccc;word-break:keep-all" 北京上海 上海上 北京上海 北京 上海上海
上海 北京上海 上海 北京上海 上海 北京 上海 北京 上海 北京 上海 北京 上海 北京 上海 北京上海 上海 北京上海 上海 ,/div
浙公网安备 33021202002483