开发学院网页设计DivCss 10个你可能不知道的CSS技巧 阅读

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

 2008-03-09 11:32:21 来源:WEB开发网   
核心提示:1. CSS font shorthand ruleCSS 缩写比如 CODEfont-style:bold;ling-height:130%;font-size:12px;可以缩写为CODEfont:bold 12px/130%2. Two classes together同时使用多个 class多个class中间空
1. CSS font shorthand rule
CSS 缩写

比如

CODE
font-style:bold;ling-height:130%;font-size:12px;


可以缩写为

CODE
font:bold 12px/130%


2. Two classes together
同时使用多个 class

多个class中间空格分开,如
CODE
<div class="oMenu oEm">


3. CSS border default value
边框使用默认样式

边框默认的为 soild,宽度为medium,大约3-4像素,颜色与包含的文字内容一样。

4. !important ignored by IE
用!important来区分IE

比如:
CODE
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 代码:

CODE
<h1><img src="http://tech.cncms.com/tech/UploadPic/2010107/2010107204030463.gif" alt="Buy widgets" /></h1>

6. CSS box model hack alternative
CSS盒式模型

简单地说,就是把padding和border这种IE不消化的东西,通过 div 嵌套逃避过去。(在里面那个div设置 padding 和 border)

代码如下:

CODE
<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,所以这样

CODE
<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
背景颜色走到底

有时页面需要某一列背景色走到底,但这列内容没那么多,这时可以用背景来做。

CODE
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}

Tags:可能 知道 CSS

编辑录入:coldstar [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接