分享
 
 
 

CSS应用基础教程(5) 文字性质

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

本章CSS的主要作用

本章要介绍的是文字相关的CSS指令。通 常一个网站的内容最多的就是文字了,透过这些文字相关的CSS指令,您可以将您的 网页内容排版得美美的。本章将分两个部份为您介绍,第一部份是字型性质的CSS指 令,用以控制文字字型的各种样式;第二部份介绍的是文字性质的CSS指令,用以控 制文字段落的外观及摆设方式。

字型性质的CSS指令

font-family设定文字字型

支持:IE3、IE4

适用:所有元素

可能值: <family-name> 字型名称

预设值:视浏览器而定

继承性:有

一般范例:SPAN { family-name : "标楷体" }

同轴范例:<SPAN style="family-name:标楷体">

font-style设定字体样式

支持:IE3、IE4、NC4

适用:所有元素

可能值: normal 普通字

italic 斜体字

oblique 斜体字

预设值:normal

继承性:有

一般范例:SPAN { font-style : italic }

同轴范例:<SPAN style="font-style:italic">

font-weight设定字型份量

支持:IE3、IE4、NC4

适用:所有元素

可能值: normal 普通字

bold 粗体字

bolder 相对于父元素稍粗

lighter 相对于父元素稍细

100,200,300,

400,500,600,

700,800,900. 数字由小到大代表笔画由细到粗

normal=400bold=700

预设值:normal

继承性:有

一般范例:SPAN { font-weight : bolder }

同轴范例:<SPAN style="font-weight:bolder">

font-size设定文字大小

支持:IE3、IE4、NC4

适用:所有元素

可能值: <absolute-size> 绝对大小,可用的参数由小到大分别有七项

xx-small, x-small, small, medium, large, x-large, xx-large

<relative-size> 相对大小,可用的参数为larger, smaller两项

以父元素字型大小为基准

<lenght> 长度单位,请参考第一章基本单位的相关说明

<percentage> 百分比,以父元素字型大小为基准

预设值:medium

继承性:有

一般范例:SPAN { font-size : 12pt }

同轴范例:<SPAN style="font-size:12pt">

font-variant设定文字转换

支持:IE3、IE4、NC4

适用:所有元素

可能值: normal 普通字

small-caps 将小写文字转换为大写

预设值:normal

继承性:有

一般范例:SPAN { font-variant : small-caps }

同轴范例:<SPAN style="font-variant:small-caps">

font综合设定字型性质

支持:IE3、IE4、NC4

适用:所有元素

可能值: <font-style> 设定字体样式

<font-variant> 设定文字转换

<font-weight> 设定字型份量

<font-size/line-height> 设定文字大小与列高(请参考设定文字列高部份)

<font-family> 设定文字字型

预设值:无

继承性:有

一般范例: SPAN { font : bolder small-caps 12pt/120% Arial }

同轴范例:< SPAN style="font : bolder small-caps 12pt/120% Arial">

文字性质的CSS指令

line-height设定列高

支持:IE3、IE4、NC4

适用:所有元素

可能值: normal 普通列高,根据字体变化合理高度,视浏览器而定

<number> 以元素字型大小乘以该数即为列高

<length> 设定长度,请参考第一章基本单位的相关说明

<percentage> 百分比,相对于元素字型大小为比例

预设值:normal

继承性:有

一般范例:DIV { line-height : 120% }

同轴范例:<DIV style="line-height:120%">

text-align设定文字对

支持:IE3、IE4、NC4

适用:区块元素

可能值: center 对中央

right 对右边

left 对左边

justify 左右对

预设值:视浏览器而定

继承性:有

一般范例:DIV { text-align : center }

同轴范例:<DIV style="text-align:center">

vertical-align设定垂直对

支持:IE4

适用:同轴元素

可能值: top 对同列最高元素顶端

bottom 对同列最低元素底端

baseline 对底线

middle 对中央

sub 将元素置于下标

super 将元素置于上标

text-top 对文字顶端

text-bottom 对文字底端

<percentage> 参照元素本身列高,以父元素底线为基准作位移

预设值:baseline

继承性:有

一般范例:SPAN { vertical-align : sub }

同轴范例:<SPAN style="vertical-align:sub">

text-decoration设定文字装饰

支持:IE3、IE4、NC4

适用:所有元素

可能值: none 普通字

underline 文字加底线

overline 文字加顶线

line-through 文字加删除线

blink 设定文字闪烁

预设值:none

继承性:有

一般范例:SPAN { text-decoration : blink }

同轴范例:<SPAN style="text-decoration:blink">

text-transform设定文字转换

支持:IE3、IE4、NC4

适用:所有元素

可能值: none 普通字

capitalize 将英文单字地一个字母转换为大写

uppercase 将所有文字转换为大写

lowercase 将所有文字转换为小写

预设值:none

继承性:有

一般范例:SPAN { text-transform : uppercase }

同轴范例:<SPAN style="text-transform:uppercase">

letter-spacing设定字母间隔

支持:IE4

适用:所有元素

可能值: normal 不改变字母间隔,使用浏览器预设值

<length> 要额外增加的间隔长度,可为负值

预设值:normal

继承性:有

一般范例:SPAN { letter-spacing : 0.5pt }

同轴范例:<SPAN style="letter-spacing : 0.5pt">

text-indent设定文字缩排

支持:IE3、IE4、NC4

适用:区块元素

可能值: <length> 长度单位,请参考第一章基本单位的相关说明

<percentage> 以父元素宽度为基准的百分比值

预设值:0

继承性:有

一般范例:DIV { text-indent : 3pt }

同轴范例:<DIV style="text-indent:3pt">

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有