• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

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

  • 1,523 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 写的很全、很浅,很适合出初学者哦。
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,523
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
35
Comments
1
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 要漂亮很容易!
    超简单CSS速成教程
    #沉鱼{
    department: UED;
    post: fed;
    blog: “http://fool2fish.cn”;
    }
  • 2. 1 CSS简史
    1990~1993年,HTML
    <font size=“+3” color=“red”>text</font>
    1995年,CSS草案
    1996年,CSS1
    1998年5月,CSS2
    2001年5月,CSS3草案
  • 3. 2 CSS是什么
    描述的
    表现力丰富的
    可复用的
    Cascading style sheet
    易于使用的
    层叠的
  • 4. 选择器
    语句块
    属性声明
    h1 {
    color : #444 ;
    font-size : 18px ;
    font-family : ”微软雅黑”;
    }
  • 5. 3 选择器
    选择器位于CSS语句块的左侧,用于定义语句块将影响到的DOM节点
    选择器的类型
    选择器的组合
    选择器的层叠
    选择器的优先级
  • 6. 3.1 选择器的类型
    普通选择器:#id , .class , tag
    伪类: a:link, a:visited{} a:hover, a:active{}
    属性选择器: input [ type = “radio” ]
    高级伪类: .box : first-child {}
  • 7. 3.2 选择器的组合
    div.box
    a.hot-news:hover, a.hot-news:active{}
    .box.latest-news
    input#user-name
  • 8. !
    请确保页面内id唯一
  • 9. 3.3 选择器的层叠
    body .hd h3.title{…}
    .box .hd h3{…}
    .box .title{…}
    .box .hd .title{…}
    h3{color:#f60}
    <div class=“box”>
    <div class=“hd”>
    <h3 class=“title”>
    Title
    </h3>
    </div>
    </div>
  • 10. 3.4 选择器的优先级
    [ 0 , 0 , 0 , 0 ]
    #id
    tag
    .class , 伪类,属性选择器
    层叠选择器中,每个单选择器都可以在对应的位上+1
    优先级比较由左至右进行
  • 11. 3.4 选择器的优先级
    简单来说:
    #id > .class > tag
    层叠层级多的优先级高
    同样的选择器,位于后面的优先级高
  • 12. 4 CSS属性
    常用CSS属性
    CSS属性的简写
    CSS属性的继承
  • 13. 4.1 常用CSS属性
    display
    position , left , right , top , bottom , z-index
    float , width , height , overflow
    margin , padding
    font , line-height , color
    border , background
  • 14. 4.2 CSS属性的简写
    margin-left:10px ; margin-right:10pxmargin: 0 10px;
    border-color:#ccc ; border-style:solidborder:1px solid #ccc;
    background-color:#f2f2f2 ; background-image: url()background:#f2f2f2 url() no-repeat 0 0;
  • 15. 4.3 CSS属性的继承
    父节点中定义的某些属性,将遗传给子节点,除非子节点本身有定义该属性(包括浏览器定义的默认样式)。
    这些可被继承的属性定义几乎都是文本相关,比如:color, font之类。
  • 16. 5 推荐书写习惯
    Id和class的命名
    模块化
    属性声明顺序
    其他事项
  • 17. 5.1 id和class的命名
    用于CSS的id和class首字母小写,中划线链接,例:latest-news
    用于js的id和classS_前缀,首字母大写,驼峰,例:S_LatestNews
    CSS尽量不占用id
  • 18. 5.2 模块化
    .news{}
    .news .hd{}
    .news .title{}

    <div class=“box news”>
    <div class=“hd”>
    <h3 class=“title”>
    Title
    </h3>
    </div>
    </div>
  • 19. 5.3 属性声明顺序
    display
    position , left , right , top , bottom , z-index
    float , width , height , overflow
    margin , padding
    font , line-height , color
    border , background
  • 20. 5.4 其他事项
    不使用通配符*
    不定义全局样式,如直接给tag指定样式
    注意继承的影响
    使用.class来选择要定义样式的DOM节点
  • 21. 6 浏览器相关
    浏览器默认样式
    浏览器兼容性
    慎用hack
  • 22. 6.1 浏览器默认样式
    每个浏览器会根据自己对HTML标签的理解,默认给某些标签设置CSS样式
    通常我们并不需要使用这些默认样式,所以会引入重置样式,将所有的与设定样式换成我们需要的
  • 23. 6.2 浏览器兼容性
    浏览器面世的时候,支持的CSS版本不同
    浏览器开发商对同一个属性值的理解不同
    淘宝前台页面兼容:ie6+,firefox,chrome
    如果是后台页面,可酌情考虑不支持ie6
  • 24. 6.3 慎用hack
    .box{
    width:100px; /* for all */
    *width:120px; /* for ie7 */
    _width:140px; /* for ie6 */
    }
    尽量遵循标准书写CSS,避免无谓的hack
  • 25. 7 调试工具
    IE8 – F12
    Firefox – F12 (需安装Firebug插件)
    Chrome – Ctrl+Shift+I
    ietester
  • 26. 8 参考资料
    CSS速查手册http://www.52css.com/css/
    淘宝网后台页面模块范例http://fed.ued.taobao.net/2010/shine/components/index.html
    淘宝网后台页面模块APIhttp://fed.ued.taobao.net/2010/shine/docs/api/index.html
    CSS权威指南