新客网
首页 | 新闻 | 系统·网络·服务器·安全 | 工具·办公 | 编程·数据库 | 图象·网页·运营 | 硬件·存储 | 专题教程 | 旧版
 → 当前位置:首页 > 教程 > 网页设计 > Html/Css > 正文

10个你未必知道的CSS技巧

XKER.COM   2006-5-8 10:52:29  来源:CSDN  点击:

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。

如果你得到原作者或原发表网站的授权,可以自由使用本翻译。

1.CSS字体属性简写规则

一般用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>

本新闻共2页,当前在第1页  1  2  

上一篇教程:robots.txt和Robots META标签
下一篇教程:你没见过的CSS效果
收藏本文】 【我要投稿】 【打印本文】 【论坛讨论】 【关闭窗口

相关文章
·采用XHTML和CSS设计可重用可换肤网页·技巧再现:css网页设计技巧
·网页设计引入CSS样式的五种方式·用CSS实现表格背景颜色渐变效果
·如何用CSS来控制网页字体的显示样式·常用CSS
·expression将JS、Css结合起来·调整CSS类型的顺序改变链接状态
·两分钟做个xhtml+css的网站首页·网站重构:利用CSS改善网站可访问性
·总结:用CSS进行网页样式设计攻略全集·中文排版CSS心得
·CSS中的行为——expression·巧用CSS滤镜做图案文字
·CSS使用技巧20则·CSS+DIV设计实例:Hover over下的边框变化

学院文章搜索
  
推荐文章
·编程过把瘾:自己动手写操
·数据恢复指南 专题
·硬盘“逻辑锁”解决办法
·DOS使用中的常见问题解答
·DOS下常用的相关网络命令
·Win2000优化技巧篇之:硬件
·惊心8小时:破译Windows运行
·菜鸟必备:超实用低级格式
·硬件有价数据无价 硬盘开盘
·国内数据恢复市场内幕揭秘
阅读排行
·免费代理IP(每日更新)
·DB2 9数据库专题
·关于 Apache 的几种常见应
·站长手册:WIN2003下Web服
·QQ千人好友浮出水面 会员抢
·DOS下对系统重新进行分区
·Fdisk分区详解
·Firefox出现新高危0Day漏洞
·dos如何进行系统配置
·5种Alexa世界排名作弊方式
专题教程
·数据恢复指南 专题
·Web服务器专题
·DB2 9数据库专题
·ghost教程 专题
·局域网技术专题
·虚拟机专题
·CDN加速技术专题
·注册表教程专题
·电脑技巧 专题
·Linux与虚拟化技术
最新文章
·Firefox出现新高危0Day漏洞
·QQ千人好友浮出水面 会员抢
·DOS下对系统重新进行分区
·Fdisk分区详解
·DOS常用命令
·dos如何进行系统配置
·dos慎用命令
·Ver、Vol、Ctty命令使用说
·Tree、Unformat、Vsafe命令
·Setver、Share、Subst命令
设为首页 - 加入收藏 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接
Copyright © 2003 - 2006 XKER Inc. All Rights Reserved
新客网 版权所有