📄 fd75.htm
字号:
<html>
<head>
<title>CSS2快速参考之四</title>
<meta content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<p align="center"><script src="../../1.js"></script></a>
<body bgcolor="#ffffff" leftmargin="5" topmargin="1" marginheight="5" marginwidth="5">
<div align=center>
<table border=0 cellpadding=0 cellspacing=0 width=680 align="center">
<tbody>
</tr>
</tbody>
</table>
<table border=1 bordercolordark=#ffffff bordercolorlight=#ffffff cellpadding=0
cellspacing=0 width=680 align="center">
<tbody>
<tr>
<td bgcolor=#F9D23C height=14>
<div align=center class=H1><font color="#FFFFFF">CSS2快速参考之四</font></div>
</td>
</tr>
<tr valign=top>
<td class=H1 height=36>
<p class=H1> </span></p>
<p> <span
style="FONT-SIZE: 9pt">5、字体（Font）属性：<br>
这里定义了关于字体的各种属性。<br>
<br>
font-family属性定义字体的名称，可以是一个字体的名称，也可以是一类字体的名称，字体的名称一定要和计算机系统里的完全一样：<br>
属性名称: 'font-family' <br>
属性值: [[ <family-name> | <generic-family> ],]* [<family-name>
| <generic-family>] <br>
初始值: 根据用户定义而定 <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
有些计算机系统里如果没有样式单要求的字体，可以再设一个次字体以备万一。例如：<br>
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }<br>
family-name是指确定的某字体，如Heisi Mincho W3，generic-family指某一类字体，如serif。<br>
font-style属性描述字体的倾斜程度：<br>
属性名称: 'font-style' <br>
属性值: normal | italic | oblique <br>
初始值: normal <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
<br>
font-variant属性：<br>
属性名称: 'font-variant' <br>
属性值: normal | small-caps <br>
初始值: normal <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
一个使用了small-caps属性的元素中的小写字母看起来要比正常的大写字母小一些。<br>
<br>
font-weight属性用来描述字重。<br>
属性名称: 'font-weight' <br>
属性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500
| 600 | 700 | 800 | 900 <br>
初始值: normal <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
100到900代表9种不同的字重，400代表normal，700代表bold，900是最重的字体，bolder或lighter表示字体的字重比父元素高或低一级，比如父元素字重为400，则bolder代表字重500，如果父元素本身字重为900，那么bolder后，字重还是900，同样的lighter也一样。有些字体并没有100到900那么全的字重，也许是从300到700，那么字重的最小和最大值也为300到700。例如：<br>
P { font-weight: normal } /* 400 */<br>
H1 { font-weight: 700 } /*
bold */<br>
<br>
font-size属性描述字体的大小：<br>
属性名称: 'font-size' <br>
属性值: <absolute-size> | <relative-size> | <length>
| <percentage> <br>
初始值: medium <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: relative to parent element's font size <br>
该属性可以使用绝对大小，也可以使用相对大小，其中绝对大小可以使用，如下关键字表示：<br>
xx-small | x-small | small | medium | large | x-large | xx-large <br>
分别代表最小、较小、小、中等、大、较大和最大。<br>
相对大小可以使用：larger 或smaller描述。<br>
例如：<br>
P { font-size: 12pt; }<br>
BLOCKQUOTE { font-size: larger }<br>
EM { font-size: 150% }<br>
EM { font-size: 1.5em }<br>
<br>
Font属性是以上属性的快捷方式，属性如下：<br>
属性名称: 'font' <br>
属性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'>
]? <'font-size'> [ / <'line-height'> ]? <'font-family'>
] <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 只在font-size使用<br>
例如：<br>
P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif
}<br>
P { font: x-large/110% "new century schoolbook", serif }<br>
P { font: bold italic large Palatino, serif }<br>
P { font: normal small-caps 120%/120% fantasy }<br>
<br>
6、文本（Text）属性：<br>
这里的属性将影响WEB文档中的文本显示情况。<br>
text-indent属性描述文本的缩进程度：<br>
属性名称: 'text-indent' <br>
属性值: <length> | <percentage> <br>
初始值: 0 <br>
适合对象: 容器元素<br>
是否继承: yes <br>
百分比备注: 根据父元素的宽度而定<br>
下面的例子表明段落的缩进值为3em：<br>
P { text-indent: 3em }<br>
<br>
Alignment属性表明文本的对齐方式：<br>
属性名称: 'alignment' <br>
属性值: left | right | center | justify <br>
初始值: 依照用户定义<br>
适合对象: block-level elements <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
<br>
text-decoration属性描述对文本的修饰方法：<br>
属性名称: 'text-decoration' <br>
属性值: none | [ underline || overline || line-through || blink ] <br>
初始值: none <br>
适合对象: 所有元素 <br>
是否继承: no (see clarification below) <br>
百分比备注: 被禁止 <br>
属性值含义分别为：<br>
underline：下划线。<br>
overline：上划线。<br>
line-through：删除线。<br>
blink：闪烁（如同Navigator中的blink标记的功能）<br>
<br>
text-shadow属性可以为文本加入阴影的特效：<br>
属性名称: 'text-shadow' <br>
属性值: none | <color> [, <color> ]* <br>
初始值: none <br>
适合对象: all <br>
是否继承: No<br>
百分比备注: 只在描述透明度时有效<br>
例如： <br>
P { text-shadow: black }<br>
上例将在文本的右下方显示黑色阴影，另外阴影将增大BOX的面积。<br>
<br>
letter-spacing属性表明文本的字间距：属性名称: 'letter-spacing' <br>
属性值: normal | <length> | auto <br>
初始值: normal <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
例如：<br>
BLOCKQUOTE { letter-spacing: 0.1em }<br>
<br>
word-spacing属性表明文本中单词间距：<br>
属性名称: 'word-spacing' <br>
属性值: normal | <length> <br>
初始值: normal <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
例如：<br>
H1 { word-spacing: 1em }<br>
<br>
text-transform属性可以将BOX内的文本按指定的大写或小写形式显示：<br>
属性名称: 'text-transform' <br>
属性值: capitalize | uppercase | lowercase | none <br>
初始值: none <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
属性值含义为：<br>
capitalize：把BOX中的每句句首字母变成大写。<br>
uppercase：把BOX中所有的字母变成大写。<br>
lowercase：把BOX中所有的字母变成小写。<br>
<br>
White-space属性描述如何显示文本中的空格，在HTML中，空格是被省略的，也就是说你在一个段落标记的开头无论输入多少个空格都是无效的，要输入空格有两个方法，一是直接输入空格的代码“&nbsp;”，或者使用<pre>标记，CSS中也制定了类似于pre的属性：<br>
属性名称: 'white-space' <br>
属性值: normal | pre | nowrap <br>
初始值: normal <br>
适合对象: 容器元素<br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
例如：<br>
PRE { white-space: pre } <br>
P { white-space: normal }</span><br>
<font
color=#ffa000> <b>
</td>
</tr>
</tbody>
</table>
</div>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -