DIV+CSS技巧-最实用的16条css样式设置

作者 FarLee 2010年3月24日 23:58:59   ‖浏览(23,976)

在这里远方博客整理的CSS技巧,可能其中的某几条是你一直在使用的CSS样式设置方法,但是其他人没有经常应用到的,所以有些CSS技巧可能对你来说是非常简单的东西,这16条个人认为最实用的DIV+CSS 技巧都通过了个人部分浏览器测试(IE+firefox)。

DIV+CSS是符合W3C Web标准的网页布局模式,实现了html网页内容与表现的分离,不仅有利于网站的标准化和站点维护,对搜索引擎优化(SEO)也很有好处。看看好像学习CSS教程挺简单的,CSS样式设置一学即会,但是要精通CSS,恐怕就要Web设计师在实践中不断提高了。一些前辈整理了许多很容易被初学者忽视或很好的CSS技巧(包含但不仅限于DIV+CSS),希望对大家在网站开发中更熟练地应用CSS有所帮助。

1. 链接的CSS样式的顺序:出现鼠标经过链接时hover样式不起作用的问题,检查4个链接CSS样式设置顺序,应该为link-visited-hover-actived;

2. CSS设置IE浏览器窗口滚动条颜色等属性,代码如下:

<style type="text/css">
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>
<!--
html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
-->

注意应该设置body标签的CSS样式,滚动条CSS样式设置在html中无效,如果HTML中有文档声明,则body中设置无效。

3. CSS浏览器兼容器问题,在IE6中出现边距margin变成双倍的问题:

body {margin:0;}
div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}

设置 float left 浮动后,左外边距margin-left 从10px变成20px,所以还应该再加个display:inline,就不会有这个bug了。希望未来的微软IE 9 能解决和Firefox等标准浏览器之间的兼容性问题。

4. CSS HACK 技巧:!important 和*+html 与 *html。

IE7对!important的支持,所以 !important 方法可以针对IE6 作HACK.(注意该声明位置需要提前.)

<style>
#wrapper
{
width: 100px !important ;         //IE7
width: 80px;                           //IE6
}
</style>

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签,因此IE7/IE6可以对Firefox作hack。

<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>

注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ””>

5. 清除浮动float 万能办法,设置如下的全局CSS,然后在设置了float 浮动的div内加上class=”clearfloat”就可以了,

<style>
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
</style>

6. 用CSS样式给图像设置圆角

<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”"
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>

HTML 内容

<div class=”roundbottom”>
<img src=”bl.gif” alt=”"
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
</div>

CSS 样式设置
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

7. CSS设置DIV水平居中

<div id=”container”></div>
#container {
margin:0px auto;
}

8. CSS设置DIV内容垂直居中,以line-hight 为高度:

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
<p>Content here</p>

9. 禁止链接自动换行,隐藏超出的内容

a{
white-space:nowrap;
}
#main{
overflow:hidden;
}

10. 给blockquote属性设置双引号起始

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

11. CSS 简写技巧

将列表list的多个CSS属性:list-style-type:square; list-style-position:inside; list-style-image:url(filename.gif); 简写成list-style:square inside url(filename.gif); 字体font、边框border、内边距padding、外边距margin、背景background等等都可以这样简写成一行。成对出现的颜色值如#001122可以简写为#012;属性值为0的时候可以省略单位px等,如padding: 10px 5px 0px 0px;可以简写为:padding: 10px 5px 0 0;

12. IE 不支持的CSS用法

  • :focus伪类,设置键盘鼠标焦点的CSS样式,如选中输入框时可以设置焦点元素的border;
  • Display,IE 虽然支持display: block、inline和 none,IE6/IE7只支持本身为inline元素的inline-block属性;解决办法请看第15条CSS技巧。
  • IE6 不支持:hover 伪类,要用Javascript 替代;
  • IE6 不支持min-height,可以这样解决,让IE6读取 height:300px:
    div {
    height:auto !important;
    min-height:300px;   //假设最低高度为300px
    height:300px;
    }
  • IE6/IE7 不支持outline属性,我们不得不用border。

13. CSS 设置浏览器滚动条

textarea{  overflow:auto;  }      //移除IE默认的滚动条
html{ overflow:-moz-scrollbars-vertical; }    //始终显示Firefox垂直滚动条

14. 使用背景图片作为网站Logo,不显示标题文字

#header h1 a{display:block; text-indent:-9999em; background:(images/logo.png) no-repeat 0 0; height:87px; width:250px; }

15. Display CSS Hack

.element-class {
display: -moz-inline-stack;  //支持 Firefox
display: inline-block; //除Firefox之外的其他一些标准浏览器
zoom: 1; //IE 支持
*display: inline; //只有IE支持 (CSS Hack)
}

16. CSS设置字母大小写 text-transform

text-transform: uppercase; 或 text-transform: lowercase; 或 text-transform: capitalize ;

即使网页中输入了错误的大小写,text-transform也能分别转换成全大写,全小写,首字母大写(分别对应于上一行CSS样式设置)。


来说兩句