css揭秘笔记（一）

@H_301_0@font-size

% ：基于负元素的font-size的百分比值
（body 默认font-size:16px）

@H_301_0@单位 em rem

em : 基于自身元素的font-size;（不是父元素的！！！因为不设置font-size值时会继承父元素的font-size值所以人们产生了错觉）;
“em”还可以指定到小数点后三位，比如“1.365em”
rem: 基于html元素的font-size;

@H_301_0@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)

css揭秘笔记（一）

猜你在找的程序笔记相关文章