5.1 - 如何体系化学习 CSS

学会语法（如何写代码）

语法1：样式语法

选择器 {
  属性名：属性值；
  /*注释*/
}

• 注意事项

  • 所有符号都是英文符号，如果写错了，浏览器会警告
  • 区分大小写，a 和 A 是不同的东西
  • 没有 // 注释
  • 最后一个分号可以省略，但是建议不哟啊省略
  • 任何地方写错了，都不会报错，浏览器会直接忽略

    语法2：at 语法

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

• 注意事项

  • @charset 必须放在第一行
  • 前两个 at 语法必须以分号；结尾
  • @media 语法会单独教学
  • charset 是字符集的意思，但 UTF-8 是字符编码

    如何调试 CSS（怎么知道自己的代码对还是错？）？

    调试方法

• 使用W3C 验证器（在线 / 命令行工具）

• 使用VSCode 或 WebStorm 看颜色

• 使用开发者工具看警告

  如何使用开发者工具

• 找到你脑中的标签

• 看它是否有选择器
• 看它的样式是否被划掉

• 看它的样式是否有警告

  Border 调试法

  步骤

• 怀疑某个元素有问题

• 就给这个元素加 border
• border 没出现？说明选择器错了或者语法错了
• border 出现了？看看边界是否符合预期
• bug 解决了才可以把 border 删掉

记住

• CSS 的 border 调试法就相当于 JS 的 log 调试法

  新人常见低级错误

• 选择器拼写错误

• 属性名拼写错误
• 属性值拼写错误
• 大小写错误
• 没写分号
• 中文冒号
• 没写反花括号

• 每加单位

  在哪查资料

  网站

• Google 搜索关键词时加 MDN

• CSS tricks
• 张鑫旭的博客

• CSS 进阶 -ChokCoco

  书籍

• 不推荐买任何书

• CSS 和 HTML 一样，以练为主

  在哪搜练习素材

  PSD

• Freepik 搜索 PSD web

• 如果下载慢，就把域名加入翻墙插件

• 36 5PSD 里的 UI套件还行

  效果图（不提供下载）

• dribbble.com 顶级设计师社区

  直接模仿常去的商业网站

  `` 不要沉迷临摹，再多无益

  标准的制定者是谁：W3C

• 层叠样式表 CSS 2.1 规范

  CRM 学习法

• Copy : 抄别人的代码

• Run : 运行
• Modify : 根据自己的想法进行修改

部分资料来源：饥人谷 方方老师