当前位置：文江博客文章教程详情

HTML 和 CSS 终极教程

发布于 2024-03-26 12:54:17 字数 26218 浏览 26 评论 0

MDN CSS reference

这是一份很健全的 css 参考指南，话不多说，五颗星强烈推荐。

Mastering CSS Principles: A Comprehensive Guide

涵盖一份 smashing magazine 的 css 知识点列表，里面内容的丰富性就不必细说了，光 smashing magazine 这个大名就可以代表其分量了。

基础汇集

CSS 选择器

选择器测试
（提供了一份浏览器支持 css1-3 选择器的测试，更高级的选择器可参考 CSS Selectors from CSS4 till CSS1 ）
CSS 选择器的优化

重置

说起 html&css，不得不说的是重置，之所以需要重置，是因为各个浏览器对于常用的标签元素可能带有一些基础的样式，而这些基础样式你不需要，所以就出现了重置。一般来说重置分为两种类型的重置，一种是归零式的，一种是修复式的。归零式的就是打倒再重建，比较有名的就是最简单的 *{margin:0;padding:0;} 和 Eric reset css 的；而修复式的目标则在比较各个浏览器样式的异同，对解析不太良好或和其他多数浏览器不一样的进行修复，以使各个浏览器表现一致，比较出名的就是 normalize 。目前来说 normalize 的占有率越来越大，它主要分为两个版本，一个是包括 ie6 的，一个是从 ie8 开始，抛弃了 ie6/7。

盒子模型

这个问题也经常烦死一帮新人，实际的情况就是设置的 width 到底包不包括 border 和 padding，拿目前的浏览器来说，ie6+和主流浏览器表现其实都一个样，那就是设置的 width 不包括 border 和 padding，也即是实际元素的宽度=width+border（左右）+padding（左右），高度也如此（ie 正确表现的前提就是你得有个正确的文档申明，不要激活了 ie 的怪异模式，不然那就对不起了）。当然其实折腾的不是上面那些，而是部分表单元素，它们依然沿用了从前的盒子模型，即设置的 width 包括了 border 和 padding。而从 ie8+开始，出现了一个新属性 box-sizing(border-box/padding-box/content-box)，让你明确的定义你需要的盒子模型。火狐和谷歌浏览器请添加各自的前缀-moz 和-webkit。既然涉及宽度高度什么的计算，顺便推荐一个 css3 新属性 calc

布局

布局从页面的可变化性来说可分为固定宽度布局，流体布局，弹性布局，响应式布局；从使用技术上来说可分为 position，float，em，负 margin，media queries，flex，columns，grids(目前只有 ie10 支持) 等。当然我们的页面千变万化，但是万变不离其宗，你掌握了核心技术，应付那些都是小 case 了。（弱弱的说下，其实 em，columns 和 grids 我也没用过。）

清除浮动

目前我们所说的清除浮动，大多数说的实际是清除子元素的浮动，所以严格来说应该是闭合浮动。在这里我们把两者分开，清除浮动指清除上级元素的浮动，对应的使用技术是 clear:both/left/right/none。而闭合子元素的浮动技术就比较多了，目前比较流行的是 clearfix 和 overflow 技术，另外还有 inline-block 技术和添加空标签技术等。

inline-block

不得不承认它是天使与魔鬼同体，介于 inline 和 block 之间，更像是他们两个合作的产物。它带来的最大问题就是间隙，很头疼的问题，以至于你想使用的时候还得考虑考虑是否值得。当然它的另一个问题就是该死的 ie6/7 问题，当块级元素设置为 inline-block 会有 bug，但这不是什么问题，一个万能的 display:inline-block; *display:inline; *zoom:1; 就解决了。

inline-block 前世今生

关于 table

table 还没死，很多时候你还需要它

A Complete Guide to the Table Element

通过切换 class 来改变显示

上面的固定宽度布局解决方案就运用了这种思路，不同的 class,#main 的宽度不同。用 class 来控制布局或显示是一种优秀的思想，可能我们更常见的就是 jquery 中的 toggleClass 了，这里我们一般用的还是属于初级的，如果思维再扩散点，你就会发现它可以应用的场景越多。

Adaptable view – how do they do it?

图片替换文字

在还没有出现 css3 的时代，图片替换文字那绝对的必备技巧之一，其实哪怕 css3 横行的现在，这个技术也仍然不会过时。这个技术最流行的莫过于 text-indent:-9999px; ,当然随着技术的更新，又出现了新的方法，如 css3 版的 :before 方法。

滑动门

这个技术在 css3 没有出现前，常用来切各种按钮。它的技术关键在于两个标签的背景叠加，那样就刚好是我们需要的效果。其中的背景图我们可以根据实际情况切成两张图甚至是一张图。

滑动门那些事

等高设计

我这里说的等高把布局的等高和我们平常要处理多列的等高放在一起。等高分为模拟等高，实际等高和动态计算三种情况。模拟等高适用于布局，使用背景色或背景图片平铺，来达到视觉上的等高；实际等高最简单的就是一种设置统一的高度的了，当然这个对于动态的内容来说是不适合的，但对于一些小高度的列表，你如果知道了其中的最大高度还是很合适的，而另一种就是 inline-block 技术了；至于动态计算那就非 js 莫属了。多列等高见下一个项目列表设计

八种创建等高列布局

项目列表设计

项目列表设计总的来说包括四种，第一种是左右边缘没有间隔，第二种是上下左右间隔相等，第三种是各个 item 等高，第四种是以某种规律特殊化某个，如谷歌的插件列表

项目列表解决方案

图文混排

图文混排的技术之多和图片替换文字的有得一拼了。总的来说图文混排包括最简单的给 img 设置一个 float 就 ok 的；也包括最常见的图片在左文字在右互不干扰的；当然还有复杂点的可以嵌套的如评论模块；最后就是现在不常见的奇偶行图文互换。

ul/ol

关于 ul/ol 的重要性不言而喻，看看各大网站的源码就知道了。它最常见的地方就是导航，信息列表了。鉴于各个浏览器默认样式或 margin 或 padding，我们一般在重置的时候都是重置为 0；然后对于标题类的信息列表我们一般会加个小的 icon 作为背景以修饰，而作为非主导航的情况下可能还会加上不同 icon 标识，以有一个加强可辨别认识，也使网站增色不少；至于滚动图片那又是 ul 的一大经典应用；当然一些项目列表什么的就属于另一方面的更复杂点的应用了。

水平垂直居中

关于这个问题我只说一点，你就知道它是多么的闹心了：它经常出现在各大前端招聘的试题上啊。首先说下水平居中，这个比较好办，目前常用的有 text-align:center; , margin-left:auto;margin-right:auto; 还有相对/绝对元素的 left:50%;margin-left:-width ，除了 text-align 没有宽度限制，其余的对不起，都需要明确自己的宽度。再说下垂直居中，这个分为单行文字和其他，单行文字设置 line-height 等于父元素的 height 就垂直居中了，当然对于知道自己高度的还是比较好搞定的，用相对/绝对元素的 top:50%;margin-top:-height ，对于未知高度的那就比较复杂了。所有这些归到最后就是知道自己宽度高度的水平垂直居中都是纸老虎，真正要考的一般就是最变态的未知宽高的水平垂直居中啊。这要是 css3 没有出现，那这些未知宽度可得纠结死了，而现在 flex 这个为布局而生的属性，一句 margin:auto 就可以轻松解决了；当然 tranform 中的 translate 的 50%也是很好用的，它的 50%是自己的一半，而 left，top 之类的 50%是它的父元素的一半。总之涉及到的技术有 Position, Negative Margins, Transforms, Table-Cell, Inline-Block, Flexbox 等

tabs 选项卡设计

我们这里把选项卡大体分为两类，一种是有 border-bottom 的，我们称为线条边框类型，一种是纯颜色色块类的，我们称为颜色块类型。一般来说线条边框的比颜色块的要复杂点，因为要考虑到下面的那个 border-bottom。然后当为线条框架的时候，有些 tabs 是紧凑的，并且所有的 tabs 标题宽度加起来刚好与下面的内容的宽度一致，那么这个时候的 border-bottom 还是很简单的，直接就是 tabs 标题的 border-bottom 就可以了，但是当总的标题宽度小于下面内容的宽度，又或者标题之间有间隔，那么这个时候的 border-bottom 要处理就得用点手段了

透明度使用

透明度分为 opacity 和 rgba/,他们的区别在于：Opacity 的透明属于全层透明，子元素中无法覆写；而 Rgba 透明用于 color 或 background-color 的透明，不影响到子元素

大背景设计

大背景一般需要考虑的是如何兼容到超大屏幕。所以一般切大背景的时候得考虑在背景不够的地方应该使用一个渐变的背景或纯色来填充，以达到柔和过度的效果，而不是愣生生的感觉。

如何用 CSS 实现大背景样式

整块可点击设计

本来这个不是什么问题，把所有的标签放在 a 里面就可以点击了。但是正是因为如此，a 里面嵌套了 p，div 等块级元素而变得不合理。所以如果是简单的文字信息，可以 a 里面嵌套 strong,span 等，如果是复杂点的，请不要把所有的元素用 a 包裹起来，而是使用 js 代码来变相解决这个问题:当整个区块点击时，找到里面 a 元素的 href 值，然后设置 window.location 等于这个 href 值。（对于 html5 来说 a 标签是可以嵌套块级元素的。）

Web 设计师值得收藏的 10 个 jQuery 特效(1) 第 6 个

border 变身

border 能做什么，也许超乎了你的想象。用 border 制作三角时，如果要兼容 ie6，注意设置透明部分的 border 的 style 为 dashed，然后加上 overflow:hidden; 。

面包屑设计

关于面包屑比较有意思的就是可以简单得不可思议，也可以复杂的让你吐血。其实这正是设计的魅力。至于简单的直接标签都不用加什么修饰的就不用说了，下面给了三个教程说下那些箭头设计的魅力。

星级评论设计

简单来说星级评论包括三种，一种是用来展示点评结果的，你不能参与点评；第二种是用来点评的，你可以投票，且只有你自己的投票结果；最后一种就是前两者结合起来，既展示前人点评的结果，而你又能参与点评的。第一种的最好解决，直接两层元素就可以搞定，一层负责灰色的背景图，一层负责显示红色的结果，结果的宽度用百分比表示；第二种的就需要好几个标签了，一颗星一个元素，因为需要做鼠标滑过的效果，滑过第几颗星，它前面所有的元素也得改变状态，所以得 js 配合添加 class；至于第三种就更复杂了，如果展示的时候加入了半颗星那就更复杂了，目前想到的是里面分为上面的两个部分，通过定位的方式默认显示的是点评结果，鼠标滑过显示可以点评的部分。
这方面的教程搜索了半天就找了一个第二种的。

星级评分系统

sticky footer

之所以叫 sticky footer 而不叫 fixed footer，是因为这个不是一般的用 fixed 来固定在视窗底部的，而是当页面不够一屏的时候，footer 在视窗的底部，而当其超过一屏，那么就在页面的底部而不是视窗的底部。当然要做这个效果对于整体的 html 结构是有要求的，里面必须用到的技术就是 min-height:100%。

说到 sticky，不得不说一个新的属性： position:sticky; 。它的表现类似 position:relative 和 position:fixed 的合体，在目标区域在屏幕中可见时，它的行为就像 position:relative ; 而当页面滚动超出目标区域时，它的表现就像 position:fixed ，它会固定在目标位置。(跟 sticky footer 没有任何关系，只是有一个 sticky 这个单词而已。)

z-index 层级

这个问题之所以被提到这里，还是因为 ie6/7，如果你直接从 ie8+开始做兼容那就飘过吧。说到底 ie6/7 的 z-index 是基于它的父元素来的，关于这个新手碰到最典型的问题就是二级菜单被下面的滚动图片给遮挡住了，而另一个就是 select 的层级问题。而抛出 z-index 可以改变层级外，其实 opacity 也可以改变层级，详见第二个链接。

生成内容(::before,::after,content)

主要是应用伪元素 ::before , ::after 的 content 生成内容。看起来很简单，却强大到令人发指，只能感叹想不到，万万想不到，包括下面的 @font-face 制作图标也是其强大的一面。

文字效果

关于文字的设计当然和阴影离不开，这个主要就是对 text-shadow 的应用了；其次应该是一些比较简单的渐变文字了，这个关键就在于使用蒙版遮罩，蒙版由半透明到纯透明，盖在文字的上面就是渐变文字了。在 css3 强大的今天图片的方法肯定是有历史的了，先进的谷歌浏览器就可以使用 mask 来搞定文字的渐变；最后不得不说的就是强大的 @font-face，话说这个创立之初是用来解决自定义字体的问题，可是现在被强悍的应用在 icon 了，多么美丽的神话。

图片美化

图片美化包括添加边框，圆角( border-radius )，阴影( box-shadow )，滤镜效果等。这里说下对于 ie6-8 不支持图片的圆角怎么去搞，主要的思路就是制作一个中间透明，四角为纯色的图片，然后遮盖在图片上，透明的部分就会显示出我们的图片。

图片优化

图片的优化包括裁减，压缩，合并等。裁减可以使用 css 的 clip 来搞，压缩那当然得使用工具了，至于合并那就得考虑 sprite 了，当然合并应该有原则，这样在后期维护的时候才不会使人疯狂。

纯 CSS 制作缩略图片
hhhhold-在线图片，可定义大小
在线图片压缩： jpegmini ， tinyPNG ， Smush.it
Encode Data URL
CSS Sprites: CSS 图片合并技术详解 - 中文版， The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - 英文版

form 表单设计

form 表单一说起来一肚子苦水，不想说了。

form 解决方案，这是初版的，分析及设计思路说得还算明白，凑合着先看下，道理是一样的。下面两个是关于 html5 form 的知识
IE10 开发手册之 form
A Form of Madness

CSS3

css3 files

这是一套非常棒的 css3 学习教程，包括了 animateion，background，border，color，font，gradient，shadow，text，transform，transition 等。

transform, transition

flex

flex 标准版详解：英文版 - Dive into Flexbox ，中文版 - 深入了解 Flexbox 伸缩盒模型
flex 三大版本对比：英文版 - Designing CSS Layouts With Flexbox Is As Easy As Pie ，中文版 - Flexbox 制作 CSS 布局易如反掌
Using CSS flexible boxes

Animatable

一份动画属性参考

List of Pseudo-Elements to Style Form Controls

一份详细的表单伪元素说明

w3cplus css3 教程

CSS3 选择器

CSS3 属性详解

响应式

响应式涉及的知识点比较多，总的来说可以分为布局设计，图片视频设计，尺寸断点判断，导航设计，table 设计，图标应用，表单元素设计，js 交互设计，分辨率像素等。在输出内容方面，最简单的是全部输出然后通过 css 来控制是否显示，比较科学合理的是通过后端程序判断平台，来决定是否输出该区块内容。对于一些比较复杂大型的站点，建议 pc 和 tablet 可以公用一套 html 代码，而针对 mobile 则另外设计一套；对于一些比较简单的站点可以 pc，tablet，mobile 三者合一。

bug

IE haslayout

说实话真是不愿提及这个东西，但只要该死的 ie6/7 不消亡（ie8+没有了这个东西），这个东西你还不得不提。最常用的莫过于 *zoom:1; ,这可是解决 ie6 bug 的杀手级方案。这东西一两句话也说不明白，具体请看下面链接的文章吧。

IE hasLayout 的问题总结 - 中文版， IE hasLayout - 英文版

IE bug

知道怎么去打 ie 的 bug，也是一位合格的 csser 必备的。但是总有人把 bug 运用的“淋漓尽致”，于是乎 ie6/7 bug 满天飞，超乎想象，但是不服不信，人家切出来的图跟设计图是相当的符合，所以照样过关。在他们眼中没有标准，他们的方法是见招拆招。对此，这篇教程只想说，bug 是有限的，而且如果你对技术了解更多的话，bug 就越少，甚至于直接绕过部分 bug。当然在修炼好自己的同时，我们也希望 ie6/7 加速退亡，那样我们会轻松很多。