CSS文集《The CSS Anthology》 第二章 文本格式化及其它基础知识 (2)
11. 为段落文本加高亮
<div><h1 name="code">/* 设置文本高亮 */.pg39_highlight {background-color : #FFFFCC;color : #B22222;}

图2-6
12. 设置段落行高
使用line-height属性。
<div name="code">p.pg40 {font : 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;/* 设置行高,2.0是比率值,指比缺省设置大两倍。 */line-height : 2.0;}

图2-7
13. pg42 使段落四周空白均匀
设置text-align属性为justify。可设值包括:right, left, center。
<div name="code">p.pg42 {/* 设置文本自动调节——左右两边空白均匀 */text-align : justify; /* 可设值包括:right, left, center */font : 1em Verdana, Geneva, Arial, Helvetica, sans-serif;line-height : 2.0;}

图2-8
14. 为hr标签(水平分隔线)加样式
水平分隔线可以设置属性,如边框,背景颜色,颜色,高度,宽度等。
<div name="code">hr.pg43 {border : none;background-color : #ADD8E6;color : #ADD8E6;height : 1px;width : 80%;}

图2-9
15. 段落缩进
为左边paddingpadding-left指定一个值,如本例指定了20像素。
<div name="code">p.pg45indent {padding-left : 30px;}

图2-10
16. 用CSS设置段落文本全部为大写
设置段落的text-transform属性为uppercase即可。可选值还有:capitalize, lowercase, none(这是默认值)。
<div name="code">p.pg48transform {text-transform : uppercase; /* capitalize, lowercase, none(the default) */}

图2-11
17. 改变列表风格或者去除列表项前置图标
可以设置列表风格类型,如square,前置图标为小方块。还有disc, circle, decimal-leading-zero, decimal, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, Hebrew, Armenian, Georgian, none等等。
<div name="code">ul.pg50 {list-style-type : square; /* disc, circle, decimal-leading-zero, decimal, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, Hebrew, Armenian, Georgian, none */}

图2-12
18. 使用图片作为列表项的前置图标
指定一张图片给列表风格图像list-style-image作为值。
<div name="code">ul.pg52 {list-style-image : url(bullet.gif);}

图2-13
19. 移除列表项的左边留白(即移除左边的缩进)
把列表风格类型(指前置图标)设置为none,再把左边的margin和padding设置为0值。
<div name="code">ul.pg53 {list-style-type : none;padding-left : 0;margin-left : 0;}

图2-14
20. 把列表项显示到同一个水平方向上
设置display属性值为inline可以把列表项都显示到水平方向上。
<div name="code">ul.pg54horix li{display : inline;}

图2-15
(第二章 完)