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就是缩进的意思。

这个才是真正的段落呀。

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

来搞缩进了。




转载于:https://www.cnblogs.com/o8le/archive/2011/09/17/2179851.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值