--CSS 不 仅 能 够 规 范 所 有HTML 的 类 型 特 性， 而 且 除 了 通 用 的 颜 色、 字 体、 背 景 等 式 样 外， 它 还 具 有 更 强 大 的 功 能， 比 如 支 持 打 印 格 式、 声 音 播 放 格 式、CSS 定 位、 鼠 标 类 型、 框 架 结 构 等。 同 时， CSS 还 支 持 滤 镜（Filter Properties） 效 果， 使 网 页 产 生 更 佳 的 媒 体 效 果； 而 且 通 过 在 其 中 加 入Script 程 序， 能 够 很 容 易 地 实 现 动 态 交 互 网 页。
CSS 的 语 法 规 范
----既 然CSS 具 有 如 此 强 大 的 功 能， 那 就 让 我 们 先 来 看 看 它 是 怎 样 工 作 的 吧。 请 看 实 例1：
< html >
< head >
< title >CSS Demo-1< /title >
< style >
h3{
font-family: 宋 体;
font-style: italic;
font-size: 9pt;
color: blue;
}
< /style >
< /head >
< body >
< h3 > 蓝 色、 斜 宋 体 标 题H3< /h3 >
< h3 > 蓝 色、 斜 宋 体 标 题H3< /h3 >
< h3 > 蓝 色、 斜 宋 体 标 题H3< /h3 >
< h3 > 蓝 色、 斜 宋 体 标 题H3< /h3 >
< /body >
< /html >
----这 是 一 个 简 单 的CSS 的 例 子。 该 例 中 第4 到 第11 行 由 标 签（tag）< style > 和< /style > 包 裹 起 来 的 代 码 就 是 一 个 CSS 的 声 明。 它 通 过 说 明< h3 > 标 签 的 字 体 样 式（ 宋 体、 斜 体、 蓝 色 和9pt 大 小）， 使 得 在< body > 和< /body > 中 每 一 次 出 现< h3 >< /h3 > 时， 相 应 的 格 式 定 义 生 效。 如 果 不 使 用CSS， 则 实 例1 中 的4 个“< h3 > 蓝 色、 斜 宋 体 标 题H3< /h3 >” 要 重 复4 次 如 下 声 明：< h3 > < font face=“ 宋 体" color= “BLUE" >< em > 蓝 色、 斜 宋 体 标 题H3< em >< /font >< /h3 >， 才 能 获 得 相 同 的 效 果。
----CSS 声 明 的 书 写 格 式 如 下：SELECTOR {property:value; property:value; property:value; … …}。 实 例1 中 第5 行 的h3 就 是 一 个SELECTOR， 用 以 说 明 定 义 的 是 哪 个 标 签 的 属 性。SELECTOR 有 三 种 类 型， 其 一 就 是 该 例 中 采 用 的HTML 语 法 中 的 标 签（tag）。 除 了 标 签，SELECTOR 还 可 以 是 类（Class） 和ID。 使 用 类 和ID 不 仅 使HTML 文 档 结 构 清 楚， 而 且 使CSS 的 应 用 更 加 灵 活， 便 于 扩 展。 下 文 实 例 3 中 有 关 于 类 的 使 用 示 范。 若 同 时 对 多 个 标 签 赋 予 同 样 的 属 性 值， 只 需 用 逗 号 将 各 个 标 签 分 隔 开 即 可。
----“property” 是 指 要 声 明 的 性 质， 如 实 例1 第 7 行 中 用“font-family” 来 指 明 要 声 明 字 体 类 型。 各 个 属 性 及 赋 值 之 间 用 分 号 隔 开， 如：H3,H2,H1{property:value; property:value; property:value; … …}。 其 中，“value” 是 赋 给“property” 的 值， 如 赋 给 属 性“font-family:” 值 为 “ 宋 体”。
----在 声 明 了CSS 定 义 之 后， 若 想 在HTML 文 档 中 对 个 别 标 签 类 型 改 变 或 另 外 加 入 新 的 属 性 定 义， 则 只 需 在 其 中 加 入 新 的“style” 值 就 可 以 了。 比 如 要 将 实 例1 中 的 某 一 行 改 为： 红 色 楷 体， 则 只 要 在< body > …< /body > 中 相 应 的 位 置 做 如 下 修 改：< h3 style=“font-family: 楷 体; color:RED” > 红 色、 斜 楷 体 标 题H3< /font >< /h3 >。 CSS 在HTML 文 档 中 的 嵌 入 方 式
----一 般 而 言， 通 用 的CSS 在HTML 文 档 中 的 嵌 入 方 式 有 三 种： 在HTML 文 档 的 头 部< head > …< /head > 内 声 明、 分 别 在 各 个 标 签 中 单 独 声 明、 从 外 部 的 样 式 表 单 文 件 中 输 入。 下 面 分 别 对 这 三 种 方 式 进 行 说 明：
实 例1 采 用 的 就 是 在HTML 文 档 的 头 部“< head > …< /head >” 内 声 明CSS 格 式。 这 种 方 式 使CSS 格 式 和HTML 结 合 为 一 体， 使HTML 文 档 更 加 易 于 阅 读。
在 标 签 中 单 独 声 明CSS 格 式 的 方 法 可 用 实 例2 说 明：
< html >
< head >
< title > CSS Demo-2 < /title >
< /head >
< body >
< p style=“color:RED” > 在 标 签 中 单 独 声 明CSS 格 式< /p >
< /body >
< /html >
采 用 外 部 的 样 式 表 单 文 件 文 件 输 入CSS 格 式 之 前， 需 要 先 建 立 一 个 描 述CSS 格 式 的 样 式 表 单 文 件， 然 后 在HTML 文 件 头 部 中 用 连 接（LINK） 引 入 此 文 件， 如 下 例：< LINK REL=stylesheet HREF= “http://home.gbsource.net/Bluebirdstyle.css" >。
----从 外 部 引 入 样 式 表 单 文 件 还 有 一 种 方 法：
< style >
@import url(“http://home.gbsource. net/Bluebird/style.css");
< /style >
----但 是 通 过 函 数url() 引 入CSS 格 式 文 件 的 方 式 在Navigator 中 无 法 正 确 显 示， 影 响 网 页 的 通 用 性， 故 不 推 荐 使 用。
----采 用 外 部 样 式 表 单 文 件 文 件 输 入CSS 样 式， 可 以 使 一 个 网 站 的 所 有 网 页 具 有 同 样 的 格 式， 使 网 页 界 面 风 格 更 趋 统 一， 是 一 种 很 好 的 选 择。
利 用CSS 控 制
滤 镜 效 果 的 应 用
----利 用CSS 的 滤 镜 支 持， 可 以 减 少 很 多 图 象 编 辑 工 作， 利 用 原 始 图 象 就 能 够 简 单 地 实 现 很 多 特 效， 如 Alpha、Blur、Wave、Shadow 等 等。
----在CSS 中 定 义 滤 镜 的 格 式 如 下：< IMG SRC= “bbutton.jpg" STYLE=“filter:blur(strength=100) flipv()" >。 此 句 所 形 成 的 效 果 如 图1 所 示。 图1 中， 上 部 是 经 过 模 糊（blur） 处 理， 并 且 由flipv() 函 数 垂 直 翻 转 之 后 的 结 果 图； 下 部 是 其 原 始 图 象， 以 此 作 为 对 比。 其 中， 滤 镜 的 调 用 格 式 为：filter:filtername(parameters)。
----下 面 我 们 来 看 实 例3， 一 个 利 用 滤 镜 效 果 的 级 联 样 式 表 单CSS 例 子。 其 中 可 以 看 到CSS 声 明 中 对 类（Class） 的 使 用。
< html >
< head >
< title >CSS Demo-3< /title >
< style >
.pos{
position=absolute;
top=15;
left=10;
< /style >
< script >
function showword()
{
if(box.style.visibility==“hidden")
{
box.style.visibility=“";
words.style.visibility=“";
else
{
box.style.visibility=“hidden";
words.style.visibility=“hidden";
< /script >
< /head >
< body >
< div id=“box" class=“pos"
style=“visibility:hidden;
height=25;width=400;
background-color:blue;
filter:alpha(opacity=60)" >
< /div >
< div id=“words" class=“pos"
style=“visibility:hidden;left:55;
color:yellow;font-size:14pt;
font-weight=bold;
filter:alpha(opacity=60)" >
< p >
Welcome to Bluebird Studio!!!
< /p >
< /div >
< img src=“bbutton.jpg"
onmouseover=“showword()"
onmouseout=“showword()" >
< /body >
< /html >
----实 例3 演 示 了 如 何 在CSS 中 运 用Alpha 滤 镜（ 一 种 控 制 透 明 度 的 滤 镜 属 性） 进 行 网 页 设 计， 当 鼠 标 移 入 到 图 片 的 范 围 内 时， 图 片 背 后 原 来 隐 藏 的 蓝 色 条 带 和 黄 色 文 字 就 显 示 出 来。 同 时， 条 带 和 文 字 均 以60 ％ 的 透 明 度 显 示。 若 改 变 透 明 度， 会 影 响 条 带 和 文 字 透 过 图 象 显 示 出 来 的 程 度。 此 类 隐 藏 属 性 的 改 变 通 过JavaScript 函 数 控 制 实 现。 参 照 实 例3， 还 可 以 印 证 一 下 类 选 择 符（SELECTOR） 和ID 的 使 用 方 式。 图2 是 浏 览 实 例3 的 HTML 文 档 时， 当 鼠 标 进 入 图 象 区 时 的 条 带 和 文 字 显 露 出 来 的 浏 览 效 果。
|
