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. 閱讀(1903) 評論(0) 收藏 舉報
浙公網安備 33010602011771號