前页牋 后页牋
目录牋 元素牋
特性
对齐方式, 字体风格和水平线条
说 明 书 的 这 一 章 讨 论 一 些 可 以 被 用 来 做 视 觉 格 式 的 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>
为 了 指 定 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 --
?>
开 始 标 记: 需 要, 结 束 标 记: 需 要
?
在 它 处 定 义 的 特 性
?
-
class
(lang (dir (title (style (内层风格信息)
-
onclick, ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown onkeyup
(
-
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...
字 体 风 格 元 素 可 以 嵌 套 并 且 必 须 适 当 的 嵌 套. 对 于 嵌 套 字
体 风 格 的 渲 染 取 决 于 用 户 代 理 器.
字体修饰元素:?A NAME="edef-FONT"> FONT
和?A NAME="edef-BASEFONT">BASEFONT
FONT 和 BASEFONT
是 不 赞?成 的 .
<!ELEMENT FONT - - (%inline)*牋 -- local change to font -->
<!ATTLIST FONT
?size牋牋牋?CDATA牋牋?#IMPLIED?-- [+]nn e.g. size="+1", size=4 --
?color牋牋牋 CDATA牋牋?#IMPLIED?-- #RRGGBB in hex, e.g. red: "#FF0000" --
?face牋牋牋?CDATA牋牋?#IMPLIED?-- comma separated list of font names --
?>
开 始 标 记: 需 要, 结 束 标 记: 需 要
<!ELEMENT BASEFONT - O EMPTY>
<!ATTLIST BASEFONT
?size?/TT>牋牋牋 CDATA牋牋?#REQUIRED -- base font size for FONT elements --
?color牋牋牋 CDATA牋牋?#IMPLIED?-- #RRGGBB in 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=1 size=2 size=3
size=4 size=5 size=6
size=7
下 面 例 程 展 示 了 基 本 字 体 尺 寸 为 3?的 相 关 字 体 尺 寸 效
果:
size=-4 size=-3
size=-2 size=-1
size=+1 size=+2
size=+3 size=+4
使 用 基 本 字 体 尺 寸 为 6 的 情 况:
size=-4 size=-3
size=-2 size=-1
size=+1 size=+2
size=+3 size=+4
?
基 本 字 体 尺 寸 不 提 供 给 标 题, 除 非 在 相 关 字 体 变 化 中
使?用 FONT
元 素.
线条:?A NAME="edef-HR">HR 元素
<!ELEMENT HR - 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">
你 的 用 户 代 理 器 如 下 渲 染 这 些 线 条 :?/FONT>?
前页牋 后页牋 目录牋
元素牋 特性
|