DIV+CSS入门讲解.ppt

CSS基本语法 空格和大小不写敏感 多数规则包含不止一个声明 多重声明和空格的使用使得样式表更容易被编辑 是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感 不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的 CSS * CSS基本语法 选择器的分组 可以对选择器进行分组 这样被分组的选择器就可以分享相同的声明 用逗号将需要分组的选择器分开 CSS * CSS基本语法 颜色与背景 color background-color background-image background-repeat background-attachment background-position background CSS * CSS基本语法 字体属性 font-family //设置字体系列 font-style //设置字体风格 font-variant //以小型大写字体或者正常字体显示文本 font-weight//设置字体粗细 font-size //设置字符尺寸 font // 简写属性，将有关字体的所有属性设置在一个声明中 CSS * CSS基本语法 文本属性 text-indent //缩进元素中文本首行 text-align //对齐元素中文本 text-decoration //向文本添加修饰 letter-spacing //设置字符间距 text-transform //控制元素中的字母 * CSS基本语法 超链接属性 CSS * CSS盒子模型 * CSS盒状模型 盒状模型 span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用 用span组织元素 span元素可以说是一种中性元素，因为它不对文档本身添加任何东西 但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果 用div组织元素 span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素 * CSS盒状模型 盒状模型 盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子 涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作 * CSS盒状模型 边框属性 border-width border-color border-style * CSS定位 浮动元素（float） 可以通过CSS属性float令元素向左或向右浮动 也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边 * # CSS定位 浮动元素（float） HTML CSS * # CSS定位 元素的绝对定位 绝对定位 position属性的值设为absolute 相对于最近的已定位祖先或body的精确位置 如果在祖先元素上添加“position:relative”，则绝对定位元素相对于它进行偏移 否则，元素相对与body进行偏移 CSS * # CSS定位 元素的相对定位 相对定位 应将position属性的值设为relative 其位置是相对于它在文档中的原始位置计算而来的 CSS * # CSS定位 用z-index进行层次堆叠 * # 冲突解决方案 多个层次的冲突 行内样式表 文档样式表 外部样式表 继承和不同来源的属性值的冲突 属性值可以标记上重要标识 CSS CSS CSS属性优先顺序 来自用户的重要声明 来自作者的重要声明 来自作者的常规声明 来自用户的常规声明 来自浏览器的任何声明 Id选择器 类和伪类选择器 上下文选择器（有派生 无派生） 通配选择器 * # CSS验证 * # CSS禅意花园 W3School 教程 /css/index.asp CSS设计彻底研究 前沿科技, 人民邮电出版社, 2008年2月 精通CSS+DIV网页样式与布局 前沿科技, 人民邮电出版社, 2007年8月 任务：自己选个主题，用 CSS+DIV进行页面布局，搭一个界面。 参考资料及任务 * # 谢 谢 ！ # # # 浅谈CSS CSS简介 CSS是什么？ CSS样式分类 CSS选择器 CSS基本语法 CSS盒子模型 CSS的定位 DIV+CSS实例 * CSS是什么呢？ CSS是Cascading Style Sheets（级联样式表）的缩写。 CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。 HTML可以用于为网站