您的位置：寻梦网首页＞编程乐园＞HTML园地＞HTML4.0参考文献
前页 后页 目录 元素 特性

对齐方式,字体风格和水平线条

目录
  1. 格式
    1. 背景色
    2. 对齐方式
    3. 浮动物件
  2. 字体
    1. 字体风格元素:TT,I, B,BIG,SMALL,STRIKE,S和 U元素
    2. 字体修正元素:FONT和BASEFONT
  3. 线条:HR元素
说明书的这一章讨论一些可以被用来做视觉格式的HTML 元素和特性.通常的说法是建议你使用风格页来代替.一 个例外是当用户代理器不提供风格页或它不提供特定风 格而需?要的功能时.数个HTML元素和特性可以处理可视展 现但是不赞成地并且可以有望在HTML的将来版本中废弃.

格式

背景色

特性定义
?
bgcolor=color
不赞成.这个特性设置文档主干或表格单元的背景 色.
这个特定设定文档主干(BODY 元素)或表格(TABLE, TR,TH 和TD元素)的画 布的背景色.额外的用来指定文字颜色的特性可与BODY 元素一起使用.

这个特性是不赞成的而赞成用风格页来指定背景色信 息.

对齐方式

用align元素在画布 上对齐封闭元素(表格,图像,物件,图案等等)是可能的.?尽 管这些特性可以在大多数HTML元素里设置,但它可能的值 的范围在元素与元素之间不尽相同.
特性定义
align=left|center|right|justify
不赞成.这个特?性定义了元素及其围绕的上下文水 平方向的对齐方式,可能的值为:
  • left:左对齐/调整.这是缺省值.
  • center:居中对齐/调整.
  • right:右对齐/调整.
  • justify:两边撑满调整.
不赞成例 程
下面的例程让标题在画布居中. 
<H1 align="center"> How to Carve Wood </H1>
使用cascading 风格页,对于此例,你可以如下获得相同的效 果.: 
<HEAD> 
<STYLE> H1 { text-align: center} 
</STYLE> 
</HEAD> 
<H1> How to Carve Wood </H1>
注意,它将使所有的H1 声明居中.你可以通过设定元素的id 特性来减少它的范围. 
<HEAD> 
<STYLE type="text/css"> H1.wood {text-align: center} 
</STYLE> </HEAD> 
<H1 id="wood"> How to Carve Wood </H1>
类似?的,通过HTML的align 使段落在画布上两边撑满: 
<P align="justify">...Lots of paragraph text...
在cascading 风格页可以为: 
<HEAD> 
<STYLE type="text/css"> P.mypar {text-align: justify} 
</STYLE> 
</HEAD> <P id="mypar">...Lots of paragraph text...
为了让一系列段落两边撑满,用DIV 元素对它们编组: 
<DIV align="justify"> <P>...text in first paragraph...
<P>...text in second paragraph...
<P>...text in third paragraph...
</DIV>
通过cascading 风格页,可以为: 
<HEAD> 
<STYLE type="text/css"> DIV.mypars {text-align: justify} 
</STYLE> 
</HEAD> 
<DIV id="mypars"> 
<P>...text in first paragraph...

<P>...text in second paragraph...
<P>...text in third paragraph...

</DIV>
为了通过 cascading 风格页调整整个文档: <HEAD> <STYLE type="text/css"> BODY {text-align: justify} </STYLE> </HEAD> <BODY> ...the body is justified... </BODY>

CENTER元素完全等价于在DIV 元素中把align特性 设为"center".CENTER 元素是不赞成的.

浮动物件

图像和特件将直接在"行内"出现或漂浮在页的一边,暂时 改变文字页缘可以在物件的格一边流动.

漂浮一个物件

物件,图像,框等的align 特性,?把特件漂浮在左页缘或右页缘.浮动物件通常开始 一个新行.这个特性采用下列的的值一为漂浮一个物件.
  • left:把物件漂浮于当前的左页缘.后来的文本在其 右随流.
  • center:把物件漂浮于页面居中.后来的文本随流两 边.
  • right:把物件漂浮于当前的右页缘.后来的文本居 其左随流.
下面的例程展示了如何把一个IMG 元素漂浮到画布的当前左页缘. 
<IMG align="left" src="http://foo.com/animage.gif">

围绕物件漂浮文字

另一个特性,定义为BR 元素,控制了围绕漂浮物件的文字的流动.
特性定义
clear=none|left|right|all
指定在视觉浏览器中换行之后的文本行应当出现于哪里. 这个特性被用于报告物件(图像,表格等).可能的值为:
  • none:下行正常开始.这是缺省值.
  • left:下行将在最近的处于左页缘的漂浮物件的下 面一行开始.
  • right:下行将在最近的处于右页缘的漂浮物件的下 面一行开始.
  • all:下列将开始于任一边的漂浮物件的下行.
考虑下面的可视脚本,文字流于图像的右 面直到遇上一个BR: 
*********?------- |    |?------- | image |?--<BR>
|   |
*********
如果clear特性设为 none,跟随的BR 将在其后立刻开始于图像的右页缘: 
*********?------- |    |?------- | image |?--<BR>
|   |?------
*********
如果clear特性设为 left或all,下行将如下显示: 
*********?------- |    |?------- | image |?--<BR clear="left">
|   | 
*********
-----------------
使用风格页你可以指所有的换行处于漂浮物件(图像,表 格等)的左页缘的形式出现.在cascading 风格页中,你可以如 下完成: 
<STYLE type="text/css"> BR {clear: left} </STYLE>
为了指定BR元素特 定实例的这个行为,你可以组合风格信息和id 特性: 
<HEAD> ... 
<STYLE type="text/css"> 
BR.mybr {clear: left} 
</STYLE> 
</HEAD> 
<BODY> ... *********?------- |    |?------- | table |?--<BR id="mybr"> |    |  ********* ----------------- ... </BODY>

字体

下面的HTML元素指定了字体信息.即使并非所有都是不 赞成的,但它们的使用也的确是风格页推广的阻碍.

字体风格元素:?A NAME="edef-TT">TT,?A NAME="edef-I">I,?A NAME="edef-B">B,?A NAME="edef-BIG">BIG,?A NAME="edef-SMALL">SMALL,?A NAME="edef-STRIKE">STRIKE,?A NAME="edef-S">S 和?A NAME="edef-U">U元素

<!ENTITY%font
?TT|I|B|U|S|STRIKE|BIG|SMALL"> 
<!ELEMENT (%font|%phrase) - - (%inline)*> 
<!ATTLIST (%font|%phrase) ?%attrs;            ?-- %coreattrs, %i18n, %events -- ?>
开始标记:需要,结束标记:需要
?
在它处定义的特性
?
  • id,class (广泛的文档标识符)
  • lang(语言信息), dir(文字方向)
  • title(元素标题)
  • style(内层风格信息)
  • onclick,ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydownonkeyup (内部事件)
对字体风格元素的渲染取决于用户代理器.下面只是非标 信息描述.
TT:如电传打字机或monospaced 文字渲染.
I:作斜体渲染.
B:作为粗体渲染.
BIG:以一种"大"字体渲染.
SMALL:以一种"小"字体渲染.<译者: 在字体中并没有"large"和"small"两种,故这里的"大","小"应 该指的是字形,而不是字体名称>?/DD>
STRIKE和S:不赞成.以字中划线渲染.
U:不赞成.以下列线渲染.
下面的例程展示了一些文本风格 
<b>粗体/bold</b>, <i>斜体/italic</i>, <b><i>粗斜体/ bold italic</i></b>, <tt>teletype text</tt>, 
和 <big>大/big</big> 以 及 <small>小/small</small>文本.
你的用户代理器将如下渲染这些词:
粗体/bold,斜体/italic,粗斜体/bold italic, teletype text,和大/big以及小/small 文本.
可以通用使用风格页来完成更丰富的字体效果.To specify blue,italic text in a paragraph with cascading style sheets:
<HEAD> 
<STYLE> 
P.mypar {font-style: italic; color: blue} 
</STYLE> 
</HEAD> 
<P id="mypar">...Lots of blue italic text...
字体风格元素可以嵌套并且必须适当的嵌套.对于嵌套字 体风格的渲染取决于用户代理器.

字体修饰元素:FONT 和?A NAME="edef-BASEFONT">BASEFONT

FONT和BASEFONT 是不赞成的. 
<!ELEMENTFONT - - (%inline)*  -- local change to font -->
<!ATTLIST FONT
size  CDATA  #IMPLIED?--[+]nn e.g.size="+1",size=4--
color   CDATA  #IMPLIED?--#RRGGBBin hex,e.g.red:"#FF0000"--
face   CDATA  #IMPLIED?-- comma separated list of font names -- >
开始标记:需要,结束标记:需要 
<!ELEMENTBASEFONT - O EMPTY>
<!ATTLIST BASEFONT
size?/TT>   CDATA  ?#REQUIRED--base font size for FONTelements --
color   CDATA  ?#IMPLIED?--#RRGGBBin hex,e.g.red:"#FF0000"--
face   ?CDATA  ?#IMPLIED?-- comma separated list of font names -- >
开始标记:需要,结束标记:禁止
特性定义
size=cdata
不赞?成.这个特性设置字体尺寸.可能的值为:
  • 一个从1至7的整数.这设置字体的组合尺寸,具体渲染取 决于用户代理器.并非所有的用户代理器提?供这七种尺寸.
  • 一个相关的字体尺寸增量.值"+1"表示大一号.值"-3"表示 小3号.所有的尺寸属于1至7.
color=color
不赞成.这个特性设定字体颜色.
face=cdata-list
不赞成.这个特性用来定义一个逗号分开的字体名称 列表,用户代理器将根据它来作为搜寻字体的优先权.
FONT元素改变它内容 中的字体颜色和尺寸.

BASEFONT元素设 定基本字体尺寸(使用size特性).字体尺寸改变通过 FONT来完成并且与BASEFONT 设定的基本字体尺寸有关.如果BASEFONT 没有被使用,缺?省的字体尺寸是4.
?

不赞成例 程:

下面的例程将展示FONT 合法的7种字体之间的区别. 

<P><font size=1>size=1</font> 
<font size=2>size=2</font> 
<font size=3>size=3</font> 
<font size=4>size=4</font> 
<font size=5>size=5</font> 
<font size=6>size=6</font> 
<font size=7>size=7</font>
你的用户代理器如下渲染:

size=1size=2size=3 size=4size=5size=6 size=7

下面例程展示了基本字体尺寸为3的相关字体尺寸效 果:

size=-4size=-3 size=-2size=-1 size=+1size=+2 size=+3size=+4

使用基本字体尺寸为6的情况:

size=-4size=-3 size=-2size=-1 size=+1size=+2 size=+3size=+4


基本字体尺寸不提供给标题,除非在相关字体变化中 使?用FONT 元素.

线条:HR元素

<!ELEMENTHR - O EMPTY>
<!ATTLIST HR
%coreattrs;          --id,class,style,title--
?%events;
align(left|right|center)#IMPLIED
noshade  (noshade)?#IMPLIED
size   ?%Pixels ?#IMPLIED
width    %Length ?#IMPLIED ?>
开始标记:需要,结 束标记:禁止
特性定义
noshade
当设定时,这个布尔型特性需要用户代理器以实心色渲染 线条而不是典型?的双线?"凹槽".
size=length
不赞?成.这个特定 指定线条的高度.这个特性的缺省值取决于用户代理器.
width=length
不赞成.这个特性 指定了线条的宽度.缺省值为100%,就是说线条跨越整张画 布.
在它处定义的特性
HR元 素会通过可视用户代理器的渲染成水平线条.

垂直方向插入于线条和围绕内容的空间取决于用户代 理器.
?

不赞成例 程:
这个例?程使线条居中,设置它们的长度为双页缘之间 合法空间的一半.顶端的线设为缺省的细线而底下两条则 为5像素宽.最下面的线条将实心渲染没有阴影: 

<HR width="50%" align="center"> 
<HR size="5" width="50%" align="center"> 
<HR noshade size="5" width="50%" align="center">
你的用户代理器如下渲染这些线条:?
前页 后页 目录 元素 特性