读书人

CSS文集《The CSS Anthology》 第二章

发布时间: 2012-08-29 08:40:14 作者: rapoo

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


(第二章 完)

读书人网 >CSS

热点推荐