15个必须学会的CSS技巧

转帖|其它|编辑:郝浩|2009-03-13 17:15:13.000|阅读 709 次

概述:成为高手必须学会的15个CSS技巧

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

1.将绝对定位元素放在在相对定位元素里。

把一个绝对定位的元素放在一个相对定位元素中,会使绝对定位的元素的位置相对于最近的已定位祖先元素。这是一个很好的技术,用来将元素定位在需要的位置,例如,顶部logo。

trick1

2. Z-Index和定位.

z-index可能对一些开发者来说比较神秘,通常,你会发现设计师设定一个非常大的z-index数值给div元素或element元素,用来将 它置于另一个元素上面;我们需要记住的是,z-index只适用于有position值的元素。如果你发现一个元素z-index值无效,需要给这个 div加上position:relative或者position:absolute。

trick2

3. Margin Auto

给margin值设为auto;是一个使元素居中而不用担心用户屏幕大小的好方法;然而,“margin: auto”只有具有宽度值的元素起作用;这意味着使用“margin: auto”的行内元素,首先设定display:block。

trick3

小心恰当的使用Padding

当刚开始学CSS用padding时的一个常犯的错误是不知道所有的盒模型效果,记住根据盒模型的定义;padding的数值会加到元素宽度属性的上面,这将引很多麻烦和元素偏移,例如:

1
2
3
4
5
#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

总宽度等于264px ( 200 + 30 + 30 + 2 + 2 ) 。 此外,请记住padding不像margin,不能设为负值。

5.使用的文本缩进隐藏文字

假如你有一张网站的logo图片,这个图片在h1 标记中。为了SEO,于是我们将文字鞋到h1标记中,方便搜索引擎阅读,但并不要文字显示,有的人可能会使用 “display:none” 将元素隐藏,那么就不得不吧logo图片放在别的标记中,我们使用为 text-indent设定负值, 也能达到这个效果.

1
2
3
4
5
6
h1 {
text-indent:-9999px;/*隐藏网站, SEO*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

6.IE浏览器双边浮动BUG

敢肯定,大家都处理过这个问题,因为这是一个我们最常用的CSS “hack”。如果你以前没有看到过这个BUG,那么看下发生条件:一个浮动元素如果设置margin和浮动元素的方向相同时,在IE 6中margin显示值会是设定值的2倍! 幸运的是,修补这个BUG程序很简单。 我们给浮动元素加入display: inline;看下面例子:

1
2
3
4
5
6
.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}
demo-6

7 .使用CSS来打击垃圾邮件

表单的写法如下:

1
2
3
4
<label for="”Name”">姓名:</label>
<input name="”name”" type="”text”" />
<label class="”captcha”" for="”captcha”">答案?</label>
<input id="”captcha”" name="”captcha”" type="”text”" />

使用css为id为captcha的input元素设定图片背景;这将使垃圾邮件脚本找到你的html元素 ,扫描你的CSS ,比较选择器,找到某些背景图像,然后读取此背景图片。可以有效防止邮件。 缺点是,如果有人不上网启用CSS。

demo-7

8.在IE6中使用PNG格式图片

我确信大家都同意的是,在IE6中使用PNG图片很头疼,可以使用复杂的Javascript技术和微软的滤镜属性,或者用就 .jpg格式. 使用微软AlphaImageLoader :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=sURL.png)

9 . 跨浏览器的CSS透明效果

跨浏览器使用CSS透明效果很简单。 我们可以将效果遍布 Firefox和Safari、Opera、旧的浏览器如Netscape Navigator中。

1
2
3
4
5
6
.yourClass {
filter:alpha(opacity=50);/* IE*/
-moz-opacity:0.5;/*旧的 mozilla 浏览器如 NN*/
-khtml-opacity: 0.5;/*旧版Safari 和 "KHTML"浏览器引擎*/
opacity: 0.5;/*FF, Safari, 和 Opera*/
}
demo-9

10.使用CSS sprites

CSS图片sprites是一个同时加载多个CSS图像的好方法,此外它可以减少HTTP请求和主题文件的大小。 此外,还可以消除hover图片“闪烁”。CSS图片sprites把许多图片都合并为一个图片文件。 然后,我们使用CSS来调整背景图片的定位值、宽度、高度,将图片放在我们想要的地方。
demo-10

11.使用条件注释支持IE 6

通常, Web开发人员被加入新的CSS规则和声明,只适用于某些版本的IE浏览器。 如果您不熟悉条件注释,下面的代码是当用户的浏览器是小于或等于IE 7 时链接样式表::

1
2
3
<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

将代码放在你的HTML文件head标记中。 如果不是在IE浏览器将不会链接样式表,如果是链接CSS文件将覆盖默认的样式。

12.CSS的特殊性

CSS样式的特殊性的值,决定样式优先级的高低。
元素为:1
类选择符为:10
ID选择符为:100
行内样式为:1000
demo-12

13.在所有浏览器实现最小高度

在开发时,我们经常要实现的效果是,让元素至少有一定的高度,然后如果需要的话伸展以容纳更多的内容。 不幸的是, IE浏览器不能正确使用min-height属性。 幸运的是,有个min-height fast hack ,这是这样做:

1
2
3
4
5
#yourId {
min-height:300px;
height:auto !important;
height:300px;/*ie中相当于min-height*/
}

14.* HTML hack

如果您需要或希望使用特定的样式,可以使用* HTML hack 。 在一个符合标准的浏览器中, HTML元素将永远是根元素,因此在HTML之前用*不被识别。 然而, IE浏览器中这是完全合法的。 因此,如果我们要在IE中使用某些样式,我们可以这样做:

1
2
3
* html body div#sideBar {
display:inline;
}

15. 滑动门技术

在导航按钮中使用背景图片,问题是按钮的文本太长超出图片,或者被截断。 使用两个图片和的CSS滑动门技术 ,我们可以创建按钮通过扩大以适应内的文字。 这种技术是每个按钮用两张图片,并用CSS定义背景图片。 例如:
HTML:

1
<a class="myButton"><span>标题</span></a>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a.myButton {
background: transparent url('right.png') no-repeat scroll top right;
display: block;
float: left;
height: 32px; /* 图片高度 */
margin-right: 6px;
padding-right: 20px;/*图片宽度*/
/*其他样式*/
}
a.myButton span {
background: transparent url('button_left.png') no-repeat;
display: block;
line-height: 22px; /* 图片高度 */
padding: /*改成适合的值*/
}
demo-15

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:themeforest

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP