Html+CSS从入门到精通

淘 宝 网 首 届 翠 友 会 ！
……

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

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

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

– 无序列表
预格式文本

标签  水 平 分 隔 线  
  水 平 分 隔 线  
  有 序 列 表有 序 列 表  无 序 列 表无 序 列 表  用 了 预 先 定  义 好 的 格 式  用 了 预 先 定  义 好 的 格 式  内容分隔标签
  
  ……    
  
  
    ……  线 的 厚 度 值线 的 厚 度 值 线 的 宽 度线 的 宽 度  
 标 签 用 于 在 页 面 上 绘 制 水 平 线
 标 签 用 于 在 页 面 上 绘 制 水 平 线  线 的 颜 色线 的 颜 色  文字列表和编号标签
、
标签  
注 册 步 骤 ： 
  
  
填 写 信 息 
  
收 电 子 邮 件 
  
注 册 成 功 
  
  新 人 上 路 指 南  
  
如 何 激 活 会 员 名 ？ 
  
如 何 注 册 淘 宝 会 员 ？ 
  
注 册 时 密 码 设 置 有 什 么 要 求 ？ 
  
支 付 宝 认 证 
  
  无序列表语法  
  
列表项内容 
  ……  
  有序列表语法  
  
列表项内容 
  ……  
  预格式文本
标签  
  腾讯-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个 部 分 ,可 选  第 一 个 窗 口 要  显 示 的 网 页  第 一 个 窗 口 要  显 示 的 网 页  框架的基本结构                      将 窗 口 分 割 成  上 中 下 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 来获得金币奖励！

                    

                
                

                         下载pdf
                

                

                    

                        
 关键词
                    
                        

                                前端技术
                                CSS
                        
                


  


                

                    

                        
相关pdf
                    
                    

                            

                                  Html+CSS从入门到精通
                            
                            

                                  HTML 从入门到精通 第1章 HTML 入门
                            
                            

                                  html、css、javascript网页制作从入门到精通
                            
                            

                                  Html 样式表(Css) Javascript Web从入门到精通
                            
                            

                                  jQuery 从入门到精通
                            
                            

                                  SQL从入门到精通
                            
                            

                                  HTML5从入门到精通
                            
                            

                                  Qt从入门到精通
                            
                            

                                  COBOL 从入门到精通
                            
                            

                                  WF 从入门到精通