当前位置:首页 » HTML/CSS

10个你可能不知道的CSS技巧

2010-04-06 18:54 本站整理 浏览(10)
1. CSS font shorthand rule
   CSS 缩写
   比如
   font-style:bold;ling-height:130%;font-size:12px;
   可以缩写为
   font:bold 12px/130%
   2. Two classes together
   同时使用多个 class
   多个class中间空格分开,如 <div class=/"oMenu oEm/">
   3. CSS border default value
   边框使用默认样式
   边框默认的为 soild,宽度为medium,大约3-4像素,颜色与包含的文字内容一样。
   4. !important ignored by IE
   用!important来区分IE
   比如:
   margin-top: 3.5em !important; margin-top: 2em
   非IE浏览器会优先使用 3.5em,而IE根据先后顺序关系,使用 2em
   5. Image replacement technique
   图片替换技术
   比如:
   <img alt=/"[color]图片说明[/color]/">
   搜索引擎对这样 alt 不如真正的文字敏感。可以这样来优化搜索引擎(SEO)
   CSS部分:
   h1
   {
   background: url(widget-image.gif) no-repeat;
   }
   h1 span
   {
   position: absolute;
   left:-2000px;
   }
   HTML 代码:
   <h1><img src=/"widget-image.gif/" alt=/"Buy widgets/" /></h1>
   6. CSS box model hack alternative
   CSS盒式模型
   简单地说,就是把padding和border这种IE不消化的东西,通过 div 嵌套逃避过去。(在   里面那个div设置 padding 和 border)
   代码如下:
   <style>
   #box
   {
   width: 150px;
   }
   #box div {
   border: 5px;
   padding: 20px;
   }
   </style>
   <div id=/"box/"><div>...</div></div>
   7. Centre aligning a block element
   页面中间对齐
   IE 不认识 margin:auto,所以这样
   <style>
   body
   {
   text-align: center;
   }
   #content
   {
   text-align: left;
   width: 700px;
   margin: 0 auto;
   }
   </style>
   <body>
   <div id=/"content/">
   ...
   8. Vertically aligning with CSS
   垂直对齐
   vertical-align 不好使,可以试试 line-height
   9. CSS positioning within a container
   CSS定位
   实际上就是古老的“层嵌套”,外面 relative 里面 absolute,这样的 absolute 就是相对外面的容器而不再是body(整个页面)了
   10. Background colour running to the screen bottom
   背景颜色走到底
   有时页面需要某一列背景色走到底,但这列内容没那么多,这时可以用背景来做。
   body
   {
   background: url(blue-image.gif) 0 0 repeat-y;
   }