学无止境的CSS(xHTML+CSS技巧教程资源大全)

2023-02-22 07:55:58

本文里面收集一些有关CSS的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。

一，Web 标准

要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道Web标准是个啥玩意儿)。应该说，你是否学Web标准，跟你是否能学会CSS没有什么关系，但跟你能写出什么样的CSS，以及XHTML或其它代码，跟你能做出什么质量的网页有很大的关系。

其实我自己对Web标准也不甚了解，尽管我看过不少关于Web标准的文章和书。(我总是这样，对学术性的概念名词永远都似懂非懂的)，所以每次谈到Web标准，我头里就会有一堆问号:

Web标准真的有利于SEO吗？ Web标准的动机难道就是SEO? 出于SEO动机的Web标准是否会失去一些Web标准真正的本质?
如何才算符合Web标准? 仅仅是通过W3C的代码验证，你就觉得自己符合Web标准了?
Web标准是为了提升用户体验，而一个对用户友好的网站其代码应该写得非常简洁实用，而一个使用简洁实用代码的网站是有利于SEO的。这个逻辑似乎合情合理，但在实际运用中却又总有这样那样的冲突…
…

我们应该把Web标准看成一份”道德约束”还是”法律强制”呢?

我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。

你已经花了50%的时间完成了一个项目的90%，如果余下的10%又需要你花50%的时间去弄，是否值得? 尤其是这种情况发生在: 你的90%已可以让用户在各个浏览器下正可常浏览，而那10%仅仅是为了通过W3C代码验证。这时候你或许该考虑下，你千辛万苦的通过W3C验证是为了符合Web标准还是为了满足自己小小的虚荣心?
特喜欢跟别人争论”DIV+CSS”的说法是错误的，应该是”XHTML+CSS”，你有没有做过类似这样的事儿? 还打心里为自己科学家般严谨的态度而感到自豪。但事实上，叫”DIV+CSS”的人，没有哪个傻到整个页面的元素都使用DIV。这就像当你说”吃饭”时，你也不光是吃白花花的大米。

呃，本来只是想随便写点文章引语，闲扯太多了，还是看看下面这些有关Web标准的东西吧，有助于你了解这个东西。

一些有Web标准的文章

验证HTML，CSS及RSS源的14个免费工具

这篇译文里介绍了14个工具可以方便的验证你的CSS以及HTML和RSS源。你别看我上面说了一堆看似反验证的话，其实我也挺在乎这个东西的，我也每次都玩验证，只是当碰到很难解决无关痛痒的东西时，我不会为难自己。我只是想告诉你，别对自己太苛求了，别让自己太累。

二， CSS布局和定位

我不是什么Web前端观察家，我个人发现的两个可能并不正确的网页布局趋势是: 两栏和水平条。

说两栏是趋势似乎有点唬烂，两栏本身就是最基本最常用的布局，但之所以成为更加流行的网页设计趋势得益于Web 2.0的流行，你很少会看到一个Web 2.0网站把自己做成门户般的杂志型布局，大家都力求简洁。当然，在国内，还是有很大一部份个人站长和企业喜欢把自己的网站挤得密密麻麻，Magazine的非常厉害。这恐怕也不能说谁前卫谁落后，好的Magazine布局确实能让人产生一个感觉或错觉: 这个网站很专业，做的很大，很优。我个人是希望简洁两栏真的能成为趋势，每次进入门户型布局的非门户级网站时，就感觉自己掉进了一堆链接的海洋里。

水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页不管在各种宽屏分辨率下显得协调美观。比如帕兰映像的网页主体是960像素固定宽度，我的电脑分辨率是1440*990像素，如果没有水平条，总感觉网页太空，尽管留白也是一种设计技巧，但并不是这样的留白。尽管还有另一种解决方案是自适应宽度，但我个人觉得，对于大多数网站来说，自适应宽度并不是一个好方法，它解决了宽度的问题，却又让网页产生了很大其它破坏视觉的问题。

还是让我们看一些关于CSS布局的技巧吧。

15款网格布局生成器

网格布局的页面能给人简洁明快、层次分明的感觉。之前帕兰映像里面也介绍过一些网格布局相关的文章: 探索极简派设计/Minimalist Design，32个网格布局的网页设计欣赏和960网格系统等。如果你也想制作一个网格布局，可以看看这些在线生成器。

9个永不过时的CSS 3栏布局技巧

我喜欢3栏布局的网页设计，尽管时下正火的Web2.0似乎很少采用3栏布局。但没关系，我们是非非非主流。但是3栏布局相对来说就比较复杂，有些难以控制，Noupe发表一篇文章，收集了9个号称永不过时的三栏布局设计技巧(9 Timeless 3 Column Layout Techniques)。

五种方法让CSS实现垂直居中

使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。本文里介绍了使对象垂直集中的5种不同方法，以及它们各自的优缺点。

CSS布局口诀

网络上有朋友把CSS BUG编成了顺口溜了！是否有效不好说，但至少是蛮有趣的。

使用CSS创建三列固定布局结构

讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。

使用CSS完美实现垂直居中的方法

使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是必须掌握的技巧之一，一些互联网公司面试题中也会出现这类题目。本文分享一个由aka Yuh?发明完美通过CSS实现垂直居中的方法。

渐进增强式布局探讨（上）、（下）

经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。

CSS布局大全

这份列表收集一些比较优秀的CSS布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。 Layout Gala- 这个网站收集了40多个专业的CSS布局，每个布局都通过了CSS和HTML验证，且不需要Hack，兼容各大主流浏览器。

43个PSD转xHTML+CSS网页布局及导航教程

推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程，在国外也可以叫做PSD2XHTML。如果你是以为网页设计师，可能会对将自己的效果图实现成语义化的xHTML页面感到头痛，还有一些CSS初学者对于xHTML+CSS处于懵懂状态，希望大家通过这43 个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。

CSS Position

这篇文章详细介绍了CSS定位属性Position的各个值的用法，和一些实例说明，以及相关的绝对定位布局和清除浮动列等CSS技巧。

详解css定位与定位应用

定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。

跨浏览器的CSS固定定位{position:fixed}

使用Position:fixed属性可以实现固定元素于窗口某位置，比如帕兰映像的头部工具栏和底部工具栏就是使用这种效果, 但IE6并不支持这个属性，帕兰映像里使用的方法是利用IE的条件注释让IE6下非固定，显示不同样式。如果你想实现高度统一，可以看看这篇文章教你如何实现。

32个网格布局的网页设计欣赏

这些设计里面，有紧凑型的网格布局设计，同样也有使用大量空白间距的网格布局。

三，CSS Sprites(CSS图片合并技术)

最初知道CSS Sprites的时候，大家都还不知道该如何恰当的翻译这个技术名词，有人称其为CSS妖精，CSS小鬼等，听上去是蛮可爱蛮特别的，但会让人纳闷这倒底是个什么东西。最近发现大家开始把这项CSS技术称为图片合并，感谢还是蛮贴切的。

CSS Sprites目前已经成为非常流行的CSS技术应用，你随便到一个经常逛的著名网站看看，会发现大家都在使用这项技术，比如淘宝、谷歌、豆瓣、土豆等等等等。简单的说，CSS Sprites主要就是提高网页载入速度和防止图片加载延迟，这对于大流量的网站来说是非常重要的。

学习CSS Sprites是件很简单的事情，比较麻烦的是合并图片和写CSS时的定位，更麻烦的后期的维护管理。但不管怎样，做为一项有效实用的CSS技术来说，如果你是一个Web前端开发者，你很有必要掌握这项小技术。

CSS Sprites的一些技巧 | 前端观察

本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

CSS 前景图片合并技术 | 芒果

不只背景图片可以合并，前景图片同样可以合并，本文介绍了Google网页里是如何对两个元素进行定位和溢出截断，来实现前景的图片合并。

P.S 其实才学习CSS Sprites的时候，就想着前景图片也一定是可以合并的，可自己却又一下子想不出来什么方法。看过这篇文章后，才发现是如此的简单，不禁为自己的智商挫败了好几秒

CSS Sprites(CSS图像拼合技术)教程、工具集合

非常非常全面的一篇文章，详细介绍了什么是CSS Sprites, 哪些著名网站使用了CSS Sprites，使用更好的使用CSS Sprites等等。

CSS Sprites + 圆角

我知道现在有成千上万个关于用CSS处理圆角的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

CSS Sprites, 图片切割与优化技术

这篇文章不是告诉你什么是CSS Spries，也不是告诉你如何使用CSS Sprites，而是 —— 为什么要使用CSS Sprites?

四，CSS优化

我个人对CSS优化的看法是: 在语义化的前提下，对代码进行精简。如果是大型网站，则又考虑CSS的结构化和模块化。所以CSS的优化就包含了命名规范、CSS Reset、语义化、结构化和模块化等等。

至于CSS与SEO一说，倒还真不敢苟同。不过，不管它们是否有关联，你都应该尽量去学着写出一份拥有良好语义并尽量简洁高效的CSS样式表。

8款在线CSS优化工具/组织和压缩CSS

CSS的优化通常包括两方面: 格式化CSS和精简CSS。精简CSS的办法是把具有相同属性的元素合并在一起，但这会降低代码的可读性，使代码的后期维护很麻烦，稍不注意就出错。格式化CSS一般就是多行模式或单行模式的选择。本文里面介绍了8款工具能让你方便的优化和格式化CSS的在线工具。

CSS代码精简工具和技巧

管通常一个CSS文件占用不了什么带宽, 但之于网页设计, 在不影响整个网页构架与功能的情况下, 网页文件越小越好. 因为更小的网页文件有利于缩短页面的载入时间. 更重要的是, 相同的页面排版和结构, 能用最简洁的代码来实现, 也应该是每个网页设计师对自己的一种要求.

17款加速效率的CSS工具

作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。

10个CSS简写技巧让你永远受用

CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

注重SEO搜索优化的div+css命名规则 | 知更鸟

CSS的命名规则入手会有意想不到的收获，最基础的就是最有效的。下面从前端设计的角度整理的DIV+CSS的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做你懂，搜索引擎也懂，何乐而不为呢。

W eb UI 设计(网页设计)命名规范

Web UI设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。

目前比较全的CSS重设(reset)方法总结

收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

CSS代码命名惯例语义化的方法

CSS代码的命名惯例一直是大家热门讨论的话题。本文通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。

模块化 CSS – 更有效地管理CSS | 幸福收藏夹

关于如何模块化CSS来实现更有效管理CSS的一些见解。

编写具有良好结构的CSS文件

这是一篇关于如何编写具有良好结构的CSS文件的帖子。我已经讲过CSS文件的代码可读性，但在讨论之后，一些更具体的要求被提出（主要是关于一些读者在管理具有大量布局元素CSS文件时的困难之处），所以我决定在这些案例中说明我自己的开发流程。

CSS中属性的书写顺序

我个人是觉得讨论CSS属性的书写顺序有点没意义，或者说即使有意义，一定要弄一套书写顺序去框住自己，实在又是一件自己为难自己的事儿。只要保证每一个属性和值都有用，当冲突时，该前的在前，该后的在后，也就好了。

五，CSS、IE和Hacks

想一想，我们花上一大把的时间去研究CSS Hack，研究IE为何如此的叛逆，做项目时可能就因为某个兼容问题给卡死个半天，这些时间如果用来学一门其它技术，可能早已修炼成该技术的专家了，并且是有用的。而精通Hacks并不是件值得骄傲的事情，而是所有开发者的无奈和悲哀。

没关系，我是这么安慰自己的:当年没有CSS的时候，多少站长花了比现在10倍甚至百倍的辛苦来建站和维护，当有CSS后，他们默默的选择过渡，而不是难过的去自杀。那个不是说了嘛，往往都是事情改变人，人改变不了事情，我们能做的，只能是适应每个过程。

10个实用但IE不支持的CSS属性

本文里面，介绍了10个很实但IE却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的，就更有针对性的去编写CSS和Hack。

修正IE6的bug的10个技巧

我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。

IE6 BUG大全

一个系列文章，包含了很多IE6 BUG的详细介绍，比如IE6中奇数宽度的BUG，PNG Alpha透明，像素BUG的实例，IE6文字溢出BUG等等。

目前非常全面的CSS兼容问题资料汇集

CSS兼容问题一直困扰着CSSer，面对各浏览器，往往感觉束手无策，愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任务。本文里面收集了非常详细的CSS兼容问题。

IE6方程式

Web 开发人员的使命就是面对不同的浏览器。自 Web 标准运动的诞生起，有个宿命从 Netscape Navigator 4 开始就被延续着，就是那些过时的浏览器拒绝死亡。它们顽强的存在，阻碍了现代标准的发展。而今天，这个宿命降落到了 Internet Explorer 6 身上。

六，你可能不知道的一些CSS技巧

就像本文开头所说的，CSS像魔方一样，有数不清的玩法，即使你是高手，永远都有你不了解的地方。有一些CSS技巧并不常用，一些CSS技巧完全是实验性质的，还有一些完全甚至是代码写错误打误撞搞出来的结果，比如本站之前介绍的CSS实现的标签云远视效果。

CSS content, counter-increment 和 counter-reset详解

你很可能没有听过上面这些CSS术语？事实上，我在这之前也不了解，但你可能看到过conten:after和content:before这样的 CSS代码，利用这样一些CSS属性可以实现内容的渲染。尽管这些属性存在浏览器兼容性和W3C验证的问题，但了解一下还是蛮有趣的。

使用CSS选择器创建个性化链接样式

zip文档链接前面显示显示一个zip文档图标，PDF则显示PDF图标，以此类推，听上去很酷吧。更酷的是，你只需要使用CSS而不是JS就能实现这项功能。这篇教程告诉你如何通过CSS的属性选择器来制作个性化链接样式。

CSS Sticky Footer: 完美的CSS绝对底部

当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。

没有div没有float没有clear没有hack的超强CSS布局

一个超强的CSS 布局，没有div，没有float, 没有clear, 没有hack，没有和你开玩笑，确实是一个CSS 布局。出自TJKDesign 之手，你可以查看DEMO 演示或阅读该布局设计师的文章说明。

一个关于透明度继承的问题

在前端开发的时候，经常用到板块背景的透明度，但当父层透明时，其中嵌套的子层也会继承其透明性。而这并不是我们想要的，比如，我们只是想要某个块状元素背景透明，而背景层里面的文本子层则非透明。

使用CSS为图片添加更多趣味的5种方法

为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行，但会是相当乏味且困难的长久工作。本文要介绍的CSS技巧将帮助你从痛苦中解脱出来！

101个CSS技术高级应用教程(上) (下)

一些比较高阶的CSS技术应用介绍，全学完这些教程，你的CSS水平将提高很多，废话

53种网页设计师必备的高级CSS技巧

都说了必备了，你不看看实在对不住自己千万的Web开发同胞了…

七, CSS 3

CSS2的出现让web顿时丰富起来，特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展，CSS2已经不能满足web开发的需求，例如属性选择、AJAX出现后与JS的交互等，因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段，但是其某些特征已经让人兴奋不已。

目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资源中，多数是单篇的文章和访谈记录等，可见这方面的资源还是比较少的，作为一个真正的CSS开发者，走在别人的前面提前了解、运用、研究CSS3也是十分必要的。