CSS 样 式 表 教 学 重 点 : CSS 样 式 表 基 础 知 识 CSS 样 式 的 分 类 CSS 样 式 的 链 接 添 加 CSS 样 式 的 其 它 相 关 知 识 教 学 难 点 : 如 上 一.CSS 样 式 表 基 础 Css 和 HTML 都 是 一 种 标 示 语 言 Html 用 来 表 现 网 页 文 件 的 内 容 和 结 构, 而 CSS 来 决 定 用 什 么 样 的 外 观 来 显 示 出 来 相 比 传 统 的 使 用 表 格 来 表 现 网 页 文 件 的 外 观 效 果 来 说, CSS 技 术 更 为 先 进, 是 当 今 网 络 技 术 发 展 的 潮 流 通 俗 地 说,CSS 就 是 一 组 用 来 决 定 网 页 上 的 各 种 对 象 元 素 在 何 处 以 及 如 何 显 示 的 规 则 它 们 按 照 条 目 来 划 分, 每 个 条 目 下 包 含 数 个 具 体 的 规 则 有 时 又 说 成, 它 们 按 照 样 式 来 划 分, 每 个 样 式 下 包 含 数 个 具 体 的 样 式 规 则 一 个 样 式 对 应 着 网 页 中 的 一 个 或 几 个 具 体 的 网 页 元 素 对 象, 也 就 是 说 一 个 样 式 用 来 控 制 着 一 个 或 几 个 网 页 中 的 具 体 的 网 页 元 素 对 象 样 式 可 以 包 含 在 网 页 文 件 中, 直 接 写 到 具 体 的 网 页 对 象 标 签 中, 也 可 以 保 存 在 单 独 的 CSS 文 件 中 具 体 如 下 : 1. 样 式 表 中 每 一 个 样 式 由 选 择 符 (selector) 和 对 应 的 规 则 组 成 选 择 符 用 来 标 示 出 这 个 样 式 具 体 的 作 用 对 象 因 而, 通 常 是 HTML 网 页 中 对 象 元 素 的 名 称, 也 可 以 是 类 (class) 标 识 符 (id) 伪 类 (pseudoclass, 用 来 表 现 超 级 链 接 的 不 同 状 态 ) 等 类 (class), 表 示 某 一 类 对 象, 以. 开 头 带 出 CLASS 类 别
标 识 符 (ID), 表 示 某 唯 一 对 象, 以 # 开 头 带 出 ID 标 号 标 签 (HTML 对 象 ), 表 示 HTML 中 某 一 具 体 的 标 签 类 型 具 体 的 网 页 实 例 代 码 如 下 : <head> <title> 试 验 文 档 </title> <styletype="text/css"> <!--.ziti{ font-size:36px; color:#0000ff; } #lizi{ font-size:16px; background-color:#ffff00; } table{ background-color:#00ff00; } --> </style> </head> <body> <p class=ziti> 苏 豪 老 师 </p> <table width="200"border="1"> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr>
</table> <p ID=lizi> 苏 豪 老 师 </p> <table width="200"border="1"> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> <p class=ziti> 苏 豪 老 师 </p> </body> </html> 2. 将 样 式 表 ( 规 则 ) 添 加 到 HTML 文 档 中 的 3 种 方 式 1 链 接 外 部 样 式 表 外 部 样 式 表 通 过 在 <head> 区 内 使 用 <link> 元 素 来 引 用,<link> 元 素 有 三 大 属 性 : 1 rel: 用 stylesheet 来 表 明 链 接 的 元 素 是 一 个 样 式 表 单 2 href: 指 明 了 外 部 样 式 表 的 URL 地 址 3 type: 指 明 了 样 式 表 的 类 型, 这 里 是 text/css ( 其 他 还 有 jss) 举 例 : 外 部 样 式 表 的 引 用 方 式 <head> <title>stylesheetlinkingexample</title> <linkrel="stylesheet"href="\css\css1.css"type="text/css"> </head> 2 嵌 入 写 到 网 页 文 件 <head> 区, 包 括 嵌 入 样 式 表 和 输 入 样 式 表 嵌 入 样 式 表 的 使 用 方 式 是 直 接 写 在 head 区 的 style 元 素 内, 从 而 形 成 应 用 与 整 个 文 档 的 样 式 表 这 种 情 况 下 只 需 要 用 到 style 元 素 的 type 属 性 例 子 略
输 入 样 式 表 也 是 引 用 一 个 外 部 样 式 表, 但 不 是 通 过 link 元 素 而 是 在 style 区 内 通 过 @import 语 法 来 引 用 :@importurl(css 的 url 地 址 ); 可 以 在 <style> 元 素 内 引 用 一 些 输 入 样 式 表, 同 时 又 指 定 一 些 只 应 用 于 本 文 档 的 样 式 但 是 (Netscape) 浏 览 器 对 输 入 样 式 表 的 支 持 还 不 普 遍, 所 以 建 议 使 用 <link> 来 引 用 外 部 样 式 表 例 : 输 入 样 式 表 和 嵌 入 样 式 表 的 联 合 使 用 <head> <styletype= type/css > <!-- @importurl(corerules.css); @importurl(linkrules.css); h1{ font:24pt; font-family:sans-serif; color:black; text-align:center; } --> </style> </head> 3 嵌 入 写 到 网 页 对 象 元 素 内, 通 过 绝 大 多 数 元 素 的 style 属 性 实 现 如 下 : <pstyle= font-size:36px;color:#0000ff; > 文 字 内 容 </P> 3.CSS 样 式 表 的 其 它 相 关 知 识 : 向 样 式 表 内 添 加 注 释 用 /* */ 符 号 另 外, 通 过 将 样 式 规 则 包 围 在 HTML 注 释 <!----> 之 间, 可 以 让 那 些 不 支 持 样 式 表 技 术 的 老 浏 览 器 也 能 正 常 工 作 而 不 是 直 接 把 样 式 规 则 显
示 在 屏 幕 上 一 般 而 言, 浏 览 器 会 忽 略 不 认 识 的 元 素 和 属 性, 但 包 围 在 元 素 之 间 的 内 容 会 显 示 出 来 每 一 条 规 则 必 须 以 分 号 ; 结 束 如 果 多 个 元 素 共 享 相 同 的 样 式 规 则, 可 以 使 用 逗 号 将 它 们 分 组 定 义 这 里 分 组 的 概 念 与 分 类 (class) 或 标 识 符 (id) 的 概 念 不 同, 前 者 设 置 的 规 则 对 整 个 文 档 中 所 有 的 该 元 素 都 起 作 用, 而 后 者 只 对 该 元 素 的 一 个 子 集 (class 或 id 相 同 的 ) 起 作 用 当 成 组 规 则 和 其 他 规 则 都 涉 及 到 同 一 个 元 素 时, 它 们 将 被 组 合 起 来, 以 生 成 某 个 元 素 的 完 整 的 样 式 举 例 : 成 组 规 则 的 应 用 h1,h2,h3{background:yellow;color:black;} h1{font-size:200%;} h2{font-size:150%;} h3{font-size:125%;} 样 式 规 则 的 作 用 范 围 以 上 讨 论 了 样 式 表 的 存 放 位 置, 现 在 讨 论 样 式 表 的 作 用 范 围, 两 者 既 有 联 系 又 有 区 别 : 行 内 样 式 规 则 自 然 决 定 了 它 的 影 响 范 围 是 当 前 元 素, 而 其 他 样 式 规 则 可 以 灵 活 地 设 置 规 则 的 作 用 范 围 具 体 如 下 : 1. 简 单 规 则 最 简 单 的 规 则 不 妨 称 它 们 为 文 档 规 则 和 行 内 规 则 前 者 可 以 应 用 到 整 个 文 档 中 出 现 的 所 有 的 某 元 素 ( 如 所 有 的 <p> 元 素 ), 后 者 只 应 用 到 当 前 元 素 2.id 规 则 使 用 id 属 性 的 元 素 除 了 可 以 作 为 超 链 接 的 目 标 外 ( 类 似 name 属 性, 在 载 入 页 面 时 将 显 示 定 位 在 页 面 的 指 定 位 置 ), 还 可 以 用 它 来 和 样 式 表 中 的 某 个 样 式 规 则 绑 定 ( 比 name 属 性 强 的 地 方 ) 无 论 是 作 为 超 链 接 的 href 还 是 样 式 规 则 的 选 择 符, 引 用 id 的 格 式 为 :#id 值 在 一 个 HTML 文 档 中,id 属 性 值 必 须 全 局 唯 一 举 例 :id 属 性 与 超 链 接 或 样 式 表 的 结 合 使 用
如 有 <pid= SecondParagraph > </p>, 则 可 以 如 下 引 用 : <ahref= #SecondParagraph >GotoSecondParagraph</a> 或 者 <head> <styletype= text/css > <!-- #SecondParagraph{background-color:green;} --> </style> </head> 3.class 规 则 和 id 属 性 一 样,class 属 性 也 是 HTML 核 心 属 性 之 一, 多 数 元 素 都 有 该 属 性 class 属 性 定 义 了 一 个 元 素 所 属 类 的 名 称 class 取 值 不 要 求 唯 一, 同 一 类 元 素 的 多 个 实 例 多 个 不 同 类 的 元 素 都 可 能 属 于 同 一 个 类 使 用 类 可 以 显 著 地 减 少 文 档 中 必 需 的 样 式 规 则 的 数 量 样 式 规 则 中 有 两 种 引 用 class 的 格 式 : 1 为 所 有 该 类 的 元 素 设 置 样 式 :. 类 名 { 样 式 规 则 ;} 2 为 属 于 该 类 的 所 有 X 元 素 设 置 样 式 :X. 类 名 { 样 式 规 则 ;} 举 例 :class 规 则 的 使 用 <styletype= text/css > <!--.main-item{font-size:150%;} h1.veryimportant{background-color:orange;} --> </style>
伪 类 (pseudo-classes) 和 伪 元 素 (pseudo-elements) 伪 类 一 组 专 门 的 预 定 义 的 类 称 为 伪 类, 主 要 用 来 处 理 超 链 接 的 状 态 超 链 接 文 字 的 状 态 可 以 通 过 伪 类 选 择 符 + 样 式 规 则 来 控 制 伪 类 选 择 符 包 括 : 1a:link: 未 访 问 链 接 2a:visited: 已 访 问 链 接 3a:active: 激 活 时 ( 链 接 获 得 焦 点 时 ) 链 接 的 颜 色 4a:hover: 鼠 标 移 到 链 接 上 时 一 般 a:hover 和 a:visited 链 接 的 状 态 ( 颜 色 下 划 线 等 ) 应 该 是 相 同 的 前 三 者 分 别 对 应 body 元 素 的 link vlink alink 这 三 个 属 性 四 个 状 态 的 先 后 过 程 是 :a:link->a:hover->a:active->a:visited 另 外,a:active 不 能 设 置 有 无 下 划 线 ( 总 是 有 的 ) 举 例 : 伪 类 的 常 见 状 态 值 <styletype= text/css > <!-- a:link{color:blue;text-decoration:none;}// 未 访 问 : 蓝 色 无 下 划 线 a:active:{color:red;}// 激 活 : 红 色 a:visited{color:purple;text-decoration:none;}// 已 访 问 :purple 无 下 划 线 a:hover{color:red;text-decoration:underline;}// 鼠 标 移 近 : 红 色 下 划 线 --> </style> 伪 元 素
两 个 伪 元 素 ::first-letter 和 :first-letter 它 们 常 常 和 像 <p> 这 样 的 元 素 引 导 的 一 段 文 字 一 起 使 用, 用 来 影 响 其 中 首 字 母 或 者 首 行 的 显 示, 如 p:first-letter 和 p:first-line <styletype= text/css > <!-- p:first-line{background-color:yellow;} p:first-letter{color:red;font-size:150%;} --> </style> 样 式 规 则 的 继 承 与 嵌 套 该 性 质 允 许 对 元 素 的 多 种 规 则 进 行 组 合, 既 可 以 从 父 元 素 那 里 继 承 一 些 属 性, 也 可 以 重 写 某 些 属 性 层 叠 (CSS 中 的 C) 的 一 般 思 想 有 效 地 创 建 了 一 个 系 统 以 确 定 在 有 多 个 样 式 表 的 文 档 中 哪 些 规 则 将 被 应 用 例 如, 使 用 id 属 性 为 一 个 特 定 的 <p> 元 素 指 定 规 则, 这 相 对 于 通 过 class 规 则 指 定 的 规 则 具 有 优 先 权, 而 class 规 则 相 对 于 为 <p> 元 素 自 身 指 定 的 规 则 有 优 先 权 相 对 于 应 用 于 整 个 文 档 的 样 式 或 链 接 进 来 的 外 部 样 式, 通 过 一 个 style 属 性 指 定 的 行 内 样 式 是 更 重 要 的 考 虑 究 竟 哪 一 个 规 则 将 最 终 生 效 的 简 单 方 法 是 : 越 专 门 的 规 则 优 先 级 越 高, 和 标 记 位 置 越 近 的 规 则 优 先 级 越 高 如 果 需 要 一 个 特 定 的 规 则 永 远 不 被 后 面 的 另 一 条 规 则 重 写, 可 以 用!important 声 明 对 希 望 绝 不 被 忽 略 的 规 则, 可 以 在 这 个 规 则 的 分 号 之 前 插 入 声 明!important, 它 一 定 要 放 在 规 则 的 最 后, 分 号 之 前 的 位 置, 否 则 将 被 忽 略 另 外, 许 多 老 版 本 的 浏 览 器 并 不 支 持 该 声 明 举 例 : 使 用!important 声 明 不 被 重 写 的 规 则 P{color:red!important;font-size:12pt;} <pstyle= color:green;font-size:24pt; }...</p> <p> 元 素 最 终 将 以 红 色 24 点 大 小 显 示
另 外 CSS 盒 模 型 基 础 知 识 如 图 : CSS 常 用 属 性 font 属 性 字 模 字 体 样 式 字 体 大 小 字 体 效 果 等 常 用 属 性 有 : 1font-family: 字 模,Cursive Fantasy ComicSansMS 等 2font-size: 字 体 物 理 大 小 或 相 对 大 小, 物 理 大 小 包 括 :xx-small x-small small medium large x-large xx-large 分 别 对 应 1~7 号 字 体 3font-style: 是 否 斜 体,normal italic oblique(=italic) 4font-weight: 文 字 粗 细,normal bold bolder lighter
5font-variant: 小 型 大 写 字 母,normal small-caps( 小 型 大 写 字 母 ) <!--[endif]--> text 属 性 文 本 修 饰 文 本 缩 进 单 词 间 距 字 母 间 距 行 间 距 文 本 的 水 平 对 齐 和 垂 直 对 齐 以 及 空 白 大 小 的 控 制 常 用 属 性 有 : 1text-transform: 单 词 大 小 写,none capitalize uppercase lowercase 2text-decoration: 特 殊 效 果,none line-through overline underline 3word-spacing: 单 词 间 距,normal 英 寸 (in) 厘 米 (cm) point(pt) pica (pc) em(em) 像 素 (px) 4letter-spacing: 字 母 间 距 5vertical-align: 文 本 或 图 像 的 垂 直 定 位,baseline( 默 认 ) sub super top text-top middle bottom text-bottom 6text-align: 文 本 水 平 对 齐 方 式,left right center justify 7text-indent: 为 段 落 元 素 第 一 行 产 生 缩 进 8line-height: 当 前 行 的 高 度, 这 样 设 置 的 行 上 下 会 空 出 相 同 的 距 离 9white-space: 控 制 元 素 内 空 格 的 处 理 方 式,normal( 默 认 ) pre( 不 压 缩 空 格 ) nowrap( 即 使 文 本 行 超 出 了 元 素 内 容 的 宽 度 也 不 会 换 行 ) color 属 性 和 background 属 性 1color: 文 字 颜 色
2background-color: 背 景 色 3background-image: 背 景 图 像, 背 景 色 显 示 在 背 景 图 像 的 下 面, 以 提 供 不 透 明 的 背 景, 比 4background-repeat: 决 定 当 背 景 图 像 比 元 素 的 画 布 空 间 小 时 该 如 何 排 列 repeat: 默 认, 在 水 平 和 垂 直 两 个 方 向 上 平 铺 ; repeat-x: 仅 在 水 平 方 向 平 铺 ; repeat-y: 仅 在 垂 直 方 向 平 铺 ; no-repeat: 不 平 铺 5background-attachment: scroll: 默 认, 图 像 和 文 本 一 起 滚 动 ; fixed: 图 像 不 动, 水 印 效 果 6background-position: 背 景 图 像 在 元 素 画 布 空 间 中 的 定 位 方 式, 指 定 了 图 像 左 上 角 相 对 于 画 布 的 水 平 间 距 和 垂 直 间 距 可 以 用 绝 对 距 离 ( 像 素 ) 百 分 比 或 特 殊 关 键 字 水 平 方 向 关 键 字 :left center right 垂 直 方 向 关 键 字 :top center bottom 举 例 :background-image 属 性 使 用 b{background-image:url(donut-tile.gif);background-color:white;} p{background-image:url(picture.gif);background-position:20%40%;} body{background-image:url(picture.gif);background-position: centercenter;} box 属 性
像 <p> 元 素 这 样 的 块 级 元 素 可 以 作 为 屏 幕 上 的 一 个 矩 形 容 器 来 考 虑 可 以 通 过 样 式 属 性 来 控 制 这 些 容 器 的 三 个 方 面 可 以 控 制 的 box 属 性 如 下 : 1margin 属 性 : 决 定 元 素 的 box 的 边 和 相 邻 元 素 的 边 的 距 离 2border 属 性 : 决 定 包 围 元 素 的 边 的 边 框 的 视 觉 特 性 3padding 属 性 : 决 定 元 素 内 它 的 边 和 它 的 实 际 内 容 间 的 距 离 4height,width 和 positioning 属 性 : 决 定 由 元 素 产 生 的 box 的 大 小 和 位 置 margin 属 性 单 边 距 的 设 置 规 则 : 1margin-top: 上 边 距 2margin-right: 右 边 距 3margin-bottom: 下 边 距 4margin-left: 左 边 距 举 例 : 单 边 距 的 设 置 body{margin-top:20px;margin-bottom:20px;margin-left:30px;margin-right:50 px;} p{margin-bottom:20mm;} div.fun{margin-left:1.5cm;margin-right:1.5cm;} 也 可 以 用 margin 属 性 来 一 次 性 为 四 条 边 设 置 边 距
举 例 : 通 过 margin 属 性 设 置 边 距 的 规 则 1 如 果 仅 指 定 了 单 个 值, 则 该 值 被 应 用 到 4 个 空 白 如 :p{margin:1.5cm;} 2 如 果 四 个 值 都 指 定 了, 则 它 们 按 照 顺 时 针 方 向 应 用 到 各 个 空 白 ( 上 右 下 左 的 顺 序 ), 最 后 一 个 距 离 后 加 分 号, 之 间 用 空 格 相 隔 如 :p{margin:10px5px15px5px;} 3 如 果 在 规 则 中 仅 指 定 了 两 个 或 三 个 值, 缺 少 一 边 的 取 值 将 由 它 的 对 边 决 定 如 :p{margin:10px5px;} 将 设 置 上 边 下 边 的 空 白 为 10 像 素, 右 边 左 边 的 空 白 为 5 像 素 border 属 性 border 位 于 空 白 (margin) 和 间 隙 (padding) 之 间 ( 一 )border-style 属 性 1none: 无 边 框 2dotted: 点 边 框 3dashed: 虚 线 边 框 4solid: 实 线 边 框 5double: 双 边 框 6groove: 蚀 刻 边 框
7ridge: 突 出 边 框 8inset: 凹 进 边 框 9outset: 凸 起 边 框 也 可 以 通 过 border-top-style,border-right-style,border-bottom-style, border-left-style 来 单 独 设 置 各 边 的 边 框 类 型 当 使 用 border-style 来 设 置 四 边 时, 规 则 同 margin 类 似 ( 二 )border-width 属 性 border-width border-top-width border-right-width border-bottom-width border-left-width 可 以 分 别 设 置 边 框 的 粗 细 典 型 取 值 有 :thin medium thick, 当 然 也 可 取 其 他 长 度 值 ( 三 )border-color 属 性 border-color border-top-color border-right-color border-bottom-color border-left-color 可 以 分 别 设 置 边 框 的 颜 色 可 以 将 border-style border-width border-color 一 起 应 用 到 border border-top border-right border-bottom border-left 上 来 实 现 对 相 关 border 属 性 的 快 速 设 置 当 三 个 属 性 在 放 在 一 起 设 置 时, 最 好 按 照 border-style border-width border-color 的 顺 序 来 给 出 值 举 例 :border 组 合 属 性 的 设 置
#RainbowBox { background-color:yellow; border-top:solid20pxred; border-right:double10pxblue; border-bottom:solid20pxgreen; border-left:dashed10pxorange; } padding 属 性 在 元 素 的 边 框 和 它 的 实 际 内 容 之 间 的 空 白 可 以 通 过 padding 属 性 来 控 制 元 素 的 4 个 间 隙 (padding) 可 以 通 过 padding-top padding-right padding-bottom padding-left 来 设 置 与 空 白 (margin) 和 边 框 (border) 一 样, 你 可 以 使 用 速 记 符 形 式 的 padding 属 性 来 一 次 性 地 对 四 边 的 间 隙 进 行 设 置 举 例 : 一 个 涉 及 margin border padding 的 综 合 应 用 <styletype= text/css > <!-- #one { background:yellow;
border-style:double; border-width:medium; padding-left:1cm; padding-right:0.5cm; } #two { background:yellow; border-style:double; border-width:medium; padding-top:1cm; padding-bottom:1cm; } #three { background:yellow; border-style:double; border-width:medium; padding:1cm1cm; margin:0.5cm4cm; } -->
3.4.4width height 属 性 举 例 : 综 合 P { width:300px; height:400px; padding:10px; border:solid5px; background-color:yellow; color:black; } 3.4.5float clear 属 性 float 属 性 影 响 元 素 在 水 平 方 向 上 的 对 齐 方 式, 类 似 与 多 数 html 元 素 的 align 属 性 它 使 得 它 所 包 含 的 元 素 流 向 左 边 或 右 边, 这 时 我 们 称 这 个 元 素 为 流 动 元 素 clear 属 性 对 流 动 元 素 进 行 垂 直 定 位, 决 定 是 否 继 续 或 清 除 当 前 的 流 动 方 式, 类 似 于 html 元 素 br 的 clear 属 性, 取 值 有 left right both none( 默 认 )
3.4.6display 属 性 CSS 模 型 定 义 了 三 种 类 型 的 显 示 元 素 : 块 级 元 素 行 内 元 素 和 列 表 display 属 性 允 许 一 个 元 素 的 显 示 类 型 成 为 下 面 四 个 值 中 的 一 个 :block,inline,list-item 和 none 1none: 元 素 将 不 会 显 示 出 来, 并 且 也 不 会 占 据 画 布 空 间, 这 点 和 设 置 visibility 属 性 不 同 2block: 块 级 元 素 3inline: 行 内 元 素 4list-item: 列 表 元 素 举 例 :display 属 性 使 用 1 关 闭 一 个 段 落, 使 其 不 显 示 出 来 : p.remove{display:none;} 2 将 一 个 块 级 元 素 ( 比 如 段 落 ) 转 变 成 行 内 元 素, 这 样 就 可 以 不 换 行 显 示! p{display:inline;} 3 将 一 个 行 内 元 素 转 变 成 块 级 元 素, 这 样 就 增 加 了 一 个 回 车 ( 换 行 )! em{display:block;} 4 强 制 一 个 元 素 在 一 定 程 度 上 像 列 表 那 样 显 示 : b{display:list-item;}