书山有径勤为路>>>>>>>>

<<<<<<<<学海无涯苦作舟!

CSS设置文本——对齐、修饰、缩进

<1>.对齐文本

 1 <html>
2 <head>
3 <style type="text/css">
4 h1 {text-align: center}
5 h2 {text-align: left}
6 h3 {text-align: right}
7 </style>
8 </head>
9
10 <body>
11 <h1>这是标题 1</h1>
12 <h2>这是标题 2</h2>
13 <h3>这是标题 3</h3>
14 </body>
15 </html>

这个CSS的用法和HTML中的用法差不多。

不过,好像这个方法更好用一点。


<2>.修饰文本

 1 <html>
2 <head>
3 <style type="text/css">
4 h1 {text-decoration: overline}
5 h2 {text-decoration: line-through}
6 h3 {text-decoration: underline}
7 h4 {text-decoration: blink}
8 a {text-decoration: none}
9 </style>
10 </head>
11
12 <body>
13 <h1>这是标题 1</h1>
14 <h2>这是标题 2</h2>
15 <h3>这是标题 3</h3>
16 <h4>这是标题 4</h4>
17 <p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
18 </body>
19 </html>

blink是闪烁的意思。可以看到,在用了这个技术之后,

在HTML下的超链接的下划线没有了。

那个line-through是十分有用的。比如商城中

某件物品降价了,这时就可以将原来的那个价格

用上这个技术了。


<3>.缩进文本

 1 <html>
2 <head>
3 <style type="text/css">
4 p {text-indent: 2em}
5 </style>
6 </head>
7
8 <body>
9 <p>
10 这是段落中的一些文本。
11 这是段落中的一些文本。
12 这是段落中的一些文本。
13 这是段落中的一些文本。
14 这是段落中的一些文本。
15 这是段落中的一些文本。
16 这是段落中的一些文本。
17 这是段落中的一些文本。
18 这是段落中的一些文本。
19 这是段落中的一些文本。
20 这是段落中的一些文本。
21 这是段落中的一些文本。
22 </p>
23 </body>
24 </html>

indent就是缩进的意思。

这个才是真正的段落呀。

有了这个技术之后,就不用在用空格

来搞缩进了。




posted on 2011-09-17 21:21  More study needed.  阅读(1879)  评论(0编辑  收藏  举报

导航

书山有径勤为路>>>>>>>>

<<<<<<<<学海无涯苦作舟!