不可不知的css十大密技

核心提示:CSS十大秘籍

1.css 字体简写规则


当使用css定义字体时你可能会这样做:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
事实上你可以简写这些属性:
font: 1em/1.5em bold italic small-caps verdana,serif
现在好多了吧,不过有一点要注意:使用这一简写方式你至少要指定font-size和font-family属性,其他的属性(如font-weight, font-style,font-varient)如未指定将自动使用默认值。

2.同时使用两个class

通常我们只为属性指定一个class,但这并不等于你只能指定一个,实际上,你想指定多少就可以指定多少,例如:

...

通过同时使用两个class(使用空格而不是逗号分割),这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠,那么后一个将获得实际的优先应用。

3.css中边框(border)的默认值

当编写一条边框的规则时,你通常会指定颜色、宽度以及样式(任何顺序均可)。例如:border: 3px solid #000(3像素宽的黑色实线边框),其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线(solid),那么其余的值将使用默认值:默认的宽度为中等(相当于3到4像素);默认的颜色为边框里的文字颜色。如果这正是你想要的效果,你完全可以不在css里指定。

4.!important会被IE忽略

在css中,通常最后指定的规则会获得优先权。然而对除了IE以外的浏览器来说,任何后面标有!important的语句将获得绝对的优先权,例如:
margin-top: 3.5em !important; margin-top: 2em
除IE以外所有浏览器中的顶部边界都是3.5em,而IE为2em,有时候这一点很有用,尤其在使用相对边界值时(就像这个例子),可以显示出IE与其他浏览器的细微差别。
(很多人可能还注意到了css的子选择器也是会被IE忽略的)

5.图片替换的技巧

使用标准的html而不是图片来显示文字通常更为明智,除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时,你只能选择图片。
举例来说,你想在每一页的顶部使用“Buy widgets”的标题,但你同时又希望这是能被搜索引擎发现的,为了美观你使用了少见的字体那么你就得用图片来显示了:
<h1><img src=/web/UploadPic/2011-6/20116916113139.gif alt="Buy widgets" /></h1>
这样当然没错,但是有证据显示搜索引擎对真实文本的重视远超过alt文本(因为已经有太多网站使用alt文本充当关键字),因此,我们得用另一种方法:<h1><span>Buy widgets</span></h1> ,那你的漂亮字体怎么办呢?下面的css可以帮上忙:
h1
{
background: url(/uploadfile/200806/17/96162027360.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px;
}
现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css,文本被定位于屏幕左侧-2000像素处。

1 2 下一页 >全文阅读
提示:试试"← →"键,翻页更方便哦!

[1] [2]  下一页

时间: 2024-09-18 04:27:23

不可不知的css十大密技的相关文章

[译]CSS的十大密技

css 在某blog看到一篇关于css的文章,觉得还挺有用的,大致译了一下,译文和原文如下,如果有译得不正确的地方或是对类似问题有其他更好地解决办法的,请不吝赐教! 译文: 1.css 字体简写规则 当使用css定义字体时你可能会这样做:font-size: 1em;line-height: 1.5em;font-weight: bold;font-style: italic;font-variant: small-caps;font-family: verdana,serif; 事实上你可以简

CSS十八条技总结

一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 三.区

一起谈.NET技术,CSS十八条技总结

一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 三.区

学习网页制作之总结CSS十大技巧

css|技巧|网页 1.css字体简写规则 当使用css定义字体时你可能会这样做: font-size:1em;line-height:1.5em;font-weight:bold;font-style:italic;font-variant:small-caps;font-family:verdana,serif; 事实上你可以简写这些属性: font: 1em/1.5em bold italic small-caps verdana,serif 现在好多了吧,不过有一点要注意:使用这一简写方

使用photoshop的八招密技

密技一: 当你需要快速隐藏工具栏和多个浮动面板时,逐一点击面板上的关闭按钮,接下来使用时又要打开,十分不方便.其实你可以同时按键盘上的"Shift"和" Tab"键,这样浮动面板会立即隐藏起来,从屏幕上消失,再同时按下两键,面板又会显现:如果只按下"Tab"键,则工具栏连同浮动面板会一起隐藏,再按以下该键,它们会同时显现. 密技二: 在Photoshop中,有很多时候要修改设置的取值.一般情况会在取值框的又侧有一个黑三角,点击它会出现一个滑动标尺

不用炫技就易刷屏的十大H5主题

  一.三情(亲情.爱情.友情) 首草先生的情书 主题-刷屏h5"> 扫描二维码,查看详情! 在这个H5里,首草没有选择呈现过多的互动技巧,只是静静地用大段文案和黑白影像向你诉说一段男人的心路.三情可以说是人类永恒的话题,应该是最容易激起人类心底柔软部分的情愫. 据W三水老师分享,该作品是W目前众多H5作品里活跃周期最长的;以前一个粘土动画H5反而因动效太炫喧宾夺主.三水老师同时表示,他们再不会做这种"蠢事"了.所以小伙伴们,忘掉炫技,多关注关注我们的文案策划吧! 二.

2011中国游戏不能不知的十大事件

   回首着过往的2011的中国游戏,还是网游主打天下,电游依然我行我素,PC单机依然落寞的景像.当然也有,无数奋战在游戏产业的年轻人与梦想家依然前扑 后续的挥洒着激情与梦想,谱写着那些我们曾经或是正在经历的故事.而以下罗列的2011中国游戏界不能不知的十大事件,只是其中的缩影-- 事件十.网络游戏防沉迷实名验证正式实施      背景:根据国家八部委下发的<关于启动网络游戏防沉迷实名验证工作的通知>,网络游戏防沉迷实名验证工作10月1日起正式实施.    点评:<人民日报>消息称

你不可不知的SEO必备十大“凶器”

作为一名seoer,每天需要观测和分析一些网站数据,如果没有一些必备的软件,无疑操作起来将会是件很困难的事情.下面就给大家隆重介绍做seo必备的十大"凶器": 1.观其站长工具 网站收录.反链.aleax.pr这些数据是站长每天都要看的数据,观其站长工具不断在更新,确实是站长的一个不错选择!   2.爱站百度权重值 了解竞争对手的实力,观察网站有没有被百度降权,作为交换友情链接的一个参考项,无疑爱站推出的百度权重值查询,受到了众多站长的追捧!   3.站长帮手友链查询 友情链接是站长每

傲游2.0 你肯定不知道的十大秘诀!

  傲游浏览器是一个强大的多页面浏览器. 除了方便的浏览功能, 傲游还提供了大量的实用功能以改善用户的上网体验,经过一系列的beta测试版,终于发布了2.0正式版.但是,很多网友对新版的部分新功能还不是很熟悉,用着2.0的新版,确没有享受到它带给我们的快捷,难免有些可惜.于是今天给大家介绍下我认为比较重要的十大功能,以飨读者.更多特性,期待你自己去研究. 1.在线收藏:注册用户只需要登录帐号,就可以在不用的电脑上使用同一份收藏夹,点击收藏->更多操作->上传在线收藏,这时收藏夹中保存的地址就上