css揭秘第一章：引言，自己的学习笔记，如有错误请多指正

web标准

• w3c的标准是公开的，讨论被记录在这里 https://lists.w3.org/Archives/Public/www-style/

• 每周的会议会被记录在这里http://irc.w3.org/

• 一个规范的诞生：

  • 草案（ED）
  • 首个公开工作草案（FPWD）
  • 工作草案（WD）浏览器的早期实现是从这开始的
  • 候选推荐规范(CR)：相对稳定版本
  • 提名推荐对反（PR）：这是反映意见的最后机会
  • 正式推荐规范（PEC）
  • 推荐阅读https://fantasai.inkedblade.net/weblog/2011/inside-csswg/

• css是在不同的规范(模块)中的，每个模块都可以独立更新版本，css2.1有的就会被升级到3这个版本号，如果是首次出现，版本号就从1开始。

• css3只是一个非正式的集合

css编码技巧

减少代码重复

• 当某几个值相互依赖的时候，应该把相互关系表达出来

  font-size: 20px;
  line-height: 1.5;
  

  button {
      padding: .3em .8em;
      border: 1px solid #446d88;
      background: linear-gradient(#77a0bb, #58a);
      border-radius: .2em;
      box-shadow: 0 -.05em .05em #335166;
      font-size: 125%;
      line-height: 1.5;
  }
  /*像这样*/
  

  还要考虑，颜色，阴影的巧妙设置：

  把半透明的黑色和白色叠加在主色调上可以产生主色调的亮色和暗色变体。

  button {
      padding: .3em .8em;
      border: 1px solid rgba(0,0,0,0.1);
      background: #58a linear-gradient(hsla(0, 0%, 100%,.2),transparent);
      border-radius: .2em;
      box-shadow: 0 -.05em .25em rgba(0,0,0,0.5);
      font-size: 125%;
      line-height: 1.5;
      text-shadow: 0 -.05em 0.05em rgba(0,0,0,0.5);
  }
  /*这样只要覆盖背景颜色就可以得到不同颜色的版本了*/
  

响应式布局

媒体查询

一些避免不必要媒体查询的建议

• 用百分比代替固定长度
• 用max-width代替width
• 为替代元素（如img object， video，iframe）设置一个max-width，值是百分之百
• 行列式布局让视口的宽度决定列的数量，弹性盒布局，或者display：inline-block加上长队的文本折叠都可以做到

合理使用简写

background: pink;
background-color: pink;
/*这两句不一样*/

前者是简写，确保能得到pink色，但是用的后者，这个元素的背景可能是其他的，因为可能有background-image声明在器作用，使用展开式写法的时候，并不会清空所有相关的其他属性，会干扰想要达到的效果。

简写是一种防卫性编码的方式，可以抵御未来的风险，但是如果要明确的覆盖某个展开的属性并且保留其他相关样式，就要用展开式属性。、

如果只为某个属性提供一个值，那么它会扩散并应用到列表的每一项

    background:
url(https://dthezntil550i.cloudfront.net/1m/latest/1m1708120004417820003366503/1280_960/94433e26-1342-4f7c-ab5f-bc15594eb561.png) no-repeat top right / 2em 2em,
    url(https://dthezntil550i.cloudfront.net/1m/latest/1m1708120004417820003366503/1280_960/94433e26-1342-4f7c-ab5f-bc15594eb561.png) no-repeat bottom right / 2em 2em,
    url(https://dthezntil550i.cloudfront.net/1m/latest/1m1708120004417820003366503/1280_960/94433e26-1342-4f7c-ab5f-bc15594eb561.png) no-repeat bottom right left / 2em 2em;
/*repeat和size都被重复了三遍，可以用以下的写法*/
background: url(https://dthezntil550i.cloudfront.net/1m/latest/1m1708120004417820003366503/1280_960/94433e26-1342-4f7c-ab5f-bc15594eb561.png) top right ,
     url(https://dthezntil550i.cloudfront.net/1m/latest/1m1708120004417820003366503/1280_960/94433e26-1342-4f7c-ab5f-bc15594eb561.png) bottom right,
     url(https://dthezntil550i.cloudfront.net/1m/latest/1m1708120004417820003366503/1280_960/94433e26-1342-4f7c-ab5f-bc15594eb561.png) bottom right left;
    background-size: 2em 2em;
    background-repeat: no-repeat;

预处理器

不要滥用