Html二期培训-CSS样式表.ppt

CSS 定位 CSS 浮动 如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”： CSS 定位 CSS 浮动 这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：bodth; 课后习题 做一个整体的网站：包括首页，二级页面。（链接，图片，留言）  /index.html  2011年6月15号 概述 CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。 概述 使用CSS布局的优点：1：表现和内容相分离（搜索引擎）2：提高页面浏览速度3：易于维护和改版4: 使用CSS布局更符合现在的W3C标准. 概述 如何将样式表加入到网页 1：内联样式 （直接写入）2：外部样式表 3：内部样式表 优先级：123 目录 CSS 基础语法 1 CSS 样式 2 CSS 框模型 3 CSS 定位 4 CSS 基础语法 CSS的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。  选择符语法: selector {property: value;} (选择符 {属性:值}) 例子:body {color: black;} CSS 基础语法 选择符组 (减少了体积)h1, h2, h3, h4, h5, h6 { color: green;}类选择符（class）用类选择符你能够把相同的元素分类定义不同的样式 .center {text-align: center}这样的类可以被应用到任何元素上 例子：ID选择符 #center {text-align: center} CSS 基础语法 选择符组 (减少了体积)h1, h2, h3, h4, h5, h6 { color: green;}类选择符（class）用类选择符你能够把相同的元素分类定义不同的样式 .center {text-align: center}这样的类可以被应用到任何元素上 例子：ID选择符 #center {text-align: center} CSS 基础语法 注意:ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 注释:/* ... */  P{ color:red; font-size:9pt;}/*红色字体，9号字*/ 返回目录 Css样式 CSS 背景（background）  CSS 文本（text） CSS 字体 (font-family) CSS 列表 (ol, ul, li) CSS 表格 (table, th, td ) Css样式 CSS 背景（background） Css样式 CSS 文本（text） Css样式 CSS 字体 (font-family) Css样式 CSS 列表 (ol, ul, li) Css样式 CSS 表格 (table, th, td ) 返回目录 CSS 框模型 CSS 框模型概述  CSS 内边距 (padding) CSS 边框 (border) CSS 外边距 (margin) CSS 框模型 CSS 框模型概述 CSS 框模型 CSS 内边距 (padding) CSS 框模型 CSS 边框 (border) CSS 框模型 CSS 外边距 (margin) 返回目录 CSS 定位 CSS 定位概述  CSS 相对定位  CSS 绝对定位  CSS 浮动  CSS 定位 CSS 定位概述 CSS 定位 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进