第1章-CSS样式设计基础-CSS+DIV网页样式与布局从入门到精通课件.ppt

《第1章-CSS样式设计基础-CSS+DIV网页样式与布局从入门到精通课件.ppt》由会员分享，可在线阅读，更多相关《第1章-CSS样式设计基础-CSS+DIV网页样式与布局从入门到精通课件.ppt（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1 章 CSS 样式设计基础学习要点 设计良好的HTML 结构。恰当选用HTML 标签。了解CSS 基本语法和用法。熟练使用CSS 选择器。理解CSS 基本特性。了解CSS 属性和属性值。1.1 设计良好的网页结构1.1.1 选用符合语义的标签有语义的标签提供了将元素设计为所需样式的简单方法。它在文档中添加了结构，并且创建一个底层框架。可以直接设置元素的样式，而不需要添加其它标识符，因此避免了冗余代码。HTML 包含丰富的语义元素：h1、h2、h3 等标题标签。ul、ol 和dl 列表结构标签。strong 和em 等强调语义标签。blockquote 和cite 引用标签。abbr、acr

2、onym 和code 代码标识标签。field、input、textarea、select、fieldset、legend 和label 表单结构标签。table、tr、td、caption、thead、tbody 和tfoot 等表格结构标签。1.2 初识CSS 1.2.1 为什么学习CSS 避免使用不必要的标签和属性 更有效的控制页面结构、页面布局 提高开发和维护效率1.2.2 CSS 基本语法1.3 CSS 选择器1.3.1 CSS 选择器概述选择器 CSS 版本 IE 兼容性 语法 说明标签选择器（Type Selectors）CSS1 IE4+e1 以文档对象类型的元素作为选择器，如

3、p、div、span 等。ID 选择器（ID Selectors）CSS1 IE4+#id以 作 为 元 素 对 象 的 唯 一 标 识 符id 属 性 作 为 选 择 器，例 如 在 结 构 中，#first 选 择 器 可 以 定义第一个p 元素的样式，但不会影响最后一个p 元素对象。类选择器（Class Selectors）CSS1 IE4+.classname以 作 为 元 素 对 象 分 类 的 class 属 性 作 为 选 择 器，例 如 在 结 构 中，.red 选 择 器 可 以 定 义 第 一 个p 元 素 和span 元 素 的 样 式，但 不 会 影 响 最 后一个p

4、元素对象。子选择器（Child Selectors）CSS2 IE7 e1 e2选 择 所 有 作 为 e1 子 对 象 的 e2 元 素 元 素 对 象，例 如 在 结 构 中，divp 子 选 择 器 可 以 定 义p元素的样式，但不能使用divspan 子选择器。相邻选择器（Adjacent Sibling Selectors）CSS2 IE7 e1+e2选 择 紧 跟 在 元 素 对 象 e1 之 后 的 所 有 e2 元 素 对 象，例 如 在 结 构 中，div+p 相 邻 选 择 器可以定义最后一个p 元素的样式，但不会影响其内部的p 元素对象。属性选择器（Attribute S

5、electors）CSS2 IE7 e1attr选 择 具 有 attr 属 性 的 e1 对 象，例 如 在 结 构 中，pid 属 性 选 择 器 可 以 定 义 第 一 个p 元素的样式，但不会影响最后一个p 元素对象。包含选择器（Descendant Selectors）CSS1 IE4+e1 e2选 择 所 有 被 e1 包 含 的 e2 元 素 对 象，例 如 在 结 构 中，div span 包 含 选 择 器 可 以定义span 元素的样式。分组选择器（Grouping）CSS1 IE4+e1,e2,e3将 定 义 了 具 有 相 同 样 式 的 多 个 选 择 器 合 并 为

6、 一 个 样 式，并 以 逗 号 分 隔的 方 式 表 示，例 如 在 结 构中，如 果 定 义div 和p 元 素 对 象 宽 度 都 为774px，则 可 以 合 并 为 一 组div,pwidth:774px;。通用选择器（Universal Selector）CSS2 IE4+*确 定 文 档 中 的 所 有 类 型 元 素 作 为 选 择 器，表 示 该 样 式 适 用 所 有 网 页 元素的意思。1.3.3 ID 选择器1.3.5 伪类和伪对象选择器1.3.6 子选择器1.3.8 属性选择器1.3.9 通用选择器*padding:0;margin:0;1.3.10 包含选择器1.3

7、.11 分组选择器h1,h2,h3,h4,h5,h6,p/*定义所有级别的标题和段落行高都为字体大小的1.6 倍*/line-height:1.6em;1.3.11 分组选择器h1,h2,h3,h4,h5,h6,p/*定义所有级别的标题和段落行高都为字体大小的1.6 倍*/line-height:1.6em;1.4 CSS 基本特性1.4.1 层叠和特殊性层叠采用以下重要度次序：1.标为!important 的用户样式。2.标为!important 的作者样式。3.作者样式。4.用户样式。5.浏览器/用户代理应用的样式。1.4.1 层叠和特殊性1.特殊性根据CSS 规则，一个简单的选择器，如h

8、2，具有特殊性1，类选择器具有特殊性10，ID 选择器具有特殊性100。如果一个选择器是由多个选择器组合而成，则它的特殊性就为这些选择器的分配值之和。2.在样式表中使用特殊性3.在主体标签上添加类或ID1.5 样式表规划、组织和维护1.5.1 对文档应用样式1.内联样式2.内部样式3.外部样式1.5.2 对代码进行注释1.添加结构性注释2.自我提示3.模块注释4.删除注释和优化样式表1.5.3 样式文档样式文档是帮助多人维护或实现网站的好方法。通过制定一些简单的原则，可以促使网站的开发以可控制的方式进行，同时防止样式随着时间的推移变得散乱。1.5.4 组织样式表以便简化维护对于简单的网站，可以

9、只使用一个CSS 文件。对于大型的复杂网站，对样式表进行分割以便简化维护是一种好做法。如何分割样式表是需要仔细考虑的。一般用一个CSS 文件处理基本布局，用另一个文件处理版式和设计修饰。这样的话，在布局确定之后，就很少需要修改布局样式表。这可以防止布局样式表被意外地改动或破坏。1.6 CSS 属性和属性值1.6.1 CSS 属性分类 说明 属性数目 使用评价字体定 义 字 体 属 性，包 括 字 体 基 本 属 性、行 距、字 距 和 文 字 修 饰、大 小 写 等属性16排版使用，美化文本比较有用文本 定义段落属性，如缩进、文本对齐、书写方式、换行、省略等25排 版 使 用，部 分 属 性

10、比 较 实 用，有 些 比 较专业生僻，浏览器支持不是太好背景 设置对象的背景，如背景色、背景图像及其显示位置10修饰使用，比较常用定位 布局网页，包括定位方式、定位坐标6布局使用，比较常用尺寸 设置对象的大小，包括宽、高、最大宽高、最小宽高6布 局 使 用，比 较 常 用，IE6 及 更 低 版 本 对 最小或最大宽和高支持不好布局 布局网页，包括清除、浮动、裁切、显示方式、是否可见、伸缩滚动8布局使用，比较常用，技巧比较大外边距 设置对象的外边距（边框外的空隙），包括全部和四个方向外边距设置5布局使用，比较常用 轮廓 设置对象的轮廓，包括轮廓的样式、颜色和宽4修饰使用，如同外阴影，浏览器支

11、持不好边框 设置对象的边框，包括边线样式、颜色、宽度20布局或修饰使用，比较常用内容 设置对象的内容，包括插入内容、元素，自动化等4不好用，支持也不好内边距设 置 对 象 的 内 边 距（内 容 与 边 框 之 间 的 距 离），包 括 全 部 和 四 个 方 向 外边距设置5布局使用，比较常用列表 设置列表项，包括列表样式、图像样式、显示位置等5布局使用，比较常用表格设 置 表 格，包 括 单 元 格 边 的 显 示 方 式、空 隙，标 题、是 否 隐 藏 空 单 元 格、表格解析方式等6 个别属性有用，IE 支持不够好滚动条 设置滚动条，包括滚动条的不同区域颜色8 修饰使用，IE 支持，其

12、它浏览器不支持打印 设置打印，包括打印页面、页眉、页脚、打印尺寸、元素等7打印使用，浏览器支持不好声音 设置声音，主要为特殊设置显示使用，方便残疾人浏览网页18特殊显示使用，浏览器支持不好其它 一些特殊设置，包括鼠标样式、行为、特效、对象缩放4特效使用，浏览器支持不错 1.6.1 CSS 属性简写代码量，提高代码可读性:颜色的缩写 单位值的省略 内外边距的简写 边框的简写 背景的简写 字体的简写 列表的简写1.6.2 CSS 单位1.绝对单位2.相对单位3.百分比4.URL1.6.2 设置颜色1.使用百分比。这是一种最常用的方法，如：color:rgb(100%,100%,100%);2.使用数值。数字范围从0 到255，如：color:rgb(255,255,255);3.十六进制颜色。这是最常用的取色方法，如：color:#ffffff;4.使用颜色名是最简单的方法EndThank you