布罗格的烘培机

Firefox、Opera、Safari下有的页面会出错,原因是以前的HTML数据不规范所致。

你未必知道的10个CSS技巧

evolt.org作者之一Trenton写的Ten CSS tricks you may not know,还是非常有用处的,无论CSS新手还是老枪,有些技巧的确鲜为人知。你可以去看英文原版,词汇并不复杂。其实这篇文章有翻译的价值的,不过我最近比较懒,就简单用中文简述一下,其间会插入一些自己的经历和看法:
  1. font的简写
    CSS很多元素都有简写,font要特别和严格一些,font-sizefont-family是必须的,而且要按照这个顺序。因为font用到的地方比较多,所以他可能特别提到。简写能有效减小你的CSS文件的体积。
  2. class属性叠加
    其实在class中可以同时加入多个属性,属性用空格隔开。例如:<p class="text side">...</p>这样<p>就继承了.text.side的有效属性(冲突的地方会自动被排斥)。随便提一下kubrick主题中也有一个地方使用了这个方法。该文章回复的用户提到IE在处理多属性时可能存在问题。
  3. border的缺省值
    当你使用border简写时没有指定border-widthborder-color时,border是有缺省值的,宽度为medium(大概3到4个象素),颜色为框内文本的颜色。
  4. !important不理会IE
    在CSS规则中,!important会使该规则额外优先,而IE却听不懂这条规则,那么在某些时候这个技巧会非常有用。
  5. 图片移魂大法
    你先看看原文的叙述,我谈谈我的经历。哈哈,我最早在zeldman的Blog上发现了这个技巧,注意他的导航条,鼠标悬停时空心字图片会变为实心,而实际上这是一张图片。呵呵,你再去分析一下他的CSS就知道了。
  6. 盒模式的另类hack法
    IE6以前的版本都有对盒模式的错误理解。以前都是看用CSS的声音属性来处理IE6以下版本的效果,这次你可以看看另外一种方法,看上去更简单方便。
  7. 块元素居中
    我们一般都使用指定块宽度再把左右margin设置为auto来居中。殊不知有时会在IE6之前的版本出现问题。去看看解决技巧,有CSS示例。
  8. 垂直居中
    CSS对垂直居中比较弱,没有表格那么灵活。而且vertical-align这个属性你就是用了也是不起作用的。方法就在于用行高来解决,把行高设置为整个box的高度。
  9. 子容器的定位
    CSS的奇妙除了可以让对象随处定位外,还可以让子容器也做得到。这个用处也很多。比如Binary Bonsai的导航条。
  10. 控制屏幕底部的背景色
    这个请看原文的详细讲解了。

原文:Ten CSS tricks you may not know:evolt.org, Code
引自:雨吁 » 你未必知道的10个CSS技巧
  • 你未必知道的10个CSS技巧 :
  • evolt.org作者之一Trenton写的TenCSStricksyoumaynotknow,还是非常有用处的,无论CSS新手还是老枪,有些技巧的确鲜为人知。你可以去看英文原版,词汇并不复杂。其实这篇文章有翻译的价值的,不过我最近比较懒,就简单用中文简述一下,其间会插入一些自己的经历和看法:

  • 2005-01-25 , 星期二 , 19:57:13
  • δ֪10CSS :
  • evolt.org֮һTrentonдTen CSS tricks you may not knowǷdzôģCSSֻǹЩɵȷΪ֪ȥӢԭ棬ʻ㲢ӡʵƪзļֵģȽͼļһ£һЩԼľͿ
    [h3]fontļд[/h3]
    CSSܶԪضмдfontҪرϸһЩfont-sizefont-familyDZģҪ˳ΪfontõĵطȽ϶࣬رᵽдЧСCSSļ
    [h3]classԵ[/h3]
    ʵclassпͬʱԣÿո磺<p class="text side">...</p><p>ͼ̳.text.sideЧԣͻĵطԶų⣩һkubrickҲһطʹ»ظûᵽIEڴʱܴ⡣
    [h3]borderȱʡֵ[/h3]
    ʹborderдʱûָborder-widthborder-colorʱborderȱʡֵģΪmedium34أɫΪıɫ
    [h3]!importantIE[/h3]
    CSSУ!importantʹùȣIEȴôijЩʱɻdzá
    [h3]ͼƬƻ[/h3]
    ȿԭĵ̸̸ҵľzeldmanBlogϷɣעĵͣʱͼƬΪʵģʵһͼƬǺǣȥһCSS֪ˡ
    [h3]ģʽ...

  • 2005-01-26 , 星期三 , 18:23:28
  • rainbowsoft :
  • class的属性叠加真的很有用,我原来还不知道。

  • 2005-01-28 , 星期五 , 17:36:25
  • dark :
  • 图片移魂也很妙

  • 2005-01-28 , 星期五 , 19:34:26
  • rainbowsoft :
  • zeldman.com的确很有想象力,在链接中更改样式也会实现不同的效果,真正是掌握CSS,才会什么都做的出来。

  • 2005-01-28 , 星期五 , 19:49:28
  • 91dv :
  • 不知道图片可以支持到什么程度

  • 2005-02-25 , 星期五 , 23:04:23
  • rainbowsoft :
  • 不明白你说的什么意思,但从CSS角度来看,只要有深厚的基础加上丰富的想象力,没有什么做不出来的。

  • 2005-02-25 , 星期五 , 23:18:52
  • 你未必知道的10个CSS技巧 :
  • evolt.org作者之一Trenton写的[URL=http://evolt.org/article/rdf/17/60369/]Ten CSS tricks you may not know[/URL],还是非常有用处的,无论CSS新手还是老枪,有些技巧的确鲜为人知。你可以去看英文原版,词汇并不复杂。其实这篇文章有翻译的价值的,不过我最近比较懒,就简单用中文简述一下,其间会插入一些自己的经历和看法:

    font的简写

    CSS很多元素都有简写,font要特别和严格一些,font-si

  • 2005-06-11 , 星期六 , 14:30:03
[<<] [<] [1] [>] [>>]

发表评论:

­

Powered by Zdevo 1.0.3125.32067,Template by Nagrand.

­