“顶级”CSS技巧

只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。

一、在一行内声明CSS

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

第二种看起来的确格式化,但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。

以前我也是写成类似第二种方式,但是逐渐发现就像文章说的一样,没多大用。一行看起来又爽快又省地方还能让文件更小。

二、分块书写代码

这样书写代码可以让CSS更页面化,在出现问题时候可以最短时间内找到问题所在。就像下面这样:

#content {float:left;}
#content p { … }
#sidebar {float:left;}
#sidebar p { … }
#footer {clear:both;}
#sidebar p { … }

三、浏览器兼容问题

只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。

合理的使用CSS可以避免Hack。当然,调试的时间会多一些。

包含浮动元素所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。

理解Overflow如果页面中有两个浮动元素,在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了,不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器

时间: 2024-08-03 23:46:58

“顶级”CSS技巧的相关文章

css技巧: 10个非常不错的CSS技巧

在这里,巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观.我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷.设计模版和博客主题时,我经常"不断推敲和尝试CSS(Hit and Trial CSS ),我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美.对了.之所以说是"不断推敲和尝试CSS"是因为在得到了满意的效果之前我会去尝试想尽一切方法.使用这些不同的CSS属性中,我用的最多的是列出来的这些.从我开始写博客,我就接触了CSS

CSS技巧汇总:网页制作常用的22个CSS技巧

文章简介:22个必须知道的css技巧. 1.改变选中文字的背景和颜色 <PRE style="LINE-HEIGHT: 24px; WIDOWS: 2; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(255,255,255); FONT-VARIANT: normal; FONT-STYLE: normal; TEXT-INDENT: 0px; MARGIN: 0px 0px 10px; ORPHANS: 2; LETTER-SPACING: no

CSS技巧荟萃:了解CSS页面布局和加载流程

如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性.在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 介绍 在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式.这里我们主要重点介绍两个类型的元素: block inline 如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型. inline类型的元素包括:

CSS技巧:关于CSS Hack与float闭合(清除浮动)

核心提示:CSS技巧:关于CSS Hack与float闭合 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. <style>#wrapper{#wrapper {

几个实用的css技巧

这里有几个实用的css技巧,或许对您有所帮助. 使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里. 清除容器浮动 #main {     overflow:hidden; } 期前也提到过这样的问题,更多信息可以看这里. 不让链接折行 a {     white-space:nowrap; } 上面的设定就能避免链接折行,不过个人建议长链接会

你未必知道的10个CSS技巧

css|技巧 font的简写CSS很多元素都有简写,font要特别和严格一些,font-size和font-family是必须的,而且要按照这个顺序.因为font用到的地方比较多,所以他可能特别提到.简写能有效减小你的CSS文件的体积. class属性叠加其实在class中可以同时加入多个属性,属性用空格隔开.例如:<p class="text side">...</p>这样<p>就继承了.text和.side的有效属性(冲突的地方会自动被排斥).随

CSS技巧:important和空格的组合技巧及其他

css|技巧 !important和(空格)/**/:的组合技巧及其他 先温习一下对于IE的box-model的破解IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本,这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服. http://www.tantek.com/CSS/Examples/boxmodelhack.htmlIE5.X/win对box-model的解析是一样的,他们认为width包括了边框(border)和补白(padding),幸

学习CSS技巧:DIV下图片自适应解决方法

css|技巧|解决|自适应 我们(特别是像我一样的菜鸟)经常会遇到一个问题--图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码--尽管这并没有多少技术含量. 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐.还有一种是在外部容器定义over-flow:hidden.但这种办法只会切割图片而不会自动适用.下面的

CSS技巧学习:像table一样布局div

css|技巧 翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显