CSS基础知识

今天在饥人谷学习了css基础知识，结合维基百科，写下此博客跟大家分享，如有错误之处，欢迎指正（没有奖励）。

目录：

• css历史
• 体系化学习

---

css历史

css：中文为层叠样式表（又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。当前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。1994年，哈肯·维姆·莱提出了CSS的最初建议。

层叠:

• 样式层叠：可以多次对同一选择器进行样式声明。
• 选择器层叠：可以用不同选择器对同一个元素进行样式声明。
• 文件层叠：可以用多个文件进行层叠。

note：这些特性使得css极度灵活，也为css被吐槽留下了隐患。

目前CSS2.1为使用最广泛的版本（IE支持），CSS3为最新版本（IE8部分支持）。

使用caniuse.com检查各种浏览器支持哪些特性。

---

体系化学习

怎样学习一门语言：

• 语法（怎样写代码）

  • 语法1：样式语法

    选择器{
      属性名:属性值;
      /*注释*/
     }
    

  Notes：

  1. 所有符号都是英文符号。
  2. 区分大小写。
  3. 没有//注释
  4. 最后一个分号可省略，但建议不要省略。
  5. 任何一个地方写错了，都不会报错，浏览器会忽略。
  6. 若想知道写错，

  • 语法2:@语法

     @charset "UTF-8";
     @import url(css路径);
     @media (min-width: 100px)and (max-width:200px){
        语法1
        }
    

  Notes:

  1. @charset必须放在第一行。
  2. 前两个@语法都必须以;结尾。
  3. @media语法以后在讲。
  4. charset是字符集的意思，但UTF-8是字符编码encoding，为历史遗留问题。

• 调试（查找代码错误）

  1. https://jigsaw.w3.org/css-validator/将代码粘贴上去即可，不推荐

  2. vscode颜色报错，位置不大准。

  3. WebStorm看颜色，位置准确。

  4. Chrome开发者工具看警告。

      1. 找到标签
      2. 是否有选择器
      3. 样式是否被划掉
      4. 样式是否被警告
     

  5. Border调试法：

     1. 找到怀疑元素
     2. 给该元素加一个border
     3. 若border没生效，说明选择器错了或语法错了
     4. 若border生效了，看看边界是否符合预期
     5. bug解决了删除border
     

     note：

     CSS的border调试法相当于JS的log调试法。

• 查资料

  1. mdn
  2. css tricks
  3. 张鑫旭博客

• 标准制定者w3c

  1. all css specifications
  2. css2.1中文版

如何学

• 抄文档，抄老师
• 在自己电脑上运行
• 加入自己的想法，重新运行并调试。