Css基础

801 views
721 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
801
On SlideShare
0
From Embeds
0
Number of Embeds
101
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Css基础

  1. 1. IndiOffice4.6技能培训 ——CSS基础 2011-02-14 | sanmaozhao.com
  2. 2. > 你是否使用过CSS?> 你对CSS的理解?sanmaozhao.com
  3. 3. 什么是CSS?> Cascading Style Sheets/层叠样式表> 用于为结构化文档(HTML/XML)添加样式> 最新版本为CSS2.1/CSS3正开发中sanmaozhao.com
  4. 4. 用CSS能做些什么?> 修改字体> 设置颜色、背景> 复杂布局> 用户交互 http://knb.im/css3/ (当然画图不是CSS的主要功能)sanmaozhao.com
  5. 5. 为什么要学CSS?> 旧的前端开发模式已经过时 > Web 1.0:HTML/CSS混乱嵌套、表格布局 > Web 2.0:内容/表现分离、CSS布局> 4.6版引入新的前端开发模式 > 定制开发需要掌握CSS技能> 后续版本引入xPages开发,CSS更加重要sanmaozhao.com
  6. 6. CSS好学么?> CSS有些晦涩/抽象> 不过还好可以参考的资料很多> 本课程也会帮助大家快速入门> 深入/系统的内容还需要大家多下功夫sanmaozhao.com
  7. 7. 议程> 背景知识> CSS基础概念> 基本CSS视觉模型> 颜色和背景> 文本属性> 浮动和定位> 其他知识/技巧sanmaozhao.com
  8. 8. 议程> 背景知识> CSS基础概念> 基本CSS视觉模型> 颜色和背景> 文本属性> 浮动和定位> 其他知识/技巧sanmaozhao.com
  9. 9. 4.6版新的前端开发模式> Web标准的遵从 > 便于支持多浏览器 > 利用先进的技术(CSS3圆角、阴影等)> 内容与表现的分离 > 优化代码结构 > 明确前后台分工 > 利于重构 > 为换肤功能打好基础sanmaozhao.com
  10. 10. Demo: 快速切换布局sanmaozhao.com
  11. 11. Web页的三层结构> 以内容为中心> 通过CSS改变展现效果 Javascript 行为> 使用JS添加用户交互 CSS 展现 HTML 内容(结构+数据)sanmaozhao.com
  12. 12. 内容、展现、行为分离> 语义化的HTML > 不使用展现类的标签:font、center等> 外联CSS/JS文件,不在HTML中内嵌> 利于前后台的分工> 利于页面的重构sanmaozhao.com
  13. 13. 渐进增强 通过CSS增加展现效果 HTML描述内容 通过JS增加交互、滑动条控件sanmaozhao.com
  14. 14. 浏览器模式> 所有浏览器都有两类模式 > 怪癖模式(Quirks Mode) > 为了兼容老旧的网页,去模拟早期浏览器(如 IE5.5)的非 标准实现 > 标准模式(Standards Mode) > 尽可能的按照标准去执行> 通过 DOCTYPE 控制> 4.6新增页面均使用标准模式sanmaozhao.com
  15. 15. Demo: 怪异模式和标准模式sanmaozhao.com
  16. 16. 议程> 背景知识> CSS基础概念> 基本CSS视觉模型> 颜色和背景> 文本属性> 浮动和定位> 其他知识/技巧sanmaozhao.com
  17. 17. 将CSS引入HTML> 不要使用行内样式 <p style="color: red">> 不要使用内嵌样式 <style type="text/css"> p { color: red; } </style>> 推荐使用外联样式 <head> <link rel="stylesheet" href="name.css" type="text/css"/> </head>sanmaozhao.com
  18. 18. CSS代码结构> 选择器 决定样式所应用到的元素> 属性 决定修改何种样式> 值 将属性修改为何值选择器 声明块 声明 声明 H1 { color: red; background: yellow; } 属性 值 属性 值sanmaozhao.com
  19. 19. 基础CSS选择器> 元素选择器 h1 {color: red;}> 通配选择器 * {color: red;}> 类选择器 .warning {color: red;}> ID选择器 #main-nav {color: red;}sanmaozhao.com
  20. 20. 属性选择器> 简单属性选择 img[alt]> 精确匹配 input[type="text"]> 列表值匹配 img[title~="Figure"]> 子串匹配 > 以某值开头 a[href^="http://"] > 以某值结尾 span[class$="cloud"] > 包含某值 a[href*="smartdot.com"]sanmaozhao.com
  21. 21. 通过文档结构选择> 后代选择器 h1 em> 子元素 h1>em> 相邻兄弟 h1+psanmaozhao.com
  22. 22. 伪类选择器> 超链接 :link> 访问过的超链接 :visited> 拥有焦点的元素 :focus> 鼠标指针停留的元素 :hover> 被用户激活的元素 :active> 作为父元素 第一个子元素的元素 :first-childsanmaozhao.com
  23. 23. 组合多种选择器> p.warning> a[href][title]> .content .warning> .warning.urgent> .content li:first-child> ul ol emsanmaozhao.com
  24. 24. 选择器分组> 通过逗号将选择器分组 h1 {color: black;} h2 {color: gray;} h1, h3 {color: black;} h3 {color: black;} h2, h4 {color: gray;} h4 {color: gray;}sanmaozhao.com
  25. 25. Demo: CSS选择器sanmaozhao.com
  26. 26. 哪个规则生效?HTML> <h1 class=“warning”>警告文本</h1>CSS:> h1 {color: gray;}> body h1 {color: green;}> h1.warning {color: red;}sanmaozhao.com
  27. 27. 特殊性> 特殊性的大小决定哪个规则生效> 特殊性由选择器的组件决定> 特殊性有四个级别 1. 行内样式 2. ID选择器 3. 类/伪类/属性选择器 4. 元素/伪元素选择器> 特殊性相同时,后声明的生效sanmaozhao.com
  28. 28. 特殊性:样例 选择器 特殊性Style=“” 1, 0, 0, 0#wrapped #content {} 0, 2, 0, 0#content .date {} 0, 1, 1, 0div#content {} 0, 1, 0, 1#content {} 0, 1, 0, 0p.comment .date {} 0, 0, 2, 1p.comment {} 0, 0, 1, 1div p {} 0, 0, 0, 2p {} 0, 0, 0, 1sanmaozhao.com
  29. 29. 继承> 后代元素可以继承祖先元素的样式> 有些属性可以继承,有些则不可以 > 继承的:颜色/字体/列表样式… > 不继承:布局属性/边框/背景… 如果边框也能继承…sanmaozhao.com
  30. 30. 特殊性与继承(Firebug查看li元素)sanmaozhao.com
  31. 31. 开发工具> IE8开发工具 > 寻找样式来源 > 分析元素布局 > 临时测试样式 > 禁用缓存 > 调节窗口大小> Firebugsanmaozhao.com
  32. 32. Demo: 开发工具sanmaozhao.com
  33. 33. 颜色> 命名颜色 red> 十六进制RGB #FF0000> 简写十六进制 #F00> 函数式RGB rgb(255,0,0) rgb(100%,0%,0%)sanmaozhao.com
  34. 34. 长度单位> 相对长度单位 > px(像素) > em(等同于font-size的大小) > ex(小写 x 的高度,部分浏览器处理为em/2)> 绝对长度单位 > in(英寸) > cm(厘米) > pt (点,72pt = 1in ) > …sanmaozhao.com
  35. 35. 实践: CSS基本概念sanmaozhao.com
  36. 36. 议程> 背景知识> CSS基础概念> 基本CSS视觉模型> 颜色和背景> 文本属性> 浮动和定位> 其他知识/技巧sanmaozhao.com
  37. 37. 元素的分类> 块级元素 > 元素的前后生成换行 > 盒模型为矩形 > 可以包含块级元素和行内元素 > p, h1-h6, div, ul, li> 行内元素 > 元素的前后没有换行/多个行内元素可位于一行 > 只能包含行内元素 > strong, span, asanmaozhao.com
  38. 38. 正常流下的行内/块元素sanmaozhao.com
  39. 39. 块级元素盒模型 外边距(margin): top right bottom left; 边框(border) 内边距(padding) 宽(width) 内容区 高(height)sanmaozhao.com
  40. 40. 块级元素盒模型 外边距(margin): top right bottom left; 边框(border) 内边距(padding) 宽(width) 背景区(background) 内容区 高(height)sanmaozhao.com
  41. 41. 块级元素格式化> display属性的值为block> 通过width/height指定宽高> 只有外边距/宽/高可以为自动值> 只有外边距可以为负值> 内边距默认值为0> 边框默认值为无sanmaozhao.com
  42. 42. 块级元素格式化 auto 负 auto auto 负左外边距+左边框+左内边距+内容区宽度+右内边距+右边框+右外边距=包含块宽度 包含块 border padding 自动外边距 width Content Area height负外边距 border padding width Content Area 自动宽度 height border padding width Content Area height 固定宽度 sanmaozhao.com
  43. 43. 行内元素格式化> display属性的值为inline> 不能通过width/height指定宽高> 宽高由内容决定> 不能设置垂直外边距> 通过line-height调节行间距> 通过vertical-align调整垂直对齐sanmaozhao.com
  44. 44. 行内格式化 行间距=行高-字体大小 行间距/2 内容区 字体大小 行高 基线 (font-size) (line-height) 行间距/2 行内框 包含块 行框 基线sanmaozhao.com
  45. 45. 实践: CSS视觉模型sanmaozhao.com
  46. 46. 议程> 背景知识> CSS基础概念> 基本CSS视觉模型> 颜色和背景> 文本属性> 浮动和定位> 其他知识/技巧sanmaozhao.com
  47. 47. 颜色> 前景色 > 通过color属性设置 > 影响边框属性(border-color未设置时) > 影响表单元素(按钮/复选框等)> 背景色 > 通过background-color设置 select {color: rgb(33%,33%,33%);}sanmaozhao.com input {color: gray;}
  48. 48. 背景图像> 指定图像地址 background-image > url(bg23.gif)> 关联 background-attachment > scroll 随元素滚动(默认值) > fixed 相对于浏览器视窗固定sanmaozhao.com
  49. 49. 背景图像> 重复 background-repeat > repeat 水平垂直都平铺(默认值) > repeat-x 水平平铺 > repeat-y 垂直平铺 > no-repeat 不平铺,仅显示一次 repeat-y repeat-xsanmaozhao.com
  50. 50. 背景图像> 定位 background-position > 相对于内边距边界 > 0% 0% 左上角(默认值) > center 水平垂直皆居中 > right top 右上角 > 33% 66% 水平方向1/3,垂直方向2/3处 > 20px 20px 从左上角向右/向下各偏移20像素 > -30px 50% 水平从左边界向左30像素/垂直居中sanmaozhao.com
  51. 51. 背景图像定位样例sanmaozhao.com
  52. 52. 背景属性简写> 所有背景属性可以汇总到background属性background: white url(bg.gif) top left repeat-y fixed;background: white url(bg.gif);sanmaozhao.com
  53. 53. 议程> 背景知识> CSS基础概念> 基本CSS视觉模型> 颜色和背景> 文本属性> 浮动和定位> 其他知识/技巧sanmaozhao.com
  54. 54. 字体> 系列 font-family > tahoma,arial,宋体> 大小 font-size > 9pt 9点(绝对长度) > 12px 12像素(相对长度)> 加粗 font-weight > normal 不加粗(默认值) > bold 加粗sanmaozhao.com
  55. 55. 字体> 风格变形 font-style > normal 非斜体(默认值) > italic 斜体> 行高 line-height > 1.5 行高为字体大小的1.5倍> 所有字体属性可以简写到font属性 font: italic bold 12px/1.5 tahoma,arial,宋体; font: 12px tahoma,arial,宋体;sanmaozhao.com
  56. 56. 文本属性> 缩进 text-indent> 垂直对齐 vertical-alignsanmaozhao.com
  57. 57. 文本属性> 水平对齐 text-alignsanmaozhao.com
  58. 58. 文本属性> 文本装饰 text-decorationsanmaozhao.com
  59. 59. 文本属性> 空白处理 white-space<p>This paragraph has a great many s p a c e s within its textual content, but their collapse will not prevent line wrapping or<br>line breaking.</p> 源代码 white-space: normal; white-space: pre; white-space: nowrap;sanmaozhao.com
  60. 60. 实践: 颜色、背景和文本样式sanmaozhao.com
  61. 61. 议程> 背景知识> CSS基础概念> 基本CSS视觉模型> 颜色和背景> 文本属性> 浮动和定位> 其他知识/技巧sanmaozhao.com
  62. 62. 浮动(float)> 浮动元素会从文档流中抽离> 其他内容会环绕浮动元素> 浮动块级元素会自动缩小/不占满包含块宽度> 要使内容不环绕浮动元素,需要进行清除sanmaozhao.com
  63. 63. 浮动:样例sanmaozhao.com
  64. 64. 浮动:样例sanmaozhao.com
  65. 65. 浮动:样例sanmaozhao.com
  66. 66. 浮动的应用:内容环绕sanmaozhao.com
  67. 67. 浮动的应用:分栏布局sanmaozhao.com
  68. 68. 浮动的清除sanmaozhao.com
  69. 69. 定位(position)> 正常定位(static)> 相对定位(relative)> 绝对定位(absolute)> 固定定位(fixed)sanmaozhao.com
  70. 70. 相对定位> 将元素框偏移指定的距离> 元素保持未定位时的形状> 元素原本所占的空间保留sanmaozhao.com
  71. 71. 相对定位 position: relative; left: -5px; top: - 10px;sanmaozhao.com
  72. 72. 绝对定位> 元素框从文档流删除> 相对于其包含块定位 > 包含块是最近的、position值不等于static的祖先元 素 > 如果没有符合条件的祖先元素,则为浏览器窗口sanmaozhao.com
  73. 73. 绝对定位 Position: absolute; left: 0; top: 0;sanmaozhao.com
  74. 74. 固定定位> 类似于决定定位> 但其包含块是浏览器窗口sanmaozhao.com
  75. 75. 固定定位 block1 block2 position:fixed; right:0; top:0; block3 block4sanmaozhao.com
  76. 76. 实践: 浮动和定位sanmaozhao.com
  77. 77. 议程> 背景知识> CSS基础概念> 基本CSS视觉模型> 颜色和背景> 文本属性> 浮动和定位> 其他知识/技巧sanmaozhao.com
  78. 78. CSS Hack> 针对特殊浏览器或版本> 优先考虑IE的条件注释> 会影响代码可维护性> 请谨慎使用 .warning{ padding:10px; padding:9px9; /*all ie */ padding:8px0; /* ie8-9 */ *padding:5px; /* ie6-7 */ +padding:7px; /* ie7 */ _padding:6px; /* ie6 */ } 完整列表请参考http://sofish.de/1331sanmaozhao.com
  79. 79. CSS规范> CSS样式指南sanmaozhao.com
  80. 80. 4.6框架解析 sitemenu.css menu.css viewStyle.css xtree.css subtree.csssanmaozhao.com
  81. 81. 参考资料> 常用浏览器兼容技巧总结> 跨浏览器兼容性问题列表> W3Schools References> SitePoint Reference> QuicksMode Compatibility Master Table> CSS Compatibility & Internet Explorer> The Official Dojo Documentation> IE7 Bug Tablesanmaozhao.com
  82. 82. 推荐书籍精通CSS:高级Web标准解决方案(第2版) CSS权威指南(第三版)sanmaozhao.com
  83. 83. 引用文献> http://www.slideshare.net/lifesinger/progres sive-enhancement-6355326> http://css-tricks.com/all-about-floats/> http://www.slideshare.net/iamtin/css- essential-presentation> http://sofish.de/1331sanmaozhao.com
  84. 84. 实践: 综合实践sanmaozhao.com
  85. 85. > 演讲完毕,谢谢!sanmaozhao.com

×