用a标签制作一个按钮为主线，然后围绕这个按钮，做一些效果样式等操作。附件中可以下载CSS参考手册。
一、工具
工欲善其事必先利其器。我们首先需要准备好调试工具，这里我就简单介绍几种，firefox、chrome以及IE。
1.firefox
我们用到的是firebug，非常好用，工具-》附加组件。这里有一篇firebug教程。
安装好后按F12就可以直接调试了：
2.chrome
chrome的调试工具默认就是自带的，也是按F12就可以出来，但这个调试工具还带了个手机的模拟器，可以用来调试手机页面。
3.IE
IE有许多版本，而一台电脑上面默认安装的只能是一个版本的IE，这个时候就需要IETester来协助了，它能模拟多个版本的IE，不过后面我在调试的时候发现，CSS模拟的还不错，但JS有时候模拟的就不对，所以用这个调试CSS还可以，以后如果要调试JS的话，就自己装个虚拟机来调试吧。里面也带了个调试工具，但不是很好用。
IE8以后，浏览器也会自带调试工具，那个就好用很多了，也能实时修改CSS属性。
4.fiddler
它是一个非常强大的http(s)协议分析工具。如果你需要查看在手机上打开页面时，查看所产生的http请求，那么用这个工具是不错的选择，《使用Fiddler调试手机页面请求 》介绍配置fiddler，让其也能监测手机的请求。
二、基础CSS
先推荐几个以后常用的网站：
- 可以在caniuse上查询各种兼容性。
- html5test可以检测当前访问的浏览器对HTML5特性的支持程度。
- html5readiness以时间纬度展示所有浏览器HTML5特性的可用性。
- HTML5 Boilerplate，最流行的web开发前端模版
- Mozilla开发者网络(MDN)，在这里能够查到最新最全的资料，有些页面是英文的
1.不添加任何样式，朴素的效果如下：
蓝色，下划线，这些都是a标签默认的样式，很多情况下，标签的默认样式是需要重置的。有网友整理了浏览器标签的默认样式，《HTML标签CSS属性默认值汇总》。在我写的另外一篇文章中，展示了一段重置的CSS代码，查看reset.css。
一则，重置后浏览器的兼容性能更好
二来，有些默认属性是很多余的，例如下面的这个下划线，很多地方都不需要这个样式
HTML代码如下，标签都会自己的特有属性，例如下面的href。
<a href="#" title="点击按钮">按钮</a>
在w3school网站上可以看到各个标签的详细属性，有些属性是支持HTML5的浏览器才能使用的，例如下图所示，有个
icon的就是HTML5独有的。
2.去除默认样式，改变字体颜色大小，背景等
CSS代码如下：
.btn{
text-decoration:none;
color:#FFF;
font-size:20px;
line-height:30px;
background-color:#27a9e3
}
几个常用属性，奥妙无穷。从CSS参考手册中可以查看到：
color可以有多种指定方式：Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent。
font-size的单位可以是px、em、pt或者是rem。这里《CSS中强大的EM》比较详细的介绍了em。
background在CSS3中又多了几个新属性background-clip、background-size等
一个简单属性的赋值可以是多种的，不同场合用哪种方式比较合适，这是需要调试的，这里只做一个简单的抛砖引玉，有兴趣的可以去按需深入研究下。
3.让按钮更美观——补白
上面那张图中的按钮比较丑，字跟边都帖在一起啦。得内补白一下。
.btn2{
padding:10px
}
效果如下所示，虽然只加了一个属性，但是效果明显要好很多了。
补白是在页面布局中经常用到的属性，分为外补白【margin】和内补白【padding】。
下面这张图我是加了margin的，上下左右四个方向都加了，但是上面的外边距在我的firefox中失效了。
这里就要提一下，一些属性在某些场合是失效的，有些情况是不同内核的浏览器显示的不一样，有些可以，有些不行；有些情况是所有浏览器都不行。
这种时候就要通过搜索引擎来搜索了，网上肯定有很多人碰到过相关的问题。
.btn2{
padding:10px;
margin:10px
}
网上找了张比较立体感的示意图：
这里顺便提下CSS hack技术：
如果你仅仅是要一种浏览器显示正确，那可以完全忽略这段介绍，如果不是，那你可以阅读下。
由 于不同厂商的流览器或某浏览器的不同版本（如IE6- IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现 效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
这是一种比较次的方法，只有在万不得已的情况下才使用。很多时候是可以避免出现这种情况的。
有网友整理了一套hack方法——《CSS hack方式一览》。
从statcounter上获取到的最新浏览器统计记录：
4.来个两行按钮，每行显示三个按钮
.btn3{
padding:10px;
margin:10px
}
的确是两行，三列了，但是明明加了margin了，上下还是贴在一起了。这里就涉及到一个知识点。
html中有块级元素与行内元素之分，a标签默认是行内元素，而行内元素的一些特性导致了上面的结果。
这里有篇介绍两者区别的文章《行内元素与块级元素的区别和常用标签》
我先简单的介绍下两者的特点：
1.块级元素【Block-level element 】
块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。
2.内联元素【Inline element】
文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。
1）通过属性display可以将元素变成块级、内联或内联块元素等。这三个比较常用，它还有好几个值可以选择。
.btn3{
padding:10px;
margin:10px;
display:inline-block
}
立刻立竿见影，好看了许多。
2）页面在一行上面，经常是用float浮动来做的
.btn3{
padding:10px;
margin:10px;
float:left
}
与上面的比起来，有个细微的差别，那就是按钮之间的右艰巨小了一点。
这个是由于inline-block造成的，因为inline-block元素之间是有间隙的，有些布局的情况是不允许有间隙的，宽度间距都是算好的，突然来个不能计算的间隙很容易让布局变形。网上有很多具体的解决方法，例如《inline-block元素间间隙产生及去除详解》
float浮动的用法也是很有讲究的，我这里只是做个简单展示，很多情况下，浮动完后是需要清除的。清除的方法也有很多，网上也是一大堆，例如《些年我们一起清除过的浮动》
5.把按钮放到靠左30px，离上面40px的位置
果断用position定位，这东西有些地方妙用一下，还是很有用处的。
首先要将按钮的父标签设置为position:relative，然后a标签设置为position:absolute。
网上有个关于position的系列文章《CSS 相对|绝对(relative/absolute)定位系列》可以参考下。
.container2{
position:relative;
height:100px
}
.btn4{
position:absolute;
top:40px;
left:30px;
padding:10px;
}
下面的图片布局样式很普通，左边一张图，右边一些说明文字。
我以前布局的话就会用float浮动，给图片和文子两块区域设置为float:left来布局，最后还得做清除浮动。
现在的话我可以用position定位，把图片设置为position:absolute，这样右边的文字区域就能简单的用margin-left来指定位置，避免使用浮动。
顺带说下，下图中的旅行两个字也是用定位来设置的。
6.给按钮做个移上去变色的效果
这里涉及到CSS选择器的概念，将使用:hover来达到效果。
.btn5:hover{
background-color:#faa732
}
我以前写过一篇随笔，记录了这些选择器，《CSS选择器的一些记录》。
顺带说下，你可以在css3.info网站上面可以测试当前浏览器对CSS选择器的兼容程度。测试不包括:hover，:active， :focus，:selection，:visited，:link。
fortawesome是一个字体库，里面的CSS代码中就大量用了选择器。例如下面的那个手指icon，CSS我只摘取了部分。
.icon-hand-down:before {
content: "\f0a7";
}
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none !important;
background-position: 0% 0%;
background-repeat: repeat;
}
:before与:after这两个选择器，使用的场景也非常多。在网上搜索下，会有一大堆相关资料，挑自己感兴趣的研究吧。
三、CSS3与HTML5
接下来讲一些CSS3与HTML5的特性，最近这个东西特别的火。
1.给按钮加个圆角
如果是以前，那就得切图啦，切几个圆角，然后贴在指定的位置，特费神费事。但自从有了border-radius，让这一切变的so easy。
.btn6{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:10px;
}
-webkit与-moz这是私有前缀，早期的firefox或chrome浏览器只认这些私有前缀的CSS3属性。
-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer
2.给按钮加个阴影
丑是丑了点，这里只做个演示，给个思路。
.btn7{
-webkit-box-shadow: 0 0 10px 10px #000000;
box-shadow: 0 0 10px 10px #000000;
padding:10px;
}
现在网上有很多在线调试CSS3代码的小工具，这个就是在线调试的。例如CSS3 Generator。
这里顺带便再分享几个在线调试工具：
- Gradients、Shadows、CSS Transforms、CSS Text Stroke
- Ultimate CSS Gradient Generator
- 国外的fontawesome，国内的iconfont
3.来个高大上的动画按钮
以前记录过《CSS3动画的属性》，现在搬出来看看，参考一下。
随便搞了个效果，代码就一大堆。移到中间的时候就变大，移到两边再恢复。
.animation1{
-moz-animation-duration: 3s;
-moz-animation-name: slidein;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-duration: 3s;
-o-animation-name: slidein;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-ms-animation-duration: 3s;
-ms-animation-name: slidein;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate;
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slidein {
from {margin-left:50%}
50% {font-size: 300%;margin-left: 25%;width: 150%;}
to {margin-left:0;}
}
@-moz-keyframes slidein {
from {margin-left:50%}
50% {font-size: 300%;margin-left: 25%;width: 150%;}
to {margin-left:0;}
}
@-webkit-keyframes slidein {
from {margin-left:50%}
50% {font-size: 300%;margin-left: 25%;width: 150%;}
to {margin-left:0;}
}
@-o-keyframes slidein {
from {margin-left:50%}
50% {font-size: 300%;margin-left: 25%;width: 150%;}
to {margin-left:0;}
@-ms-keyframes slidein {
from {margin-left:50%}
50% {font-size: 300%;margin-left: 25%;width: 150%;}
to {margin-left:0;}
}
4.现在来说说HTML5
这里就先不做演示了，就点一下。我现在也正在研究那些特性。
1）canvas 元素
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。使用 HTML5 canvas 绘制精美的图形。
例如下面这个，可以用鼠标来拖放。模拟衣服撕扯动画，这效果已经亮瞎了我的眼。
2）数据存储
像Cookie一样，这些数据不会因为你打开新网站，刷新页面，乃至关闭你的浏览器而消失。
而与Cookie不同的时，这些数据不会每次随着HTTP请求被发送到服务器端(当然如果你需要这么做，你可以自己编程实现 ）
因为这是HTML5规范的一部分，这一接口会被浏览器原生支持，不用依赖任何第三方插件。
在caniuse网站上查看local storage兼容性。
3）HTML5离线应用
使用它的本地缓存机制可以将应用所需的资源文件都缓存到本地，从而实现应用的离线使用。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
4）WebSocket
HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
因为 WebSocket 连接本质上就是一个 TCP 连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。
附件下载：
posted on
