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

1,957 views

Published on

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

Published in: Education
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total views
1,957
On SlideShare
0
From Embeds
0
Number of Embeds
103
Actions
Shares
0
Downloads
39
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide
  • 学员调查:
    1、对html和css有着最基础的了解,知道它们的语法
    2、能看懂大部分的css代码
    3、能手写css,解决大部分的样式问题
    4、几乎能搞定所有的样式问题

    你觉得写css最难的是?
  • 1、1990~1993年,HTML最初被设计成一种结构化标记语言,用于描述文档内容,没有太多考虑文档的展现形式。
    2、随着网站的大量涌现,用户对网页外观的需求迅速提升,<font>和<big>之类的标签开始加入HTML。
      HTML3.2时代:结构和样式混杂的时期,<font size=“+3” color=“red”>Text</font>。
      人们需要这样一种页面:结构化的内容和灵活的页面展现。很快,W3C组织开始寻求解决方案。
    3、1995年,公布CSS草案。
    4、1996年,形成完整的CSS1标准,并逐渐成为和HTML重量相当的语言。
    5、1998年5月,W3C组织推出了CSS2,使得这项技术在世界范围内得到广泛的支持。CSS2成为了W3C的新标准。同时,W3C CoreStyle和CSS2 Validation Service 以及CSS Test Suite宣布成立。它是一组样式,样式中的属性在HTML元素中依次出现,并显示在浏览器中。样式可以定义在HTML文件的标志(TAG)里,也可以在外部附件文件做为外加文件。此时,一个样式表可以用于多个页面,甚至整个站点,因此具有更好的易用性和扩展性。
    6、2001年5月,CSS3草案
  • 【第一季第五期】要漂亮很容易!——超简单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 参考资料

    ×