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

最新推荐文章于 2024-11-02 14:54:32 发布

speedpower

最新推荐文章于 2024-11-02 14:54:32 发布

阅读量351

点赞数

分类专栏： Web 文章标签： css html

Web 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

[b]11. 为段落文本加高亮[/b]


<div>
	<h1 class="pg39">
		Chinese-style Stuffed Peppers
	</h1>
	Below, I've created a CSS rule for all te level-one headings in a document. The result is shown in Figure 2.11.
	hello, world......	
</div>

<div class="pg39">
	<h1 class="pg39">
		Chinese-style Stuffed Peppers
	</h1>
	<p>
	These <span class="pg39_highlight">stuffed peppers</span> are lovely as a starter, or as a side sish for a Chinese meal. They also go down well as part of a buffet, and even children seem to like them.
	</p>
</div>


/* 设置文本高亮 */
.pg39_highlight {
	background-color : #FFFFCC;
	color : #B22222;
}

[align=center][img]http://dl.iteye.com/upload/attachment/0063/4057/bb2f3b9e-7a4d-3208-991a-212f7cbaafc2.jpg[/img][/align]
[align=center]图2-6[/align]

[b]12. 设置段落行高[/b]
使用line-height属性。


<div class="pg40">
	<p class="pg40">
	Once upon a time, a mouse, a bird, and a sausage entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel, the mouse fetched the water, and the sausage saw to the cooking.
	</p>
</div>


p.pg40 {
	font : 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* 设置行高，2.0是比率值，指比缺省设置大两倍。 */
	line-height : 2.0;
}

[align=center][img]http://dl.iteye.com/upload/attachment/0063/4063/e79b795f-1a1e-3e6d-9d47-cfa6db3b9e0f.jpg[/img][/align]
[align=center]图2-7[/align]

[b]13. pg42 使段落四周空白均匀[/b]
设置text-align属性为justify。可设值包括：right, left, center。


<div class="pg42">
	<p class="pg42">
	Once upon a time, a mouse, a bird, and a sausage entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel, the mouse fetched the water, and the sausage saw to the cooking.
	</p>
</div>


p.pg42 {
	/* 设置文本自动调节——左右两边空白均匀 */
	text-align : justify; /* 可设值包括：right, left, center */
	font : 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height : 2.0;
}

[align=center][img]http://dl.iteye.com/upload/attachment/0063/4071/62814ce9-e17b-31df-b108-d1e7a29bc140.jpg[/img][/align]
[align=center]图2-8[/align]

[b]14. 为hr标签（水平分隔线）加样式[/b]
水平分隔线可以设置属性，如边框，背景颜色，颜色，高度，宽度等。


<div class="pg43">
	<p>
	Once upon a time, a mouse, a bird, and a sausage entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel, the mouse fetched the water, and the sausage saw to the cooking.
	</p>
	<hr class="pg43"/>
	<p>
	Once upon a time, a mouse, a bird, and a sausage entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel, the mouse fetched the water, and the sausage saw to the cooking.
	</p>
</div>


hr.pg43 {
	border : none;
	background-color : #ADD8E6;
	color : #ADD8E6;
	height : 1px;
	width : 80%;
}

[align=center]
[img]http://dl.iteye.com/upload/attachment/0063/4073/7c64167a-a50c-3829-aeca-ce73ed22a9ec.jpg[/img][/align]
[align=center]图2-9[/align]

[b]15. 段落缩进[/b]
为左边paddingpadding-left指定一个值，如本例指定了20像素。


<div class="pg45">
	<p>
	Once upon a time, a mouse, a bird, and a sausage entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel, the mouse fetched the water, and the sausage saw to the cooking.
	</p>
	<hr/>
	<p class="pg45indent">
	Once upon a time, a mouse, a bird, and a sausage entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel, the mouse fetched the water, and the sausage saw to the cooking.
	</p>
</div>


p.pg45indent {
	padding-left : 30px;
}

[align=center][img]http://dl.iteye.com/upload/attachment/0063/4075/44d0de9e-1b5b-3b60-902f-a83fac5c50be.jpg[/img][/align]
[align=center]图2-10[/align]

[b]16. 用CSS设置段落文本全部为大写[/b]
设置段落的text-transform属性为uppercase即可。可选值还有：capitalize, lowercase, none(这是默认值)。


<div class="pg47">
	<p>
	Once upon a time, a mouse, a bird, and a sausage entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel, the mouse fetched the water, and the sausage saw to the cooking.
	</p>
	<hr/>
	<p class="pg48transform">
	Once upon a time, a mouse, a bird, and a sausage entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel, the mouse fetched the water, and the sausage saw to the cooking.
	</p>
</div>


p.pg48transform {
	text-transform : uppercase; /* capitalize, lowercase, none(the default) */
}

[align=center][img]http://dl.iteye.com/upload/attachment/0063/4082/03835ae9-2e7f-3d90-8012-cb196f74cb53.jpg[/img][/align]
[align=center]图2-11[/align]

[b]17. 改变列表风格或者去除列表项前置图标[/b]
可以设置列表风格类型，如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 class="pg47">
	<ul class="pg50">
		<li>list item one</li>
		<li>list item tow</li>
		<li>list item three</li>
		<li>list item four</li>
	</ul>
</div>


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 */
}

[align=center][img]http://dl.iteye.com/upload/attachment/0063/4084/3f562e12-e04a-3522-89ee-a963cf59f367.jpg[/img][/align]
[align=center]图2-12[/align]

[b]18. 使用图片作为列表项的前置图标[/b]
指定一张图片给列表风格图像list-style-image作为值。


<div class="pg51">
	<ul class="pg52">
		<li>list item one</li>
		<li>list item tow</li>
		<li>list item three</li>
		<li>list item four</li>
	</ul>
</div>


ul.pg52 {
	list-style-image : url(bullet.gif);
}

[align=center][img]http://dl.iteye.com/upload/attachment/0063/4092/61906e60-2746-3ccb-920f-d49172cda76c.jpg[/img][/align]
[align=center]图2-13[/align]

[b]19. 移除列表项的左边留白（即移除左边的缩进）[/b]
把列表风格类型（指前置图标）设置为none，再把左边的margin和padding设置为0值。


<div class="pg52">
	<ul class="pg53">
		<li>list item one</li>
		<li>list item tow</li>
		<li>list item three</li>
		<li>list item four</li>
	</ul>
</div>


ul.pg53 {
	list-style-type : none;
	padding-left : 0;
	margin-left : 0;
}

[align=center]
[img]http://dl.iteye.com/upload/attachment/0063/4094/add9cc2a-a276-39ee-886b-1ab65813ab3d.jpg[/img][/align]
[align=center]图2-14[/align]

[b]20. 把列表项显示到同一个水平方向上[/b]
设置display属性值为inline可以把列表项都显示到水平方向上。


<div class="pg54">
	<ul class="pg54horix">
		<li>list item one</li>
		<li>list item tow</li>
		<li>list item three</li>
		<li>list item four</li>
	</ul>
</div>


ul.pg54horix li{
	display : inline;
}

[align=center]
[img]http://dl.iteye.com/upload/attachment/0063/4096/343fb264-6093-3b19-a5fd-aa8e65147b3e.jpg[/img][/align]
[align=center]图2-15[/align]

（第二章 · 完）