Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

【第一季第五期】要漂亮很容易!——超简单CSS速成教程

2.088 visualizaciones

Publicado el

【第一季第五期】要漂亮很容易!——超简单CSS速成教程

Publicado en: Educación
  • Inicia sesión para ver los comentarios

【第一季第五期】要漂亮很容易!——超简单CSS速成教程

  1. 1. 要漂亮很容易! 超简单CSS速成教程 #沉鱼{ department: UED; post: fed; blog: “http://fool2fish.cn”; }
  2. 2. 1990~1993年,HTML <font size=“+3” color=“red”>text</font> 1995年,CSS草案 1996年,CSS1 1998年5月,CSS2 2001年5月,CSS3草案 1 CSS简史
  3. 3. 2 CSS是什么 表现力丰富的 描述的 Cascading style sheet 易于使用的 可复用的 层叠的
  4. 4. h1 { color : #444 ; font-size : 18px ; font-family : ”微软雅黑”; } 选择器 语句块 属性声明
  5. 5. 选择器位于CSS语句块的左侧,用于定义语 句块将影响到的DOM节点 选择器的类型 选择器的组合 选择器的层叠 选择器的优先级 3 选择器
  6. 6. 普通选择器:#id , .class , tag 伪类: a:link, a:visited{} a:hover, a:active{} 属性选择器: input [ type = “radio” ] 高级伪类: .box : first-child {} 3.1 选择器的类型
  7. 7. div.box a.hot-news:hover, a.hot-news:active{} .box.latest-news input#user-name 3.2 选择器的组合
  8. 8. 请确保页面内id唯一 !
  9. 9. body .hd h3.title{…} .box .hd h3{…} .box .title{…} .box .hd .title{…} h3{color:#f60} 3.3 选择器的层叠 <div class=“box”> <div class=“hd”> <h3 class=“title”> Title </h3> </div> </div>
  10. 10. [ 0 , 0 , 0 , 0 ] 3.4 选择器的优先级 #id tag .class , 伪类,属性选择器 层叠选择器中,每个单选择器都可以在对应的位上+1 优先级比较由左至右进行
  11. 11. 简单来说: #id > .class > tag 层叠层级多的优先级高 同样的选择器,位于后面的优先级高 3.4 选择器的优先级
  12. 12. 常用CSS属性 CSS属性的简写 CSS属性的继承 4 CSS属性
  13. 13. display position , left , right , top , bottom , z-index float , width , height , overflow margin , padding font , line-height , color border , background 4.1 常用CSS属性
  14. 14. margin-left:10px ; margin-right:10px margin: 0 10px; border-color:#ccc ; border-style:solid border:1px solid #ccc; background-color:#f2f2f2 ; background-image: url() background:#f2f2f2 url() no-repeat 0 0; 4.2 CSS属性的简写
  15. 15. 父节点中定义的某些属性,将遗传给子节 点,除非子节点本身有定义该属性(包括 浏览器定义的默认样式)。 这些可被继承的属性定义几乎都是文本相 关,比如:color, font之类。 4.3 CSS属性的继承
  16. 16. Id和class的命名 模块化 属性声明顺序 其他事项 5 推荐书写习惯
  17. 17. 用于CSS的id和class 首字母小写,中划线链接,例:latest-news 用于js的id和class S_前缀,首字母大写,驼峰,例:S_LatestNews CSS尽量不占用id 5.1 id和class的命名
  18. 18. .news{} .news .hd{} .news .title{} … 5.2 模块化 <div class=“box news”> <div class=“hd”> <h3 class=“title”> Title </h3> </div> </div>
  19. 19. display position , left , right , top , bottom , z-index float , width , height , overflow margin , padding font , line-height , color border , background 5.3 属性声明顺序
  20. 20. 不使用通配符* 不定义全局样式,如直接给tag指定样式 注意继承的影响 使用.class来选择要定义样式的DOM节点 5.4 其他事项
  21. 21. 浏览器默认样式 浏览器兼容性 慎用hack 6 浏览器相关
  22. 22. 每个浏览器会根据自己对HTML标签的理 解,默认给某些标签设置CSS样式 通常我们并不需要使用这些默认样式,所 以会引入重置样式,将所有的与设定样式 换成我们需要的 6.1 浏览器默认样式
  23. 23. 浏览器面世的时候,支持的CSS版本不同 浏览器开发商对同一个属性值的理解不同 6.2 浏览器兼容性 淘宝前台页面兼容:ie6+,firefox,chrome 如果是后台页面,可酌情考虑不支持ie6
  24. 24. .box{ width:100px; /* for all */ *width:120px; /* for ie7 */ _width:140px; /* for ie6 */ } 尽量遵循标准书写CSS,避免无谓的hack 6.3 慎用hack
  25. 25. IE8 – F12 Firefox – F12 (需安装Firebug插件) Chrome – Ctrl+Shift+I ietester 7 调试工具
  26. 26. CSS速查手册 http://www.52css.com/css/ 淘宝网后台页面模块范例 http://fed.ued.taobao.net/2010/shine/components/index.html 淘宝网后台页面模块API http://fed.ued.taobao.net/2010/shine/docs/api/index.html CSS权威指南 8 参考资料

×