Html+CSS从入门到精通


本章目标 熟悉HTML的各种标签 熟练设置HTML各标签的属性 熟练使用CSS www简介 WWW,是World Wide Web(万维网)的缩写。万维网 通常也简称为Web,它是由无数的商业、教育、娱乐 等资料组成的一个庞大的信息空间。我们在这个信息 空间中遨游、浏览、搜寻资料,最终呈现在浏览器中 的信息,就是Web页面。 Web页面绝大多数都是由HTML所编写的。 HTML文件的基本结构 HTML (Hypertext Markup Language)超文本标记语言 我 的 第 一 个 网 页 Hello World! HTML 网 页HTML 网 页 头 部 部 分头 部 部 分 主 体 部 分主 体 部 分 … 标 签 标 记 HTML 文 档 的 开 始 和 结 束… 标 签 标 记 HTML 文 档 的 开 始 和 结 束 网 页 标 题网 页 标 题 网 页 内 容 , 可 以 是 文 本 、图 像 等 网 页 内 容 , 可 以 是 文 本 、图 像 等 这 部 分 包 含 文 本 、图 像 和 链 接 。它 包 括 在 … 标 签 内这 部 分 包 含 文 本 、图 像 和 链 接 。它 包 括 在 … 标 签 内这 部 分 包 括 标 题 和 其 他 说 明 信 息 。包 括 在 … 标 签 内这 部 分 包 括 标 题 和 其 他 说 明 信 息 。包 括 在 … 标 签 内 标签 网 页 标 题 网页页面中出现乱码,那如何消除乱码使其正常 显示? 使 用 标 签 META标 签 常 用 来 描 述 网 页 , 定 义 页 面 的 一 些 基 本 信 息 使 用 标 签 META标 签 常 用 来 描 述 网 页 , 定 义 页 面 的 一 些 基 本 信 息 简 体 中 文 : gb2312 繁 体 中 文 : big5 纯 英 文 网 页 : iso-8859-1 简 体 中 文 : gb2312 繁 体 中 文 : big5 纯 英 文 网 页 : iso-8859-1 可 以 避 免 页 面 中 的 乱 码 可 以 避 免 页 面 中 的 乱 码 设 置 页 面 标 题设 置 页 面 标 题 页面背景色或背景图像 Hello World! 为 了 使 页 面 美 丽 大 方 , 网 页 背 景 要 尽 量 地 浅为 了 使 页 面 美 丽 大 方 , 网 页 背 景 要 尽 量 地 浅 …… 淘 宝 集 市 欢 迎 您 !

淘 宝 网 首 届 翠 友 会 !
……

…… 段落标签

– 段(Paragraph) (可以看作是空行)

换行标签
– 换行
换 段 了换 段 了 换 行 了换 行 了 字体、字号相关标签示例 ......

手 机 充 值 、IP卡 /电 话 卡
移 动  |  100 |  联 通 |  50

Copyright © 2007 "淘 宝 网 " All rights. …… 文字布局标签 内容分隔
标签 文字列表和编号 – 有序列表
    – 无序列表
      预格式文本
      标签  水 平 分 隔 线  
      水 平 分 隔 线
      有 序 列 表有 序 列 表 无 序 列 表无 序 列 表 用 了 预 先 定 义 好 的 格 式 用 了 预 先 定 义 好 的 格 式 内容分隔标签

      ……


      …… 线 的 厚 度 值线 的 厚 度 值 线 的 宽 度线 的 宽 度
      标 签 用 于 在 页 面 上 绘 制 水 平 线
      标 签 用 于 在 页 面 上 绘 制 水 平 线 线 的 颜 色线 的 颜 色 文字列表和编号标签
          标签

          注 册 步 骤 :

          1. 填 写 信 息
          2. 收 电 子 邮 件
          3. 注 册 成 功
          新 人 上 路 指 南
          • 如 何 激 活 会 员 名 ?
          • 如 何 注 册 淘 宝 会 员 ?
          • 注 册 时 密 码 设 置 有 什 么 要 求 ?
          • 支 付 宝 认 证
          无序列表语法
          • 列表项内容
          • ……
          有序列表语法
          1. 列表项内容
          2. ……
          预格式文本
          标签  
            腾讯-QQ币/QQ幻想-30元卡  一 口 价:26.45元  运 费:卖家承担运费  剩余时间:5天  宝贝类型: 全新  卖主声明:货到付款,可试用10天!  
          HTML中 代 码 格 式 与 浏 览 器 中 显 示 效 果 一 样 HTML中 代 码 格 式 与 浏 览 器 中 显 示 效 果 一 样 超链接标签 页面链接标签 – 链接到其他页面 [免费注册] 链 接 的 地 址链 接 的 地 址 链 接 的 内 容链 接 的 内 容 超链接标签标签 链接到其他页面 链 接 到 其 他 页 面 [免 费 注 册 ] [登 录 ] 单 击 ”[免 费 注 册 ]” 之 后 链 接 到 的 页 面 单 击 ”[免 费 注 册 ]” 之 后 链 接 到 的 页 面 超链接标签标签 要实现如下图所示的超链接效果,怎么办? 使 用 锚 记 标 签 点 击 超 链 接 页 面 定 位 到 相 关 位 置点 击 超 链 接 页 面 定 位 到 相 关 位 置 标签锚标记 链接到本页面 – 锚记标签用于使用户“跳”到文档的某个部分 – HTML 的 NAME 属性用于创建锚标记 主题名称 – 为达到这种跳转效果,请在 HREF 参数中使用该标记 主题名称 只定义NAME属性相当于定义一个位置 跳转到本文档中相应锚标记位置 标签锚标记示例 链 接 到 其 他 页 面 [新 人 上 路 ] … … 新 人 上 路 指 南 … … 1、定 义 锚 标 记1、定 义 锚 标 记 2、链 接 到 锚 标 记 所 在 位 置2、链 接 到 锚 标 记 所 在 位 置 标签电子邮件链接 电子邮件链接 – 要链接电子邮件,可在链接标签中插入” mailto:邮箱地址” 站长信箱 标签电子邮件链接示例 电 子 邮 件 链 接 … … 站 长 信 箱 … … 单 击 ”站 长 信 箱 ”链 接 后 的 输 出 结 果 单 击 ”站 长 信 箱 ”链 接 后 的 输 出 结 果 任 何 正 确 的 电 子 邮 箱 地 址 均 可 任 何 正 确 的 电 子 邮 箱 地 址 均 可 小结 有 序 列 表 OL有 序 列 表 OL 无 序 列 表 UL无 序 列 表 UL 编写如下图所示效果对应的html代码 图像标签 图像的基本语法 – 明星演唱会开幕 … … 明 星 演 唱 会 开 幕 … … 鼠 标 移 到 图 像 上 , 出 现 的 提 示 性 文 字 鼠 标 移 到 图 像 上 , 出 现 的 提 示 性 文 字 为 图 像 添 加 的 提 示 性 文 字为 图 像 添 加 的 提 示 性 文 字 滚动标签 滚动文字或图像 滚 动 延 迟 时 间 滚 动 延 迟 时 间 滚 动 对 象 的 方 向 滚 动 对 象 的 方 向 说明: – scrolldelay:表示滚动延迟时间,默认值为90。 – direction:表示滚动的方向,默认为从右向左。 滚动标签 滚动标签示例 水 平 滚 动 垂 直 滚 动 Avon化 妆 品
          雅 诗 兰 黛
          … …
          水 平 向 左 移 动 水 平 向 左 移 动 垂 直 向 上 移 动 垂 直 向 上 移 动 图 片 和 文 字 同 时 垂 直 向 上 移 动 图 片 和 文 字 同 时 垂 直 向 上 移 动 声 明 滚 动 文 字 结 束 声 明 滚 动 文 字 结 束 声 明 滚 动 文 字 “水 平 滚 动 ”开 始 , 并 且 将 会 以 默 认 方 式 从 右 向 左 滚 动 声 明 滚 动 文 字 “水 平 滚 动 ”开 始 , 并 且 将 会 以 默 认 方 式 从 右 向 左 滚 动 表格的布局 创建一个表格,使用…
          标签 行 列 单 元 格 在 HTML 文 档 中 , 广 泛 使 用 表 格 来 存 放 网 页 上 的 文 本 和 图 像在 HTML 文 档 中 , 广 泛 使 用 表 格 来 存 放 网 页 上 的 文 本 和 图 像 表格 论 坛 中 应 用 表 格论 坛 中 应 用 表 格 门 户 网 站 应 用 表 格 门 户 网 站 应 用 表 格 表格应用场合 – 论坛 – 门户网站 – 购物网站 购 物 网 站 应 用 表 格 购 物 网 站 应 用 表 格 表格的基本语法 … … … …
          单 元 格 内 容
          ... 定 义 表 格
          ... 定 义 表 格 定 义 列 定 义 列 … 定 义 行 … 定 义 行 border用 来 设 置 表 格 边 框 尺 寸 大 小 border用 来 设 置 表 格 边 框 尺 寸 大 小 如何创建表格
          移 动 联 通 铁 通
          IBM 惠 普 华 硕
          创建跨行跨列的表格
          手 机 充 值 、IP卡 办 公 设 备 、文 具
          各 种 卡 的 总 汇 铅 笔 彩 笔
          打 印 刻 录
          设置表格的尺寸和边框
          品 牌 商 城
          笔 记 本 电 脑 办 公 设 备 、文 具 、耗 材
          惠 普 华 硕 打 印 机 刻 录 盘
          width用 来 设 置 表 格 的 宽 度 height用 来 设 置 表 格 的 高 度 width用 来 设 置 表 格 的 宽 度 height用 来 设 置 表 格 的 高 度 border用 来 设 置 表 格 边 框 尺 寸 大 小 border用 来 设 置 表 格 边 框 尺 寸 大 小 bordercolor用 来 设 置 表 格 边 框 颜 色 bordercolor用 来 设 置 表 格 边 框 颜 色 设置表格的背景 … …
           
          笔 记 本 电 脑 办 公 设 备 、文 具 、耗 材
          background属 性 用 来 设 置 表 格 的 背 景 图 片background属 性 用 来 设 置 表 格 的 背 景 图 片 bgcolor属 性 用 来 设 置 表 格 、行 、列 的 背 景 色 。“#EBEFFF”是 用 RGB表 示 的 一 种 颜 色 值 , RGB指 的 是 红 绿 蓝 , 下 图 就 是 RGB颜 色 对 照 表 。 bgcolor属 性 用 来 设 置 表 格 、行 、列 的 背 景 色 。“#EBEFFF”是 用 RGB表 示 的 一 种 颜 色 值 , RGB指 的 是 红 绿 蓝 , 下 图 就 是 RGB颜 色 对 照 表 。 设置对齐方式
           
          笔 记 本 电 脑 办 公 设 备 、文 具 、耗 材
          惠 普 华 硕 打 印 机 刻 录 盘
          align属 性 用 来 设 置 表 格 、行 、列 的 对 齐 方 式 align属 性 用 来 设 置 表 格 、行 、列 的 对 齐 方 式 如何使用表格进行布局 使 用 表 格 布 局 下 图 , 需 要 几 行 几 列 ? 需 要 7行 2列需 要 7行 2列 使用表格进行布局 … …
          超 值 变 形 金 钢 2.5折 !
          人 们 为 啥 对 电 视 吼 叫
          表格的边框、填充、间距属性 border(边 框 的 厚 度 ) border(边 框 的 厚 度 ) 内 容 内 容内 容 内 容 cellpadding (单 元 格 填 充 ) cellpadding (单 元 格 填 充 ) cellspacing (单 元 格 间 距 ) cellspacing (单 元 格 间 距 ) 设置表格的边框、填充和间距 border(边 框 的 厚 度 ) border(边 框 的 厚 度 ) cellpadding (单 元 格 填 充 ) cellpadding (单 元 格 填 充 ) cellspacing (单 元 格 间 距 ) cellspacing (单 元 格 间 距 ) 查 看 源 代 码 … …
          设置表格的边框、填充和间距属性 … .
           
          笔 记 本 电 脑 办 公 设 备 、文 具 、耗 材
          border属 性 用 来 设 置 表 格 外 框 宽 度 cellspacing属 性 用 来 设 置 表 格 内 框 宽 度 cellpadding属 性 用 来 设 置 表 格 内 填 充 距 离 border属 性 用 来 设 置 表 格 外 框 宽 度 cellspacing属 性 用 来 设 置 表 格 内 框 宽 度 cellpadding属 性 用 来 设 置 表 格 内 填 充 距 离 填 充 之 后 的 效 果 填 充 之 后 的 效 果 小结 表 格 的 高 度 、宽 度 、背 景 图 像 、 边 框 和 填 充 属 性 表 格 的 高 度 、宽 度 、背 景 图 像 、 边 框 和 填 充 属 性 行 的 背 景 色行 的 背 景 色 单 元 格 居 中 对 齐 单 元 格 居 中 对 齐 编写如下图所示效果对应的HTML代码 小结 创 建 表 格 最 少 需 要 那 三 个 标 签 ? 简 述 表 格 的 基 本 结 构 。 跨 行 跨 列 的 表 格 , 主 要 在 什 么 情 况 下 使 用 ? 给 你 一 个 表 格 , 你 会 从 哪 些 方 面 进 行 美 化 ? 表单的典型应用 表单的典型应用 – 注册用户 – 收集信息 – 反馈信息 – 为网站提供搜索工具 注 册 用 户注 册 用 户 收 集 信 息收 集 信 息 反 馈 信 息反 馈 信 息 提 供 搜 索 工 具 提 供 搜 索 工 具 表单的基本语法 表单标签
          里面最基本也是最重要的两个属 性:action 和post METHOD =“post或 get”METHOD =“post或 get” ACTIONACTION METHODMETHOD 指 定 提 交 后 , 由 服 务 器 上 那 个 处 理 程 序 处 理 指 定 提 交 后 , 由 服 务 器 上 那 个 处 理 程 序 处 理 指 定 向 服 务 器 提 交 的 方 法 : 一 般 为 post或 get方 法 , post方 法 比 较 安 全 指 定 向 服 务 器 提 交 的 方 法 : 一 般 为 post或 get方 法 , post方 法 比 较 安 全 ACTION = “URL”ACTION = “URL”
          … …
          表单元素
          … …
          指 定 元 素 的 类 型 , 可 为 TEXT、RADIO、 SUBMIT等 指 定 元 素 的 类 型 , 可 为 TEXT、RADIO、 SUBMIT等 控 件 的 名 称控 件 的 名 称 控 件 的 初 始 值控 件 的 初 始 值 控 件 的 初 始 宽 度 控 件 的 初 始 宽 度 控 件 中 输 入 的 最 多 字 符 个 数 控 件 中 输 入 的 最 多 字 符 个 数 控 件 是 否 被 选 中 控 件 是 否 被 选 中 表单元素 单 行 文 本 输 入 框 (TEXT) 单 行 文 本 输 入 框 (TEXT) 单 选 按 钮 (RADIO) 单 选 按 钮 (RADIO) 复 选 框 (CHECKBOX) 复 选 框 (CHECKBOX) 下 拉 列 表 (SELECT) 下 拉 列 表 (SELECT) 重 置 按 钮 (RESET) 重 置 按 钮 (RESET) 提 交 按 钮 (SUBMIT) 提 交 按 钮 (SUBMIT) 多 行 文 本 框 (TEXTAREA) 多 行 文 本 框 (TEXTAREA) 密 码 框 (PASSWORD) 密 码 框 (PASSWORD) 表单元素属于表单,在写的过程中,一般将表单元素放入表单内表单元素属于表单,在写的过程中,一般将表单元素放入表单内 表单元素详解 表单元素一共有12个,包括10个input标签和2个其它标签
          小结 综合以上知识点写一个注册页面 TEXTTEXT PASSWORDPASSWORDRADIORADIO TEXTAREATEXTAREA SUBMITSUBMIT RESETRESETSELECTSELECT CHECKBOXCHECKBOX 在网页设计中,表单的主要用途有哪些? 框架 广 告 栏 顶 部 框 架 (top.htm) 广 告 栏 顶 部 框 架 (top.htm) 导 航 栏 左 侧 框 架 (left.htm) 导 航 栏 左 侧 框 架 (left.htm) 详 细 内 容 页 面 右 侧 框 架 (main.htm) 详 细 内 容 页 面 右 侧 框 架 (main.htm) 框 架 的 边 框 框 架 的 边 框 框 架 集 页 面 (FrameSet.htm) 框 架 集 页 面 (FrameSet.htm) 框架使用场合 页 面 的 一 个 固 定 部 分 显 示 徽 标 或 静 态 信 息 页 面 的 一 个 固 定 部 分 显 示 徽 标 或 静 态 信 息 在 另 一 个 固 定 部 分 显 示 导 航 部 分 详 细 内 容 在 另 一 个 固 定 部 分 显 示 导 航 部 分 详 细 内 容 在 此 处 显 示 详 细 内 容 , 页 面 中 此 部 分 是 变 化 的 。 在 此 处 显 示 详 细 内 容 , 页 面 中 此 部 分 是 变 化 的 。 … … 框架的基本结构 框架页面的基本语法 边 框 尺 寸 大 小 边 框 尺 寸 大 小将 窗 口 分 割 成 左 中 右 3个 部 分 ,可 选 将 窗 口 分 割 成 左 中 右 3个 部 分 ,可 选 将 窗 口 分 割 成 上 下 2个 部 分 ,可 选 将 窗 口 分 割 成 上 下 2个 部 分 ,可 选 第 一 个 窗 口 要 显 示 的 网 页 第 一 个 窗 口 要 显 示 的 网 页 框架的基本结构 rows_cols框 架 将 窗 口 分 割 成 上 中 下 3部 分 将 窗 口 分 割 成 上 中 下 3部 分 窗 口 边 框 的 宽 度 窗 口 边 框 的 宽 度 如 果 要 在 浏 览 器 中 创 建 左 中 右 三 个 窗 口 ,该 如 何 实 现 ? 如 果 要 在 浏 览 器 中 创 建 左 中 右 三 个 窗 口 ,该 如 何 实 现 ? 每 个 窗 口 对 应 一 个 页 面 , 以 及 一 个 框 架 集 页 面 , 总 共 需 要 几 个 HTML页 面 文 件 ? 每 个 窗 口 对 应 一 个 页 面 , 以 及 一 个 框 架 集 页 面 , 总 共 需 要 几 个 HTML页 面 文 件 ? 如何创建多个复杂的窗口 要 实 现 如 下 图 所 示 的 窗 口 , 该 如 何 制 作 ? 1、分 成 上 下 两 个 窗 口 2、把 下 面 的 窗 口 分 成 左 右 两 个 窗 口 top窗 口 left 窗 口 right窗 口 如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下: 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html” top.html 效 果 图 top.html 效 果 图 left.html 效 果 图 left.html 效 果 图 right.html 效 果 right.html 效 果 如何创建多个复杂的窗口 4、新建多框架HTML页面“Frame_Sets.html” ...... 设 置 无 框 架 边 框 设 置 无 框 架 边 框 不 显 示 滚 动 条 不 显 示 滚 动 条 禁 止 调 整 框 架 大 小 禁 止 调 整 框 架 大 小 框 架 名 称 , 便 于 超 文 本 链 接 锚 标 签 target属 性 所 引 用 框 架 名 称 , 便 于 超 文 本 链 接 锚 标 签 target属 性 所 引 用 如何设置窗口链接的显示位置 如 果 在 同 一 个 页 面 中 , 要 实 现 在 一 个 框 架 窗 口 中 的 超 链 接 页 面 出 现 在 另 一 个 框 架 窗 口 中 , 如 何 实 现 ? 使 用 target目 标 窗 口 属 性使 用 target目 标 窗 口 属 性 如何设置窗口链接的显示位置 target目标窗口属性 – name=“显示的窗口名” target属 性 指 定 了 所 链 接 的 文 件 出 现 在 名 称 为 “窗 口 名 ”的 框 架 窗 口 里 。 target属 性 指 定 了 所 链 接 的 文 件 出 现 在 名 称 为 “窗 口 名 ”的 框 架 窗 口 里 。

          target属 性 指 定 了 所 链 接 的 文 件 出 现 在 名 称 为 “rightframe”的 框 架 窗 口 里 target属 性 指 定 了 所 链 接 的 文 件 出 现 在 名 称 为 “rightframe”的 框 架 窗 口 里 如何设置窗口链接的显示位置 target目标窗口属性 – 四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口 … …

          … … 新 启 一 个 窗 口 打 开 文 件 “right.html” 新 启 一 个 窗 口 打 开 文 件 “right.html” top.htmltop.html left.htmlleft.html right1.html或 right2.html right1.html或 right2.html frame_sets.htmlframe_sets.html 编写如下图所示效果对应的html代码 小结 总结 表 单 中 提 交 数 据 的 方 法 有 那 两 种 及 其 区 别 ? 表 单 里 有 哪 些 常 用 的 表 单 元 素 ? 创 建 一 个 框 架 页 面 至 少 需 要 哪 两 个 标 签 ? t ar get 设 定 目 标 资 源 所 要 显 示 的 窗 口 , 其 取 值 可 以 为 哪 些 ? 简 述 创 建 一 个 多 框 架 页 面 所 需 的 主 要 步 骤 。 总结 HTML文档结构 网页描述标签 控制文本标签 –


              图像标签、滚动标签 表格标签、表格布局 表单 – 表单的提交方式,提交处理路径 – 10个表单元素、两个标签 页面框架 CSS CSS样式表也叫级联样式表,它是HTML的美容师,可 以改变HTML页面的样式 – 会创建统一外观的字体文本 – 会创建无下划线的超连接样式 – 会创建个性化的表格 – 会创建个性化的表单 CSS样式表 为什么需要CSS样式表 演 示 示 例 1: 演 示 能 换 皮 肤 的 页 面演 示 示 例 1: 演 示 能 换 皮 肤 的 页 面 HTML标签的外观样式比较单一 – 颜色只有黑白 – 字体类型和大小无变化 样式表的作用相当于华丽的衣服 内 容 相 同 外 观 不 同 为什么需要CSS样式表 样式表能实现内容与样式的分离,方便团队开发 程 序 员 写 代 码 程 序 员 写 代 码 美 工 做 样 式美 工 做 样 式 内 容 与 样 式 和 谐 统 一 的 完 整 网 页 内 容 与 样 式 和 谐 统 一 的 完 整 网 页 样式表的基本语法 样式表的基本结构 声 明 文 档 样 式 表 结 束 声 明 文 档 样 式 表 结 束 文 档 样 式 表 开 始 , 类 型 为 CSS样 式 文 档 样 式 表 开 始 , 类 型 为 CSS样 式 样 式 规 则样 式 规 则 选 择 器选 择 器 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属 性属 性 属 性 的 值属 性 的 值 样式表的基本语法 样 式 规 则

              静 夜 思

              床 前 明 月 光 ,

              疑 是 地 上 霜 。

              我 是 郭 德 刚 ,

              低 头 思 故 乡 。

              本 页 面 中 所 有 的 P标 签 都 应 用 了 此 样 式 本 页 面 中 所 有 的 P标 签 都 应 用 了 此 样 式 所 有 的 段 落 都 采 用 P 样 式 , 保 证 风 格 统 一 所 有 的 段 落 都 采 用 P 样 式 , 保 证 风 格 统 一 用 分 号 隔 开 用 分 号 隔 开 选 择 器选 择 器 如 何 编 写 此 样 式 ? 字 体 类 型 为 律 书 、 大 小 24px 如 何 编 写 此 样 式 ? 字 体 类 型 为 律 书 、 大 小 24px 样式表的基本语法 如果希望其他的标签也能采用P标签的样式, 怎么办? 其 他 标 签 和 P标 签 应 该 采 用 相 同 的 样 式 , 所 以 要 为 它 们 定 义 一 个 共 享 样 式 。 类样式(class) .类 名.类 名 样 式 规 则样 式 规 则 样式表的基本语法 样 式 规 则

              静 夜 思

              床 前 明 月 光 ,

              疑 是 地 上 霜 。

              我 是 郭 德 刚 ,

              低 头 思 故 乡 。

              CLASS类 选 择 器 CLASS类 选 择 器 为 类 选 择 器 定 义 的 样 式 规 则 为 类 选 择 器 定 义 的 样 式 规 则 应 用 类 选 择 器 class= ”类 名 “ 应 用 类 选 择 器 class= ”类 名 “

              标 签 要 应 用 同 一 样 式

              标 签 要 应 用 同 一 样 式 如 何 实 现 这 样 的 样 式 效 果 ? 字 体 类 型 都 为 隶 书 如 何 实 现 这 样 的 样 式 效 果 ? 字 体 类 型 都 为 隶 书 常用的样式属性 文本对齐text-align 设置或检索文本的 颜色 color 字体样式font-style 字体类型font-family 字体大小font-size 说 明文本属性 使 用 font-size、font-family、 color实 现使 用 font-size、font-family、 color实 现 宋 体 , 字 体 大 小 12px 宋 体 , 字 体 大 小 12px 字 体 大 小 16px 字 体 大 小 16px 要 实 现 如 下 图 所 示 的 文 本 样 式 , 该 如 何 编 写 ? 常用的样式属性 【新 闻 】[设 搜 狐 为 首 页 ] 9月 1日

              ·世 锦 赛 刘 翔 12秒 95夺 冠 成 就 大 满 贯

              ·我 国 实 施 不 安 全 食 品 召 回 制 度 遏 制 非 法 出 口

              … .. 声 明 P标 签 样 式 声 明 P标 签 样 式 声 明 名 称 为 bigFont类 样 式 ,它 可 被 多 个 标 签 共 享 声 明 名 称 为 bigFont类 样 式 ,它 可 被 多 个 标 签 共 享 应 用 类 样 式 用 class= ”类 名 “ 应 用 类 样 式 用 class= ”类 名 “ 小结1 编写如下图所示效果对应的HTML代码 黑 体 , 字 体 大 小 20px黑 体 , 字 体 大 小 20px 字 体 大 小 14px, 蓝 色字 体 大 小 14px, 蓝 色 常用的样式属性 背景属性 设置一个指定的图像如何被重复 可取值repeat-x、 repeat、 no-repeat、 repeat-y background-repeat 设置背景图像background-image 设置背景颜色background-color 说 明背景属性 演 示 示 例 2: 使 用 不 同 的 背 景 属 性演 示 示 例 2: 使 用 不 同 的 背 景 属 性 设 置 背 景 图 像 为 images文 件 夹 下 的 type_back1.jpg 设 置 背 景 图 像 为 images文 件 夹 下 的 type_back1.jpg 设 置 背 景 图 像 不 平 铺 设 置 背 景 图 像 不 平 铺 常用的样式属性 方框属性 margin-right 右 边 界 margin-right 右 边 界 margin-left 左 边 界 margin-left 左 边 界 margin-top 上 边 界 margin-top 上 边 界 margin-bottom 下 边 界 margin-bottom 下 边 界 margin border padding border-width 边 框 的 宽 度 border-width 边 框 的 宽 度padding-left 左 填 充 padding-left 左 填 充 padding-bottom 下 填 充 padding-bottom 下 填 充 常用的样式属性 设置内容与上边框之间的距离padding-top 填充属性 设置内容与右边框之间的距离padding-right 设置内容与下边框之间的距离padding-bottom 设置边框的颜色border-color 设置边框的样式border-style 边框属性 设置对象的左边距margin-left 边界属性 属 性 设置对象的下边距margin-bottom 设置对象的右边距margin-right 设置对象的上边距margin-top 设置边框的宽度border-width 设置内容与左边框之间的距离padding-left 说 明CSS名称 方框属性 常用的样式属性 要实现下图所示的效果,该如何编写样式规则? 线 宽 2px、虚 线 框 样 式 dashed、颜 色 为 red 线 宽 2px、虚 线 框 样 式 dashed、颜 色 为 red 使 用 background、border-right-width、border-right-color、 border-right-style、padding-top和 padding-left来 实 现 使 用 background、border-right-width、border-right-color、 border-right-style、padding-top和 padding-left来 实 现 行 的 背 景 色 为 yellow 行 的 背 景 色 为 yellow 常用的样式属性 … …

              名 字 :

              密 码 :

              … … 文 本 框 为 实 线 边 框 文 本 框 为 实 线 边 框 边 框 宽 度 为 1像 素 边 框 宽 度 为 1像 素 看 看 没 有 设 置 样 式 的 文 本 框 的 效 果看 看 没 有 设 置 样 式 的 文 本 框 的 效 果 特殊样式-超链接样式 特殊样式(超链接) – a:link {color: #FF0000} /* 未被访问的链接 红色 */ – a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ – a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ – a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 特殊样式-超链接样式 … … 诺 基 亚 | 摩 托 罗 拉 联 想 | 戴 尔 … … 超 链 接 文 本 的 样 式 超 链 接 文 本 的 样 式鼠 标 在 超 链 接 上 悬 停 时 , 超 链 接 文 本 变 为 红 色 鼠 标 在 超 链 接 上 悬 停 时 , 超 链 接 文 本 变 为 红 色 如 何 编 写 此 超 链 接 样 式 ? 如 何 编 写 此 超 链 接 样 式 ? 编 写 如 下 图 所 示 效 果 对 应 的 HTML代 码 细 边 框 solid样 式 细 边 框 solid样 式 无 下 划 线 的 超 连 接 样 式 无 下 划 线 的 超 连 接 样 式 鼠 标 在 超 链 接 上 悬 停 时 , 超 链 接 文 本 变 为 红 色 鼠 标 在 超 链 接 上 悬 停 时 , 超 链 接 文 本 变 为 红 色 小结2 常用的样式属性 要实现下图图片按钮的效果,该如何编写样式 规则? 按 钮 的 边 界 、边 框 、 填 充 值 均 为 0px 按 钮 的 边 界 、边 框 、 填 充 值 均 为 0px 使 用 background-image、 margin、 border、padding、height、width 和 font-size属 性 使 用 background-image、 margin、 border、padding、height、width 和 font-size属 性 按 钮 背 景 图 像 与 按 钮 宽 度 、 高 度 大 小 一 样 按 钮 背 景 图 像 与 按 钮 宽 度 、 高 度 大 小 一 样 字 体 大 小 14px字 体 大 小 14px 综 合 例 子 : 制 作 图 片 按 钮 常用的样式属性 .picButton{ background-image: url(images/back.jpg); border:0 px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; } … … … … . 背 景 图 像 为 images文 件 夹 下 的 back.jpg 背 景 图 像 为 images文 件 夹 下 的 back.jpg 按 钮 的 边 界 、边 框 、 填 充 均 为 0像 素 按 钮 的 边 界 、边 框 、 填 充 均 为 0像 素 设 定 按 钮 宽 度 、高 度 和 图 片 大 小 一 样 设 定 按 钮 宽 度 、高 度 和 图 片 大 小 一 样 设 置 按 钮 上 的 字 体 大 小 为 14像 素 设 置 按 钮 上 的 字 体 大 小 为 14像 素 样式表的三类应用方式 内嵌样式表 – 内嵌样式表使用格式如下: 行内(嵌入)样式表 外部样式表文件 … …

              床 前 明 月 光 ,

              疑 是 地 上 霜 。

              我 是 郭 德 刚 ,

              低 头 思 故 乡 。

              … … 样 式 规 则样 式 规 则 所 有 的 段 落 都 采 用 P 样 式 , 保 证 样 式 统 一 所 有 的 段 落 都 采 用 P 样 式 , 保 证 样 式 统 一 选 择 符选 择 符 样 式 表 行内(嵌入)样式表 如 果 希 望 某 段 文 字 和 其 他 段 落 文 字 显 示 风 格 不 一 样 , 该 如 何 解 决 ? 使 用 行 内 ( 嵌 入 ) 样 式 表 可 以 解 决使 用 行 内 ( 嵌 入 ) 样 式 表 可 以 解 决 行内(嵌入)样式表 设 置 属 性

              这 个 段 落 应 用 了 样 式

              这 个 段 落 按 默 认 样 式 显 示 为 标 签 p指 定 样 式 为 标 签 p指 定 样 式 本 段

              标 签 采 用 了 行 内 样 式 本 段

              标 签 采 用 了 行 内 样 式 行内(嵌入)样式表

              静 夜 思

              作 者 : 李 白

              床 前 明 月 光 ,
              疑 是 地 上 霜 。
              我 是 郭 德 刚 ,
              低 头 思 故 乡 。

              行 内 样 式 使 用 范 围 更 小 , 只 适 用 于 某 一 个 标 签 , 对 其 他 标 签 不 起 作 用 行 内 样 式 使 用 范 围 更 小 , 只 适 用 于 某 一 个 标 签 , 对 其 他 标 签 不 起 作 用 本 段

              标 签 采 用 了 行 内 样 式 本 段

              标 签 采 用 了 行 内 样 式 外部样式表文件 如 果 希 望 一 个 网 站 中 多 个 页 面 的 样 式 保 持 一 致 , 如 何 解 决 ? 使 用 外 部 样 式 表 文 件 样 式 表 可 以 解 决使 用 外 部 样 式 表 文 件 样 式 表 可 以 解 决 外部样式表文件 根据样式文件与网页的关联方式又分为: – 链接(LINK )外部样式表 – 导入(@import)外部样式表 样 式 文 件 .css 网 页 2 网 页 3网 页 1 … … 链接(LINK )外部样式表 使用LINK(链接)标签 : 第 一 步 : 创 建 样 式 表 文 件 newstyle.css第 一 步 : 创 建 样 式 表 文 件 newstyle.css 第 二 步 : 把 样 式 文 件 和 网 页 绑 定第 二 步 : 把 样 式 文 件 和 网 页 绑 定 第 三 步 : 浏 览 查 看 各 网 页第 三 步 : 浏 览 查 看 各 网 页 样 式 文 件 : newstyle.css Link_Outcss1.html Link_Outcss2.html 演 示 示 例 3: 使 用 外 部 样 式 表 1 使 用 外 部 样 式 表 2演 示 示 例 3: 使 用 外 部 样 式 表 1 使 用 外 部 样 式 表 2 引 入 的 样 式 文 件 引 入 的 样 式 文 件 导入(@import)外部样式表 使用@import导入 ,语法: 引 入 样 式 表 文 件引 入 样 式 表 文 件 演 示 示 例 4: 使 用 外 部 样 式 表 1 使 用 外 部 样 式 表 2演 示 示 例 4: 使 用 外 部 样 式 表 1 使 用 外 部 样 式 表 2 总结 方 框 属 性 有 哪 些 常 用 属 性 ? 并 分 别 说 明 其 含 义 ? 超 链 接 样 式 有 哪 几 种 ? 内 嵌 样 式 表 、行 内 样 式 表 、外 部 样 式 表 文 件 分 别 适 用 什 么 场 合 ?

              还剩91页未读

              继续阅读

              下载pdf到电脑,查找使用更方便

              pdf的实际排版效果,会与网站的显示效果略有不同!!

              需要 15 金币 [ 分享pdf获得金币 ] 3 人已下载

              下载pdf

              pdf贡献者

              tswdya

              贡献于2012-06-19

              下载需要 15 金币 [金币充值 ]
              亲,您也可以通过 分享原创pdf 来获得金币奖励!