20个有益于初学者的CSS实用技巧
以前需要依靠大量的开发人员和程序员来帮助更新网站,即使只是小型的站点。由于CSS和它的灵活性,网站的前端风格便可以独立并远离功能实现的代码。现在,只要对CSS有一些基本的了解 ,即使是新手也可以轻易地更改网站的风格。
无论你是否有兴趣选择CSS创建自己的网站,或者仅仅是利用CSS调整、修饰你博客的外观,但学习这些总是有利于你形成一个更强有力的基础。让我们来看看一些可能对初学者有益的CSS小技巧。

以前需要依靠大量的开发人员和程序员来帮助更新网站,即使只是小型的站点。由于CSS和它的灵活性,网站的前端风格便可以独立并远离功能实现的代码。现在,只要对CSS有一些基本的了解 ,即使是新手也可以轻易地更改网站的风格。
无论你是否有兴趣选择CSS创建自己的网站,或者仅仅是利用CSS调整、修饰你博客的外观,但学习这些总是有利于你形成一个更强有力的基础。让我们来看看一些可能对初学者有益的CSS小技巧。
相信每一个网站开发者,在发布任何网站、特性或者更新之前,都需要进行周密的测试。对于程序员、设计者或者商业用户来说,最糟糕的噩梦莫过于发布了一个不完善的站点,不仅伤害了用户还毁坏自己的声誉。那样带来的将是更多的工作、更多的头疼和利益的损失。幸运的是,有很多很好的工具来进行Web开发测试。这些工具可以测试从CSS验证到网站速度的一切。
1.定位的专业解释
(1)语法
position : static | absolute | fixed | relative
(2) 说明
从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(absolute),固定(fixed),相对定位(relative)。在这个教程里,我不逐一讲,只讲最常用也是最实用的两个定位方法:绝对定位(absolute)、相对定位(relative)。
PNG对比GIF和JPG有很多的优势,它的透明或半透明特性能很好的被应用到网页中。Firefox和Oprea对PNG的支持非常好,但是IE却“独特”了一把。当然IE7+已经支持PNG的这一特性。但是IE6还不行。网上有很多人用JS来实现IE6的PNG透明特性,其实都是通过修改CSS实现的。当然也可以用CSS直接实现,当然实现的时候需要css hack,对于Firefox、Opera可以直接在CSS中用常规方式部署PNG图片,下面讲在IE6下的实现:
使用到的是:IE5.5+的AlphaImageLoader滤镜
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
由于浏览器市场一直没有被一统天下,处于一个诸侯争霸,各显神通的时代。但是却苦了web页面开发者,对不同的浏览器用户群,需要周全的考虑到多种页面显示的差异性。CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。
常见兼容问题:
1、DOCTYPE 影响 CSS 处理
2、FF:div 设置 margin-left, margin-right 为 auto 时已经居中,IE 不行
3、FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5、FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式