你未必知道的10个CSS技巧

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值