css揭秘笔记（一）

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)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!