font-size
% :基于负元素的font-size的百分比值
(body 默认font-size:16px)
单位 em rem
em : 基于自身元素的font-size;(不是父元素的!!!因为不设置font-size值时会继承父元素的font-size值所以人们产生了错觉);
“em”还可以指定到小数点后三位,比如“1.365em”rem: 基于html元素的font-size;
line-height:
单位:
%:不推荐 子元素会继承这个计算后的值,而忽略自身font-size
纯数字 :推荐,子元素会根据自身fon-size值缩放
px:多少就是多少
笔记从这里开始
代码可维护性的最大要素是尽量减少 改动时要编辑的地方
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb,#58a); border-radius: 4px;
Box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
当某些值相互依赖时,应该把 它们的相互关系用代码表达出来
font-size: 20px;
line-height: 1.5;
重新审视到底哪些效果应该跟着按钮一起放大,而哪些效果是保持不变的
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb,#58a); border-radius: .2em;
Box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
假设我们要创建一个红色的取消按钮,或者一个绿 色的确定按钮,该怎么做呢?眼下,我们可能需要覆盖四条声明(border- color、background、Box-shadow 和 text-shadow),而且还有另一大难题: 阴影部分还要根据这色调调深浅
只要把半透明的黑色或白色叠加在主色调上,即可产生主色调的亮 色和暗色变体,这样就能简单地化解这个难题了:
padding: .3em .8em;
border: 1px solid rgba(0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
Box-shadow: 0 .05em .25em rgba(0,.5); color: white;
text-shadow: 0 -.05em .05em rgba(0,.5);
font-size: 125%; line-height: 1.5;
现在我们只要覆盖 background-color 属性,就可以得到不同颜色版本 的按钮了
线性渐变
-webkit-linear-gradient([||,]?,[,]*)
-webkit-linear-graident(top,#000,#fff)