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