收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 34193|回复: 71

[讨论] 10个你未必知道的CSS技巧

[复制链接]
发表于 2006-1-28 15:23:00 | 显示全部楼层 |阅读模式
本文作者是:Trenton Moss。
发表网站是:http://www.webcredible.co.uk/

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权,可以自由使用本翻译。

1.CSS字体属性简写规则

一般用CSS设定字体属性是这样做的:

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:

<p class="text side">...</p>

同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。

补充:对于一个ID,不能这样写<p id="text side">...</p>也不能这样写

3. CSS border的缺省值

通常可以设定边界的颜色,宽度和风格,如:
border: 3px solid #000
这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。

如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。

也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是显示,第2行是打印,注意其中的media属性。

但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。

比如你想整个卖东西的图标,你就用了这个图片:
<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:

#box { width: 100px; border: 5px; padding: 20px }

这样调用它:
<div id="box">...</div>
这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的,让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用:
<div id="box"><div>...</div></div>
这样,不管什么浏览器,宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:

#content { width: 700px; margin: 0 auto }

你会使用 <div id="content"> 来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

这会把网页内容都居中,所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。

CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:

#container { position: relative }

这样容器内所有的元素都会相对定位,可以这样用:
<div id="container"><div id="navigation">...</div></div>
如果想定位到距左30点,距上5点,可以这样:

#navigation { position: absolute; left: 30px; top: 5px }

当然,你还可以这样:
margin: 5px 0 0 30px
注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。

10. 直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:

#navigation { background: blue; width: 150px }

较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?

不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。

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

此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。

本文作者是:Trenton Moss。
发表网站是:http://www.webcredible.co.uk/

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权,可以自由使用本翻译。

评分

参与人数 1威望 +3 收起 理由
经典论坛大妈 + 3 历史打分

查看全部评分

 楼主| 发表于 2006-1-28 23:54:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

恩,是的,我看了以后感觉自己以前在用很多愚蠢的方法,比如文字垂直居中,我都通过
PADDING-TOP来控制,哈,现在看来比较笨哦~~
回复 支持 1 反对 0

使用道具 举报

发表于 2006-1-28 16:00:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

不错,感谢楼主。希望看到更多这样的文章。
版主赶快加精吧。
回复 支持 1 反对 0

使用道具 举报

发表于 2006-1-28 15:49:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

很好,打分鼓励!这样的文章会让很多人受益!
回复 支持 1 反对 0

使用道具 举报

发表于 2006-1-28 15:41:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

支持!
回复 支持 1 反对 0

使用道具 举报

发表于 2006-1-29 17:49:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

r2no1在上个帖子中说
恩,是的,我看了以后感觉自己以前在用很多愚蠢的方法,比如文字垂直居中,我都通过
PADDING-TOP来控制,哈,现在看来比较笨哦~~

很多时候padding-top控制比vertical-align更有效,兼容性也更好
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-1-29 19:07:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

ruxpinsp1在上个帖子中说
r2no1在上个帖子中说
[quote] 恩,是的,我看了以后感觉自己以前在用很多愚蠢的方法,比如文字垂直居中,我都通过
PADDING-TOP来控制,哈,现在看来比较笨哦~~

很多时候padding-top控制比vertical-align更有效,兼容性也更好 [/quote]

vertical-align没有什么用,现在只要把文字行高设置为跟层的高度一样就可以了~~
回复 支持 反对

使用道具 举报

发表于 2006-1-29 21:08:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

r2no1在上个帖子中说
ruxpinsp1在上个帖子中说
[quote] r2no1在上个帖子中说
[quote] 恩,是的,我看了以后感觉自己以前在用很多愚蠢的方法,比如文字垂直居中,我都通过
PADDING-TOP来控制,哈,现在看来比较笨哦~~
  
很多时候padding-top控制比vertical-align更有效,兼容性也更好 [/quote]  

vertical-align没有什么用,现在只要把文字行高设置为跟层的高度一样就可以了~~ [/quote]
这个hack在IE上很有效,在mozilla上没什么大必要,因为是默认的render,Opera上则有一定的问题,一定要和padding: 0一起用
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-1-29 23:53:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

恩,恩,学到新知识了,谢谢各位老师啊~~
回复 支持 反对

使用道具 举报

发表于 2006-1-30 00:37:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

建议大家都看一下《网站重构》这本书,上面对楼主讲的方法都有阐述。其实用CSS做页面和用表格做页面不同的地方就在于思路。思路对了,用CSS就可以省时省力。当然,要求设计人员对CSS的掌握不仅仅是皮毛才行。

从我工作的网站来看,有些网站架构是非常适合用CSS布局做页面的。特别是采用spring架构的网站。这种网站每一块内容都可以做为一个单独的文件存在,而最终显示的页面则是用XML的文件列表来控制不同的文件在同一个页面中组合在一起的。

这样的好处在于,以往的页面设计是单独页面单独考虑,而且有时候很多的CSS不能共用。造成了CSS资源的浪费。而现在的页面可以事先定义好几种CSS显示样式,不同的文件应用不同的样式,最后组合在一起的时候,页面效果也非常不错。最主要的是,这种做法对于开发人员来说是最简单的,我想所有的CSS设计人员都遇到过程序员把自己的套用的CSS效果破坏的经历。而且定义好几种CSS布局的话,程序员在写程序的时候就会主动应用这些布局,也就是说,他们会把CSS类当做程序开发的一个代码写在文件中。这样,当程序员编完页面代码时,页面效果基本上也就显示出来了。CSS设计人员唯一的工作只是需要将程序员编写的文件再细化一下即可。减轻了不少的工作量。这也是现在大部分采用web2.0技术的网站所正在使用的工作模式。

如果想熟悉CSS标准,再介绍一本书,《CSS权威指南》。相信看完这两本书的同仁会对CSS有一个更深的了解。其实再难的技术也是人编的,没有什么学不会的。CSS相对于编程技术来说,“相当”简单了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-1-30 09:55:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

恩,楼上的说的很不错
<网站重构>这书的理论性强点,建议对CSS的基础先了解一下,再去看这本书,会收获更多~
回复 支持 反对

使用道具 举报

发表于 2006-1-30 18:18:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

我最近也在学习重够,好文章,严重支持!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-1-30 22:12:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

怎么还没给我加精呢。。呜呜~~
回复 支持 反对

使用道具 举报

发表于 2006-1-31 12:51:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

这个好!支持
回复 支持 反对

使用道具 举报

发表于 2006-1-31 13:29:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

r2no1在上个帖子中说
怎么还没给我加精呢。。呜呜~~


已经给你打分了!综合版还没有加精的功能!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-1-31 17:43:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

谢谢版主~~
回复 支持 反对

使用道具 举报

发表于 2006-2-1 18:23:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

回复 支持 反对

使用道具 举报

发表于 2006-2-2 11:37:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

呵呵,既然是转的,我也贴一个:

1. Block和inline元素对比
所有的HTML元素都属于block和inline之一。
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

相反地,inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢?
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

2. 再来一个box黑客方法
之所以有这么多box黑客方法,是因为IE在6之前对box的理解跟别人都不一样,它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致,可以用CSS的方法:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

第一个宽度所有浏览器都认得,但IE5.x不认得第2行的宽度设置,只因为那一行上有空白的注释符号(多么蠢的语法分析!),所以IE5.x就用20减掉一些空白,而其他浏览器会用14这个宽度,因为它是第2行,会覆盖掉第1行。

3. 页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类:

<body>
<div class="container“>

然后CSS这样设计:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");
}

4. IE与宽度和高度的问题

IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。

比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

所有的浏览器都可以使用第一个box设置,但IE不认得第2段设置,因为其中用到了子选择器命令。第2个设置更特殊些,所以它会覆盖掉第1个设置。

5. 字体变形命令

text-transform 命令很有用,它有3个值:text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写,第2个变成全小写,第3个变成首字母大写。这对拼音文字非常有用,即使输入时有大小写错误,在网页上也看不到。

6. IE中图片文字消失的问题

有时会遇到文字或背景图突然消失的问题,刷新一下又出现了,这在靠近漂浮元素时更容易发生(注:没见过)。此时,可以为消失的元素设定: position: relative ,如果不行,再考虑为这些元素指定一个宽度试试。

7. 不可见文字

不论因为何种原因希望某些网页文字不在浏览器中显示,比如为了打印或为了小屏幕而让某些文字不显示,都可以用 display: none 。这非常简单,但有时对某些人这有点没用,他们能去掉这个控制,这时就要用到: position: absolute; left: -9000px 。

这实际上是把文字指定在页面以外显示。

8. 为手持设备设计专门的CSS

也就是手机/PDA等小屏幕用户,可以专门设计一个CSS来让网页显示更舒服些。为此,可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

也可以阅读专门的手持设备可用性。

9. 3D效果的按钮

以前要想制作带有3D效果,并且点击下去还会变化的按钮,就得用图片替换的方法,现在CSS就可以了:

a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

至于效果,还可以自己调整了。

10. 在不同页面上使用同样的导航代码

许多网页上都有导航菜单,当进入某页时,菜单上相应这一项就应该变灰,而其他页亮起来。一般要实现这个效果,需要写程序或专门为每一页做设计,现在靠CSS就可以实现这个效果。

首先,在导航代码中使用CSS类:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

然后分别为每一页的Body指定一个id,和上面类同名。如<body id="contact">。

然后设计CSS如下:

#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}

这里,当id设为home时,.home就会起作用,也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。

本文作者是:Trenton Moss。
发表网站是:http://www.webcredible.co.uk

评分

参与人数 1威望 +1 收起 理由
经典论坛大妈 + 1 历史打分

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2006-2-2 18:50:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

支持!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-2-3 20:26:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

大家共同学习进步嘛~~
回复 支持 反对

使用道具 举报

发表于 2006-2-6 11:18:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

好!!!
回复 支持 反对

使用道具 举报

发表于 2006-2-6 15:21:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

支持!!!!!
回复 支持 反对

使用道具 举报

发表于 2006-2-6 21:55:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

好贴!
回复 支持 反对

使用道具 举报

发表于 2006-5-11 10:59:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

小声的说:这个帖子,严重支持!!!
回复 支持 反对

使用道具 举报

发表于 2006-5-11 11:31:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

r2no1在上个帖子中说
5. 图片替换技巧

一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。

比如你想整个卖东西的图标,你就用了这个图片:
<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。


为什么不这么写呢:
<h1><p style="display:none;">Buy widgets</p></h1>
回复 支持 反对

使用道具 举报

发表于 2006-5-12 11:15:00 | 显示全部楼层

10个你未必知道的CSS技巧(申请支持)

学习!

支持!
回复 支持 反对

使用道具 举报

发表于 2006-5-13 11:17:00 | 显示全部楼层
想学好css是不是要学HTML呢
那要怎么学好HTML呢
有什么好书可以学好呢
希望各位高手指点
回复 支持 反对

使用道具 举报

发表于 2006-5-13 11:23:00 | 显示全部楼层
想学好css是不是要学HTML呢
那要怎么学好HTML呢
有什么好书可以学好呢
希望各位高手指点
回复 支持 反对

使用道具 举报

发表于 2006-5-15 11:27:00 | 显示全部楼层
顶支持呵
回复 支持 反对

使用道具 举报

发表于 2006-5-15 16:33:00 | 显示全部楼层
好东东啊,谢谢啦!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-12-7 19:20 , Processed in 0.155854 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表