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

时间 2019-11-13

标签学无止境 css xhtml+css xhtml 技巧教程资源大全栏目 CSS 繁體版

原文原文链接

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

一，Web 标准

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

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

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标准的东西吧，有助于你了解这个东西。java

一些有Web标准的文章

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

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

二， CSS布局和定位

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

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

水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页无论在各类宽屏分辨率下显得协调美观。好比帕兰映像的网页主体是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/八、Webkit等都已经部分地支持CSS3。所以提早了解CSS3是十分必要的。下面提供的20个学习资源中，多数是单篇的文章和访谈记录等，可见这方面的资源仍是比较少的，做为一个真正的CSS开发者，走在别人的前面提早了解、运用、研究CSS3也是十分必要的。

CSS3.0相关资源和参考手册收集整理

一些有关CSS 3技巧和教程的资源整理。

CSS 3入门

若是你关注CSS，那么你必定据说过CSS3,它是本应该在几年前问世的下一代样式表语言。是的，CSS 3样式文档至今尚未最终完成。若是你已经急不可待了，那么你也没必要感到孤独。虽然这它尚未最终定型可是不少浏览器厂商已经开始支持其中的一些新特性了。

20个对学习CSS3大有裨益的资源

本文列出了20个对你学习CSS3大有帮助的网站资源。

使用CSS3和RGBa建立超酷的按钮

不须要图片，只须要充分利用CSS3的圆角、盒子阴影和文字阴影效果，同时使用RGBa色彩，就能实现很是漂亮、很是流行的文字阴影圆角按钮效果。

你应当了解的5个CSS3新技术 | 彬Go

CSS是众所周知且应用普遍的网站样式语言，在它的版本三(CSS3)计划中，新增了一些可以节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们仍是必须且颇有趣味性的。本文向你们展现CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

25个高级CSS技巧教程

能用CSS实现的效果，就尽可能不要使用JS。但若是使用CSS须要很繁琐的代码，那用CSS也不见得是好事儿。这里是25个高级CSS技巧，有助于你提升你的CSS水平，让你对CSS的掌握更上一个台阶。