学习CSS3BUTTON（一）

CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

引用方式：

<link rel="stylesheet" href="stylesheets/css3buttons.css" media="screen"> 。

每个样式表都需要包含相同的样式选择器，但是有不同的规则声明，以便适应不同的输出设备。

即此处的媒体描述符media，这是它的两个value，screen是为了输出到屏幕的，而print是为了适合打印的，他们是对立的关系。

第一段：

a.button, button {

display: inline-block;//参见:http://www.cnblogs.com/aomi/p/3459419.html

padding: 5px;//padding 简写属性在一个声明中设置所有内边距属性。http://www.w3school.com.cn/css/pr_padding.asp

font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;

font-size: 12px;

color: #3C3C3D;

text-shadow: 1px 1px 0 #FFFFFF;

background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat;

/*

这句是背景定义的缩写。
包括：
background-color:#4477aa;
background-img:url(arrow.gif);
background-report:no-report;
background-position:10px 10px;标准为先横坐标后纵坐标，部分浏览器识别 2维坐标当然只需要2个数值就可以了
background-position:bottom left;类似先纵坐标后横坐标的方式

 

*/

white-space: nowrap;

/*

取值：
normal  :　 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 
pre  :　 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象 
nowrap  :　 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性 

说明：
设置或检索对象内空格字符的处理方式。
空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体   来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。 
示例：
p { white-space: nowrap; }

*/

overflow: visible;

/*

根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。

 

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。

让我们分别看一下这几个值，并讨论一写共同用法和技巧。

http://www.qianduan.net/css-overflow-property.html

*/

 

cursor: pointer;//http://www.cnblogs.com/aomi/p/3459769.html

text-decoration: none;

/*

可能的值

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

*/

border: 1px solid #CACACA;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

/*-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；
-moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。
在这两个属性有值的时候，去掉哪个属性，对用他们做内核的浏览器就有影响，如果没值的话，就没影响，这两个属性和，IE，和360没关系。不删除的话影响微乎其微.

*/

border-radius: 2px;//向 div 元素添加圆角边框：

outline: none;

/*

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

• outline-color
• outline-style
• outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

*/

position: relative;

zoom: 1;

line-height: 1.11;

*display: inline;

*vertical-align: middle;

}