Downloaded 17 times
![[译]Efficient, maintainable CSS](https://cdn.slidesharecdn.com/ss_thumbnails/efficient-091215042328-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[2008]网站重构 -who am i](https://cdn.slidesharecdn.com/ss_thumbnails/2008-whoami-100913035744-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Css
- 1. WEB 前端 CSS培训（一） 2010-6-18 杨华
- 2. 课程总览 目标？ 培训对象？学什么？
- 3. 课程总览 目标？ 做好浏览器兼容，走标准之路学习之前先看些常见 BUG DEMO 培训对象？ 学什么？
- 4. 课程总览 目标？ 培训对象？前端设计人员 前端 CSS 人员 前端 Javascript 人员 后端人员（了解） 学什么？
- 5. 课程总览 目标？ 培训对象？学什么？ 分 4-5 次课进行授课，以实例分析为主 HTML CSS 基础 布局，常见模型 浏览器兼容 总结， CSS 框架
- 6. 本课介绍 1 .1 HTML 与 XHTML 1 . 2 CSS 概述 1.3 CSS 选择器 1.4 CSS 常见属性 1.5 简写与优化 1.6 总结 小测试 答疑
- 7. 1.1 HTML与 XHTML HTML 超文本标签语言 XHTML 可扩展超文本标签语言 有何区别？
- 8. 1.1 HTML与 XHTML 区别： XHTML 是一个 W3C 标准 XHTML 更严格更纯净
- 9. 1.1 HTML与 XHTML W3C 指万维网联盟 是一个 会员组织 对 web 进行标准化
- 10. 1.1 HTML与 XHTML 最主要的不同： XHTML 元素必须被正确地嵌套 XHTML 元素必须被关闭 标签名必须用小写字母 XHTML 文档必须拥有根元素
- 11. 1.1 HTML与 XHTML 更多的 XHTML 语法规则： 属性名称必须小写 属性值必须加引号 属性不能简写 用 Id 属性代替 name 属性 XHTML DTD 定义了强制使用的 HTML 元素
- 12. 1.1 HTML与 XHTML 简写
- 13. 1.1 HTML与 XHTML <!DOCTYPE> 是强制使用的。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 14. 1 . 2 CSS 概述 CSS 指层叠样式表 ( C ascading S tyle S heets) 作用： 定义 如何显示 HTML 元素 解决内容与表现分离的问题 提高工作效率
- 15. 1 . 2 CSS 概述 表现方式： 外部样式表 内部样式表（位于 <head> 标签内部） 内联样式（在 HTML 元素内部） CSS 优先级问题 DEMO1.2
- 16. 1.3 CSS 选择器CSS 语法由三部分构成： 选择器、属性和值： selector {property: value} 如： body {color: blue}
- 17. 1.3 CSS 选择器1. 标签选择器 以 “ 标签名 ” 来定义。 p {color: red} <p> 这个段落是红色。 </p> <p> 这个段落也是红色。 </p>
- 18. 1.3 CSS 选择器2.id 选择器 以 “ #” 来定义。 #red {color:red;} <p id="red"> 这个段落是红色。 </p>
- 19. 1.3 CSS 选择器3. 类选择器 以 “ .” 来定义。 .red {color: red} <p class="red"> 这个段落是红色。 </p> <p class="red"> 这个段落也是红色。 </p>
- 20. 1.3 CSS 选择器4. 群组选择器 元素之间用逗号分隔 p, td, li { line-height:20px; color:#c00; }
- 21. 1.3 CSS 选择器5. 派生选择器 给一个元素里的子元素定义样式 li strong { font-weight:bold; color:red } <li> <strong> 我是子元素 </strong> </li>
- 22. 1.3 CSS 选择器6 伪类 selector:pseudo-class{property:value} a:link {color: #FF0000} /* 未访问 */ a:visited {color: #00FF00} /* 已访问 */ a:hover {color: #FF00FF} /* 鼠标移动到上 */ a:active {color: #0000FF} /* 点击时的链接 */ :first-letter :first-line DEMO1.3
- 23. 1.3 CSS 选择器6 继承 根据 CSS ，子元素从父元素继承属性。 关于 CSS RESET 和优先级
- 24. 1.4 CSS 常见属性1 基本属性 基本属性可以对照参考手册
- 25. 1.4 CSS 常见属性2 文字类 font-style: italic; font-weight: bold; font-size: 12px; line-height: 150%; color: red; font-family : “Lucida Grande”, Verdana, 宋体 ,sans-serif;
- 26. 1.4 CSS 常见属性2 文字类 缩进文本 p {text-indent: 24px;} 强制不换行： white-space:nowrap; 自动换行： word-wrap: break-word; 强制英文单词断行： word-break:break-all; 字符转换 text-transform none uppercase lowercase capitalize DEMO1.4.2
- 27. 1.4 CSS 常见属性3 背景 body {background-color: gray;} body {background-image : url(xxx.gif);} 注：背景属性都不能继承
- 28. 1.4 CSS 常见属性3 背景 图片背景相关属性 body { background-image:url(xxx.gif); background-repeat:no-repeat; background-position:50px 100px; background-attachment:fixed; } background-position: center top bottom right left Px % DEMO1.4.3
- 29. 1.4 CSS 常见属性3 背景 body {background-color: gray;} body {background-image : url(xxx.gif);} css sprites ：图片合并技术 DEMO1.4.3 注：背景属性都不能继承
- 30. 1.4 CSS 常见属性3 背景 css sprites ： 图片合并技术
- 31. 1.4 CSS 常见属性4 框模型 W3C 盒子模型 padding margin border width 通过 DEMO 做初步了解，后续课程做详细分析 DEMO1.4.4
- 32. 1.4 CSS 常见属性5 CSS 定位 块级元素 (block) 行内元素 (inline) CSS 定位机制 普通流、浮动和绝对定位。
- 33. 1.4 CSS 常见属性5 CSS 定位 position ： static 静态 无偏移 relative 相对 可设置偏移 absolute 绝对 fixed 固定 DEMO1.4.5
- 34. 1.4 CSS 常见属性5 CSS 定位 浮动 float 文本环绕 布局 DEMO1.4.5
- 35. 1.5 简写与优化border:1px solid #000; margin:1px 2px 3px 4px; margin :1px 2px; == margin :1px 2px 1px 2px; margin :1px 2px 3px == margin :1px 2px 3px 2px; background:#f00 url(background.gif) no-repeat fixed 0 0; list-style:square inside url(image.gif);
- 36. 1.5 简写与优化font:italic small-caps bold 12px/140% "Lucida Grande",sans-serif;
- 37. 1.6 总结小测试 答疑 总结： 学到哪些？ 注意哪些？
- 38. 1.6 总结小测试 答疑 测试： 主要测试对 W3C 标准的理解 对常见样式的熟悉程度 答疑