分享
 
 
 

CSS入门之文字修饰

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

这一节我们将讨论如何用 CSS 来控制网页中文字定位, 这些性质是

word-spacing:字间距

letter-spacing:字母间距

line-height: 行距

text-align: 向那个方向看齐

vertical-align: 向上还是向下看齐

text-indent: 段落第一行空格

text-transform: 文字变形--字母的大小写

text-decoration: 给文字加装饰, 比如下滑线

字间距

利用字间距属性,你可以在字之间加入更多的距离:

H3 { word-spacing: 1em }

你所使用的参数值将加入任何浏览器的缺省设置,你可以使用任何一种长度单位:

in (英寸)

cm (厘米)

mm (毫米)

pt (点数)

pc (打字机字间距)

em (ems)

ex (x-height)

px (象素)

字母间距

字母间距可以在IE 4中应用,但Communicator不行,唉...

H3 { letter-spacing: 10px }

字母间距的功能和字间距的很类似:其参数值将被加入到浏览器的缺省设置中,你可以使用上述任何一种长度单位。

如果你用的是IE 4,这里是一个例子:

Behold the power of cheese.

行距

我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS 中的 line-height 可以取得这种调节 P.double {line-height: 2}

请看下面的比较.

这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的.

这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的.

你要让 line-height 等于 3 的话, 那行距就更大了.

看齐

一般来说我们都是向左边看齐. 但有的时候也有其他的选择, 比如说向右边看齐. P.right {text-align: right}

请看下面的比较.

这 一 行 左 边 看 齐

这 一 行 右 边 看 齐

这 一 行 在 中 间

text-align 可以有 left, right, center, 和 justify

段落的首行空格

如果我们想让第一行的开头空几格, 可以用 text-indent, 比如 P {text-indent: 1cm}

请看下面的例子.

这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米.

文字变形--字母的大小写

这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以用 text-transform 来改变英文的大小写. 比如, 让每个字的

第一个字母大写 P {text-transform: capitalize}

以下为所有可用的参数:

uppercase 使所有字母大写显示,

例:

This sentence serves as an example.

lowercase使所有字母小写显示,

例:

This sentence serves as an example.

capitalize 使每个单词的第1个字母大写显示,例:

This sentence serves as an example.

none 使所有继承的文字变形参数被忽略,文字将以正常形式显示。

例:

This sentence serves as an example.

(注意:IE 3不支持文字变形)

文字的装饰

就是在文字上加下滑线, 或中间加条线的.

其基本语法如下:

B { text-decoration: underline }

大部分的选项使得文字变得难以阅读:

underline 给文字下划线,例:

these words.

overline给文字上划线,例:

these words.

line-through给文字划出删除线,

例:these words.

blink是你在恶梦中常常看到的--

文字在闪烁,例:

these words.

none使得上述效果都不会发生,常用与去掉超链接的下划线。

(注意:Communicator不支持上划线,IE 4不支持文字闪烁,IE 3对这些都不支持。)

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有