CSS文集《The CSS Anthology》 第二章 文本格式化及其它基础知识 （二）

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


（第二章 · 完）

查看更多 下一篇